javascript - 使用 Slick Slider 仅旋转类，幻灯片数 = slidesToShow

Question

我有 3 个滑块项目，我想显示所有 3 个并使用 slick 滑块来旋转“slick-active”类，这样我就可以使用 css 通过这个类显示隐藏文本。我知道我可以用自定义 js 做到这一点，但它可以在光滑的滑块中吗？

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

标签： javascriptcssslick.js

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>