光滑的滑块，在第一张幻灯片中填充

Question

我的想法是：我想在 slick.js 的第一张幻灯片中添加填充，是的，我已经在 css 中尝试了 :first 元素。但是我真正想要的是：将 css class 放在第一个元素 中，然后 在 class 未出现时更改

我目前的情况：

$(document).ready(function () {
    $('.slider1').slick({
        dots: false,
        infinite: false,
        speed: 300,
        slidesToShow: 4
    });

    $('.slider1').on('click', function (event, slick, currentSlide) {
        if (currentSlide === 0) {
            console.log('First element');
            $(this).eq(currentSlide).addClass('first-slide-is-active111');
        } else {
            $(this).eq(currentSlide).removeClass('first-slide-is-active111');
        }
    });
});

但不起作用..有什么帮助吗？

JS Fiddle demo

编辑： 让我清楚我想做的就像 netflix 滑块.. 在第一张幻灯片中有 space..

Answer 1

您需要将 class 添加到第一张幻灯片并填充。

$(document).ready(function () {
            $('.slider1').slick({
  dots: false,
  infinite: false,
  speed: 300,
  slidesToShow: 4,
});


  $('.slider1').on('click', function (event, slick, currentSlide) {
   if (currentSlide === 0) {
       console.log('First element');
         $(this).eq(currentSlide).addClass('first-slide-is-active111');
           } else {
             $(this).eq(currentSlide).removeClass('first-slide-is-active111');
                }
            });
        });

.s1 {
  padding: 50px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slider1">

  <div class="s1 slide"><span>Slide1</span></div>
  <div class="slide"><span>Slide2</span></div>
  <div class="slide"><span>Slide3</span></div>
  <div class="slide"><span>Slide4</span></div>
  <div class="slide"><span>Slide5</span></div>
  <div class="slide"><span>Slide6</span></div>

</div>

Answer 2

已修复您的代码

$(document).ready(function () {
    $('.slider1').slick({
      dots: false,
      infinite: false,
      speed: 300,
      slidesToShow: 4,
    });

    $('.slide:first').addClass('first-slide-is-active111');

    $('.slider1').on('afterChange', function (event, slick, currentSlide) {
      if (currentSlide === 0) {
        console.log('First element');
        $('.slide:first').addClass('first-slide-is-active111');
      } else {
        $('.slide:first').removeClass('first-slide-is-active111');
      }
    });
});

js fiddle with fixed code

您必须将处理程序绑定到 'afterChange' 而不是 'click'。并且也应用了一些逻辑修复。如果这个逻辑不是你想要的，请在下面的评论中告诉我，我会尽力提供帮助。

光滑的滑块，在第一张幻灯片中填充

Slick slider, padding in the first slide

javascript

css

slick.js