如何校正圆滑的箭头？

问题描述

我在页面中有2个光滑的滑块，但是当我单击下一个按钮时，第二个滑块将移动，而不是第一个。最初，它是正确的，并且运行良好。这是我的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>

解决方法

请尝试更具体地确定要定位的prevArrow和nextArrow类，因为如果它们是从页面的两个区域中抓取.next和.prev不够具体，然后光滑地将它们视为两个滑块的导航。

$(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>