Блог

Главная - Вопросы по программированию - как исправить стрелки в slick slider?

как исправить стрелки в slick slider?

#html #css #frontend #slick.js

#HTML #css #интерфейс #slick.js

Вопрос:

У меня есть 2 слайдера на странице, но когда я нажимаю кнопку next, второй слайдер перемещается вместо первого. Сначала это было правильно и работало хорошо. Вот мои коды jquery.

 $(document).ready(function(){
  $(".tabel-instant-works-section").slick({
    infinite: true,
    slidesToShow: 3,
    slidesToScroll: 1,
    rtl: true,
    prevArrow: $('.next'),
    nextArrow: $('.prev'),
  });
});  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

и мои HTML-коды

 <div class="inastant-works">
    <div class="tabel-instant-works-section">
        <div class="content-instant-works">
          <img class="tbl-item-img" src="image/drawing/1.png" alt="sketches">
        </div>
        <div class="content-instant-works">
          <img class="tbl-item-img" src="image/drawing/2.png" alt="sketches">
        </div>
        <div class="content-instant-works">
          <img class="tbl-item-img" src="image/drawing/3.png" alt="sketches">
        </div>
        <div class="content-instant-works">
          <img class="tbl-item-img" src="image/drawing/4.png" alt="sketches">
        </div>
        <div class="content-instant-works">
          <img class="tbl-item-img" src="image/drawing/5.png" alt="sketches">
        </div>
        <div class="content-instant-works">
          <img class="tbl-item-img" src="image/drawing/6.png" alt="sketches">
        </div>
      </div>
      <button aria-label="Previous" class="prev"><i class="fas fa-angle-left"></i></button>
      <button aria-label="Next" class="next"><i class="fas fa-angle-right"></i></button>
  </div>

Ответ №1:

Попробуйте уточнить, на какие prevArrow nextArrow классы и ориентироваться, так как это может привести к захвату .next и .prev из двух областей страницы, если они недостаточно конкретны, и тогда slick видит их как навигацию для обоих слайдеров.

 $(document).ready(function() {
  $(".tabel-instant-works-section").slick({
    infinite: true,
    slidesToShow: 3,
    slidesToScroll: 1,
    rtl: true,
    prevArrow: $('.inastant-works .next'),
    nextArrow: $('.inastant-works .prev'),
  });
});  
 <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<div class="inastant-works">
  <div class="tabel-instant-works-section">
    <div class="content-instant-works">
      <img class="tbl-item-img" src="image/drawing/1.png" alt="sketches">
    </div>
    <div class="content-instant-works">
      <img class="tbl-item-img" src="image/drawing/2.png" alt="sketches">
    </div>
    <div class="content-instant-works">
      <img class="tbl-item-img" src="image/drawing/3.png" alt="sketches">
    </div>
    <div class="content-instant-works">
      <img class="tbl-item-img" src="image/drawing/4.png" alt="sketches">
    </div>
    <div class="content-instant-works">
      <img class="tbl-item-img" src="image/drawing/5.png" alt="sketches">
    </div>
    <div class="content-instant-works">
      <img class="tbl-item-img" src="image/drawing/6.png" alt="sketches">
    </div>
  </div>
  <button aria-label="Previous" class="prev"><i class="fas fa-angle-left"></i></button>
  <button aria-label="Next" class="next"><i class="fas fa-angle-right"></i></button>
</div>