如何解决使用 Slick Slider 只旋转班级,幻灯片数 = slidesToShow
我有 3 个滑块项目,我想显示所有 3 个并使用光滑的滑块来旋转“slick-active”类,以便我可以使用 css 通过此类显示隐藏文本。 我知道我可以使用自定义 js 来实现,但是否可以在光滑的滑块中实现?
$('.slider_nav').slick({
slidesToShow: 3,centerMode: true,dots: true,autoplay: true
});
解决方法
我认为您不需要在这种情况下使用外部库,只要您可以使用 jQuery 手动完成,因为您已经在使用它!
我为您制作了一个简单的示例,让您有一个想法,您可以继续设计/布局和动画。
$('.item').on('click',function() {
$('.item').removeClass('active');
$(this).addClass('active');
})
.items {
display: flex;
}
.item {
width: 33%;
background: #e7e7e7;
margin-right: 5px;
padding: 5px;
}
.item.active {
background: #E5863D;
}
.item.active p {
display: block;
}
.item p {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="items">
<div class="item active">
<h1>Item 1</h1>
<p>Text for item #1</p>
</div>
<div class="item">
<h1>Item 2</h1>
<p>Text for item #2</p>
</div>
<div class="item">
<h1>Item 3</h1>
<p>Text for item #3</p>
</div>
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。