如何解决如何校正圆滑的箭头?
我在页面中有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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。