Как я могу удалить класс из Slick Slider?

Question

Я пытался использовать скользящий слайдер и столкнулся с небольшой проблемой. У меня есть две секции, где я хочу использовать слайдер. Первый - это просто эффект «затухания» с одним изображением, а второй - слайдер с характеристиками. Теперь проблема в том, хочу ли я иметь разницу между моими отзывами и использую:

 .slick-slide {
  margin: 0px 10px;
  }

См. Изображение поля между отзывами

HTML-разметка -

    <div class="slider">
    <div class="testimonial-container">
        <div class="testimonial-img">
            <img src="images/face.jpg" alt="face">
        </div>
        <div class="testimonial-text">
            <h3>This is the only Norskkurs to take in Stavanger if value for 
                money and truly progressing with
                the Norwegian are important factors for you.
            </h3>
            <strong>Jessica Morris</strong>
            <p>A1/A2 Student</p>
        </div>
    </div>
    <div class="testimonial-container">
        <div class="testimonial-img">
            <img src="images/face.jpg" alt="face">
        </div>
        <div class="testimonial-text">
            <h3>Very hands on and animated. Relaxed atmosphere which is
                perfect for feeling comfortable in a new language setting.
            </h3>
            <strong>Helen Brian</strong>
            <p>A2 Student</p>
        </div>
    </div>
    <div class="testimonial-container">
        <div class="testimonial-img">
            <img src="images/face.jpg" alt="face">
        </div>
        <div class="testimonial-text">
            <h3>This course is a wonderful journey with lots of fun and 
                activities towards the goal. It's a well
                designed course for learning.
            </h3>
            <strong>Chidabaram Harikumar</strong>
            <p>A1/A2/B1 Student</p>
        </div>
    </div>
    <div class="testimonial-container">
        <div class="testimonial-img">
            <img src="images/face.jpg" alt="face">
        </div>
        <div class="testimonial-text">
            <h3>It is first language course which I have lasted more than one month :) . It means alot to me. They
                teach with both their heart and brain.
            </h3>
            <strong>Amir Ghaderian</strong>
            <p>A2/B1 Student</p>
        </div>
    </div>
    <div class="testimonial-container">
        <div class="testimonial-img">
            <img src="images/face.jpg" alt="face">
        </div>
        <div class="testimonial-text">
            <h3>One of the best thing which I have done in my life is to join Norskkurs in LNS.It's a great place to
                learn the language with good people.

            </h3>
            <strong>Dayanand Mohanasundram</strong>
            <p>A1/A2 Student</p>
        </div>
    </div>
</div>

Теперь с моим следующим слайдом "исчезать" я не хочу использовать поле, но он будет добавлять те же свойства .slick-slide ко всем слайдам, которые я использую.

Есть лив любом случае я могу применить это только к одному слайду или удалить этот класс / свойство из других слайдов?

Короче, мне нужно только поле между слайдами отзывов, а не другое. Как я могу обойти это?

Answer 1

Я бы предложил обновить структуру HTML, если она не обновлена. Вы можете использовать BEM https://en.bem.info/methodology/, чтобы не попасть в такие ловушки.

Если у вас есть 4 ползунка, у вас может быть следующий HTML:

<div class="slider">
    <div class="slider__slides">
      <div class="slider__slide"></div>
    </div>
  </div>

  <div class="slider-testimonials">
    <div class="slider__slides">
      <div class="slider__slide"></div>
    </div>
  </div>

  <div class="slider-faq">
    <div class="slider__slides">
      <div class="slider__slide"></div>
    </div>
  </div>

  <div class="slider-people">
    <div class="slider__slides">
      <div class="slider__slide"></div>
    </div>
  </div>

Итак, вы выиграли 'Для каждого ползунка не составит труда создать стиль slider__slide.

.slider-testimonials .slider__slide { margin: 0 10px; }

Тогда указанное выше поле не будет применено к другим ползункам.

Есливам необходимо использовать стиль для всех элементов slider__slide.

Вы можете сделать следующее:

.slider__slide { box-shadow: 0 0 0 black; }, например.

Надеюсь, это поможет.

Answer 2

Вы можете добавить отзывы класса к слайдеру отзывов и добавить поле к этому классу.

  .testimonial-slide {
  margin: 0px 10px;
  }