Slick: error on resize when slidesToShow == slideCount

[yangkennyk]

short description of the bug / issue, provide more detail below.

slides scroll off screen when slidesToShow == slideCount and you resize window after selecting a slide.

====================================================================

http://jsfiddle.net/sfvhgba0/1/

====================================================================

Steps to reproduce the problem

1. focus on a slide thats not the first one
2. resize window

====================================================================

What is the expected behaviour?

all 3 slides should still be visible

====================================================================

What is observed behaviour?

slides shift left and slides are hidden.

====================================================================

[hermannpessoa]

I have worked on a horrible solution but it worked well for me

// Before call slick
// Basically adding divs after and before itens to slide

if($(".slider-nav > div").length == 3){

    //As Nav For to navigation
    $(".slider-nav > div").first().before("<div class="fixSlick"></div>")
    $(".slider-nav > div").last().after("<div class="fixSlick"></div>")

    //As Nav For to big container
    $(".slider-for > div").first().before("<div class="fixSlick"></div>")
    $(".slider-for > div").last().after("<div class="fixSlick"></div>")

    initialSlide = 1
}else{
    initialSlide = 0
}


// call slick
$(".slider-for").slick({
    slidesToShow: 1,
    slidesToScroll: 1,
    arrows: false,
    // fade: true,
    asNavFor: ".slider-nav",
    infinite: false,
    initialSlide: initialSlide
});

$(".slider-nav").slick({
    slidesToShow: 3,
    slidesToScroll: 1,
    asNavFor: ".slider-for",
    dots: false,
    centerMode: true,
    focusOnSelect: true,
    infinite: false,
    initialSlide: initialSlide
});


// use afterChange method to force the slider back to the desired positions
// in my case just add to the slider-nav

$(".slider-nav").on("afterChange", function(event, slick, currentSlide){

    if($(".fixSlick").length > 0){
        if(currentSlide == 0){
            setTimeout(function(){
                $(".slider-nav").slick("slickGoTo", 1)
            },1)
        }

        if(currentSlide == slick.slideCount - 1){
            setTimeout(function(){
                $(".slider-nav").slick("slickGoTo", slick.slideCount - 2)
            },1)
        }
    }
})

// god help u all

[aximili]

I noticed there is a bug in slick.js 1.8.0 and 1.9.0 that is probably related to this.

In Slick.prototype.getLeft function, find these lines (around line 1149)

        if (_.options.vertical === false) {
            targetLeft = ((slideIndex * _.slideWidth) * -1) + _.slideOffset;
        } else {
            targetLeft = ((slideIndex * verticalHeight) * -1) + verticalOffset;
        }

It should be like this

        if (_.options.vertical === false) {
            if (_.slideCount <= _.options.slidesToShow)
                targetLeft = _.slideOffset;
            else
                targetLeft = ((slideIndex * _.slideWidth) * -1) + _.slideOffset;
        } else {
            if (_.slideCount <= _.options.slidesToShow)
                targetLeft = verticalOffset;
            else
                targetLeft = ((slideIndex * verticalHeight) * -1) + verticalOffset;
        }

I hope someone could include this fix in the next version (I am not sure how to do that)

[harkor]

The solution of aximili worked for me.

Thank you :)