使用Slick Slider只旋转类，幻灯片数量=幻灯片显示

Question

我有3个滑块项目，我想显示所有3个，并使用光滑的滑块只旋转"；光滑活性"；类，这样我就可以使用css通过这个类显示隐藏文本。我知道我可以用自定义js来做，但在光滑的滑块内可能吗？

$('.slider_nav').slick({
slidesToShow: 3,
centerMode: true,
dots: true,
autoplay: true
});

Answer 1

我认为在这种情况下不需要使用外部库，只要您可以手动使用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>