如何解决当幻灯片总数和显示的幻灯片总数相等且滑块也不滑动时,隐藏滑动箭头
所以我尝试了很多方法。我想要实现的是我只有3张幻灯片,但也显示3张幻灯片。每当我放slidesToShow: 3
时,滑块就会停止工作并且箭头被隐藏。
我的代码如下。请帮忙。
$('.slider-for').slick({
slidesToShow: 1,slidesToScroll: 1,arrows: false,fade: false,asNavFor: '.slider-nav',initialSlide: 0,});
$('.slider-nav').slick({
slidesToShow: 3,asNavFor: '.slider-for',dots: false,focusOnSelect: true,arrows: true,});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.0/slick.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css" />
<div class="slider slider-for">
<div>
<div class="quote">
<h4>Lorem ipsum dolor sit amet,consectetur adipiscing elit,sed do eiusmod tempor incididunt ut labore</h4>
</div>
</div>
<div>
<div class="quote">
<h4>Lorem ipsum dolor sit amet,sed do eiusmod tempor incididunt ut labore</h4>
</div>
</div>
</div>
<div class="slider slider-nav">
<div>
<div class="quote-image">
<img src="https://demo.plugins360.com/wp-content/uploads/2017/12/demo.png" alt="" width="200px">
</div>
</div>
<div>
<div class="quote-image">
<img src="https://demo.plugins360.com/wp-content/uploads/2017/12/demo.png" alt="" width="200px">
</div>
</div>
<div>
<div class="quote-image">
<img src="https://demo.plugins360.com/wp-content/uploads/2017/12/demo.png" alt="" width="200px">
</div>
</div>
</div>
解决方法
如果只有3张幻灯片和slidesToShow: 3
,则没有滚动内容。如果幻灯片不完全可见,则可以尝试删除centerMode: true
设置。
$('.slider-nav').slick({
slidesToShow: 3,slidesToScroll: 1,asNavFor: '.slider-for',dots: false,focusOnSelect: true,arrows: true,});
如果您希望滚动而不考虑计数,则可以尝试设置infinite: true
。
设置幻灯片显示:2.99 这就是我的答案
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。