Question

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

到目前为止：

$(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滑块..在第一张幻灯片中有空格..

Answer 1

您需要在第一张幻灯片中添加类并提供填充。

$(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'。并且也提供了一些逻辑修复。如果这个逻辑不是你想要的，请在下面的评论中告诉我，我会尽力帮助。

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

2 个答案: