Slick slider, padding in the first slide

Question

My idea is the following one: I would like to put a padding in the first slide from slick.js , and yes, i already tried the :first element in css.. But what I really wanted is: put an css class in the first ever element and then change the class when its not appearing

What I've so far:

$(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');
        }
    });
});

but doesnt work.. any help?

JS Fiddle demo

edit: to make me clear what i would like to do is like a netflix slider.. with space in the first slide..

Answer 1

you need to add class to the first slide and give padding.

 $(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

Fixed your code

$(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

You had to bind your handler to 'afterChange' not to 'click'. And some logic fixes are aplied too. If this logic is not what you want just let me know in comments below and I will try to help.