Slick: The class .slick-active appears on all slides, should only be the first slide

[MrzAOK]

I am using the asNavFor option and all of the items in the nav load with the class .slick-active. Only the first option should be active. It's not until you click, that it begins to work correctly. Is there a way to fix this when it loads.

All items load as slick-active. If you click one of them, the .slick-active class leaves all of the other elements. This is how I want it to load though, with only the first item active.

[jamiehs]

I saw this bug too. It appears to happen when slidesToShow is greater than or equal to the number of slides. If the navigation slider has more slides than what is visible, the issue goes away.

[jamesckemp]

Any visible slides when using slidesToShow are classed as active. I used the following code to add my own active classes:

jQuery('#images').on({
    beforeChange: function(event, slick, current_slide_index, next_slide_index) {
        //remove all active class
        jQuery('#thumbnails .slick-slide').removeClass('slick-main-active');
        //set active class for current slide
        jQuery('#thumbnails .slick-slide[data-index='+next_slide_index+']').addClass('slick-main-active');
    }
}).slick({
    asNavFor: '#thumbnails',
}); 

Where #images is my main slider with one slide, and #thumbanils is my smaller slider with multiple slides at one time.

[simeydotme]

Hmmm.

I think maybe it's an idea to reconsider this convention.
@jamesckemp is correct, anything that is "visible" is currently considered slick-active... perhaps we need to have slick-visibleand slick-active where active is the currently selected slide-index.

It would be a breaking-change though, so would need a minor version bump.
@kenwheeler what do you think about this?

[vjanssens]

Is there a fix I can use right now?

[simeydotme]

you can use the code @jamesckemp wrote.
I will look to write a proper fix for this without break backwards compatibility.

[in-in]

Same problem. Where I should use jameskemp's code?

[jamesckemp]

You use it at the same time as initialising slick. Note that I init slick after I tell it to watch for beforeChange events.

[in-in]

@jamesckemp sorry, I have just started learning Web Dev is now only know HTML and CSS. My init script is as follows:

$(document).ready(function () {
  $('.slider').on({
    beforeChange: function (event, slick, current_slide_index, next_slide_index) {
      $('.thumbnails .slick-slide').removeClass('slick-main-active');
      $('.thumbnails .slick-slide[data-index=' + next_slide_index + ']').addClass('slick-main-active');
    }
  }).slick({
    asNavFor: '.thumbnails'
  });
  $('.slider').slick({
    lazyLoad: 'ondemand',
    fade: true,
    infinite: true,
    slideToShow: 1,
    slidesToScroll: 1,
    dots: false,
    arrows: true,
    appendArrows: $('.slider-arrows'),
    asNavFor: '.thumbnails'
  });
  $('.thumbnails').slick({
    slidesToShow: 10,
    slidesToScroll: 10,
    asNavFor: '.slider',
    dots: false,
    arrows: false,
    focusOnSelect: true
  });
});

What i do wrong?
I'm trying to create a web-page from free PSD http://in-in.github.io/intent/

[jamesckemp]

It should be:

$(document).ready(function () {
  $('.slider').on({
    beforeChange: function (event, slick, current_slide_index, next_slide_index) {
      $('.thumbnails .slick-slide').removeClass('slick-main-active');
      $('.thumbnails .slick-slide[data-index=' + next_slide_index + ']').addClass('slick-main-active');
    }
  }).slick({
    asNavFor: '.thumbnails'
    lazyLoad: 'ondemand',
    fade: true,
    infinite: true,
    slideToShow: 1,
    slidesToScroll: 1,
    dots: false,
    arrows: true,
    appendArrows: $('.slider-arrows'),
  });
  $('.thumbnails').slick({
    slidesToShow: 10,
    slidesToScroll: 10,
    asNavFor: '.slider',
    dots: false,
    arrows: false,
    focusOnSelect: true
  });
});

[simeydotme]

Added to master; now there's a CSS class called slick-current which should be applied to the currently-selected index, slick-active remains as it did before; applying to any slides which are considered to be active in the UI.

[jamesckemp]

Nice one!

[orest22]

I've got slick with bower and looks like this fix is not yet over there?

[simeydotme]

Nope. @kenwheeler needs to build a release :)

[rrbiten]

@simeydotme, thanks for this fix, but I tried implementing it and it doesn't work on cases when you have 'focusOnSelect' set to true. I mean, on these cases, when you click a slide, it won't set the .slick-current as I believe it should.

[simeydotme]

@rrbiten I'll look in to it... but do you have a JSFiddle to help out in the mean time? :)

[rrbiten]

@simeydotme no, I don't have a Fiddle for this because my case is kinda 'unique'.

I'm using Slider Syncing with two sliders, one above the other, both with 3 items each and they control themselves on click or slide.

They always work like tabs and on Desktop we have:

• top slider: displaying all 3 items
• bottom slider: displaying one at a time

I got this scenario working but I couldn't rely on slick-active class, cause on the top one (displaying all 3), all of them was always active.

On mobile was easy to fix too, cause both top and bottom where displaying one item at a time.

The tricky part where on tablet sizes where we have to display:

• top slider: displaying 2 items
• bottom slider: as always, displaying one item

The solution I found for all of this was to refactor everything consider the slider below as always being the only 'source of truth' and listen for its 'afterChange' event, and use the new 'currentSlide' index to set an 'active' class on the top slider.

Even the arrows (that is being shown as part of the top slider) is actually the arrows of the slider below.

On my scenario, everything is working flawlessly now, but again, I'm not relying on the slick-active class but using the currentSlide ID of the slider below to set an 'active' class on the slider above.

For now, I think this could work fine as a workaround to pretty much any scenario (as long as we have another slider - that could be hidden - that only displays one item at a time as being the 'source of truth' for the slider.

If this explanation doesn't help, let me know and I'll try to create a Fiddle for this when I have more time.

[simeydotme]

Your explanation left me very confused.
But your other comment was correct: https://github.com/kenwheeler/slick/blob/7eadb8adac811f573d69626ceac8efda047a7bb9/slick/slick.js#L1929-L1953 this method needs to have the slick-current class applied.

I'll sort it soon :)

Si.

[hiddebroerse]

Shouldn't rows 1942 and 1943 be:

        _.$slider.find('.slick-slide').removeClass('slick-current').attr('aria-hidden', 'true');
        _.$slides.eq(index).addClass('slick-current').attr("aria-hidden", "false");

[steacha]

This is not fixed in 1.5.7 (latest as of today). There are fiddles showing the problem at http://jsfiddle.net/xd2h934n/ and https://jsfiddle.net/b3kzaod9/3/. This issue is visible whether looping is enabled or not.

[simeydotme]

Wanna say thanks to @steacha ... his JSFiddles really helped me understand and fix the issue mentioend by https://github.com/kenwheeler/slick/issues/1248#issuecomment-110890881. :smile:

Should be working :ok_hand: on master branch, now.
Wait for next release.

[cc-carmatec]

On mouseover over the thumbnails the images are not displayed correctly..There seems to be some delay in the display. This is the code for the main slider and the thumbnails.
$(document).on('ready', function() {
$('.banner_slider').slick({
cssEase: 'linear',
slidesToShow: 1,
slidesToScroll: 1,
speed: 1000,
autoplay: false,
fade:true,
autoplaySpeed: 3000,
nextArrow: '

',
prevArrow: '

'
});
});

var index = 0;
$(function animate_list() {
    $(".slider-highlight .mouse-slider").each(function () {
        $(".slider-highlight .mouse-slider").eq(4-index).animate({opacity:1},index*100, 
            function() {
                $(".btn-red-border-left").animate({opacity:1}, 500);
                $('.slider-highlight .mouse-slider').eq(index).addClass('active');
            });
        index++;
    });
});

$('.banner_slider').on('beforeChange', function (event, slick, currentSlide, nextSlide) {
    $(".slider-highlight .mouse-slider").removeClass("active");
    var mySlideNumber = nextSlide;
    $(".slider-highlight .mouse-slider:eq("+mySlideNumber+")").addClass("active");
});
$('.slider-highlight').slick({

slidesToShow: 5,
slidesToScroll: 1,
asNavFor: '.banner_slider',
dots: true,
focusOnSelect: true
});

$('.slider-highlight').on('mouseover', '.slick-slide', function (e) {

var $currTarget = $(e.currentTarget),
index = $currTarget.data('slick-index'),
slickObj = $('.banner_slider').slick('getSlick');
slickObj.slickGoTo(index);
$('.slider-highlight .mouse-slider').removeClass('active');
$('.slider-highlight .mouse-slider').eq(index).addClass('active');

});

[St3f4NS]

Using .slick-center instead of .slick-active did a job for me. Try it.

[cAstraea]

Hello :-)
In what version was this introduced ? Currently on 1.5.9 and all slides have it

[KholaH]

@simeydotme Hi I am using the slider syncing method but I have arrows on the top slide which is the main slide and I want to show border on the thumbnail slide. When the arrow is pressed to show the next slide i want border on the thumbnail of the selected slide.
s already being handled if yes then please tell me how otherwise can you give a solution please this is urgent

[Nishantart]

Add this code, will work perfectly
$('.slick').on('beforeChange', function(event,slick,slide,nextSlide) {
$('.slider-nav-thumbnails').find('.slick-slide').removeClass('slick-current').eq(nextSlide).addClass('slick-current');
});