使用 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>