CODEWITHSUNDEEP
cssclassslidercarouselslick.js
patie
patie

Reputation: 308

Slick slider - Add class to 'slick-active'

I am working with slick slider.

Does anyone know how to add a class to the 'slick-active' slider?

I am showing 3 slides and I would like to have a different class on each one: one class for the left slide, another for the center and another for the slide on the right.

For example, for the active left slide: 'slick-active-left'.

enter image description here

Upvotes: 1

Views: 38143

Answers (3)

unnamedfeeling
unnamedfeeling

Reputation: 121

I think that the best native way to achieve your goal should be something like this:

$('#your-slider-element').slick({/configuration-object/}).on('beforeChange', function(event, slick, currentSlide, nextSlide){
 $(this).find('.slick-slide[data-slick-index="'+nextSlide+'"]').addClass('customClass');
 $(this).find('.slick-slide[data-slick-index="'+currentSlide+'"]').removeClass('customClass');
});

Don`t forget to remove your custom class before moving to new slide! Reference: http://kenwheeler.github.io/slick/ - search for beforeChange

Upvotes: 0

Emma Earl Kent
Emma Earl Kent

Reputation: 578

Instead of adding a class to each slider, you can target them already using CSS.Use the child selector to target the left slide, nth-child(1), the middle slide, nth-child(2) and the last slide, nth-child(3). Here is the CSS:

.slick-active: nth-child (1) {
/* Your CSS here */
}

Update as the CSS solution did not solve the issue because the slide class is being added through JS. You can use jQuery to target the slide. Just make sure it loads after the JS file.

<script>
jQuery('.slick-active:nth-child(1)').addClass('first-slide');
</script>

Upvotes: 0

Dalin Huang
Dalin Huang

Reputation: 11342

Simple, just use Adjacent sibling selectors (+) .slick-active for 1st match, .slick-active + .slick-active for 2nd match, .slick-active + .slick-active + .slick-active for the 3rd one:

.slick-active {
  background: red;
}

.slick-active + .slick-active {
  background: blue;
}

.slick-active + .slick-active + .slick-active {
  background: yellow;
}

Adjacent sibling selectors

former_element + target_element { style properties }

This is referred to as an adjacent selector or next-sibling selector. It will select only the specified element that immediately follows the former specified element.

REF: https://developer.mozilla.org/en/docs/Web/CSS/Adjacent_sibling_selectors

$('.slider').slick({
    slidesToShow: 3,
    slidesToScroll: 1,
    dots: true,
    infinite: true,
    cssEase: 'linear'
});
.slider {
    width: 650px;
    margin: 0 auto;
}

img {
    width: 150px;
    height: 150px;
}

.slick-active {
  background: red;
}

.slick-active + .slick-active {
  background: blue;
}

.slick-active + .slick-active + .slick-active {
  background: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/jquery.slick/1.3.15/slick.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/jquery.slick/1.3.15/slick.min.js"></script>

<div class="slider">
  <div>
    <img src="http://kenwheeler.github.io/slick/img/fonz1.png" />
  </div>
  <div>
    <img src="http://kenwheeler.github.io/slick/img/fonz2.png" />
  </div>
  <div>
    <img src="http://kenwheeler.github.io/slick/img/fonz3.png" />
  </div>
  <div>
    <img src="http://kenwheeler.github.io/slick/img/fonz1.png" />
  </div>
  <div>
    <img src="http://kenwheeler.github.io/slick/img/fonz2.png" />
  </div>
  <div>
    <img src="http://kenwheeler.github.io/slick/img/fonz3.png" />
  </div>
</div>

Upvotes: 5

Related Questions