Slick: initialSlide not working in responsive settings.

Created on 4 Nov 2014 · 10Comments · Source: kenwheeler/slick

Hi,

I noticed that the initialSlide setting doesn't work thru responsive settings.

Here is a jsfiddle of the problem: http://jsfiddle.net/9p3agprL/38/

Confirmed

Source

JoonasToroi

Most helpful comment

This still seems to be broken, at least when using this init code:

    $(".tabs").slick(
    {
        slidesToShow: 3,
        slidesToScroll: 1,
        asNavFor: '.schedule',
        centerMode: true,
        centerPadding: '24px',
        focusOnSelect: true,
        mobileFirst: true,
        vertical: true,
        initialSlide: 1,
        responsive:
        [
            {
                breakpoint: 768,
                settings:
                {
                    centerPadding: '50px',
                    vertical: false,
                    initialSlide: 1
                }
            }
        ]
    });
    $(".schedule").slick(
    {
        slidesToShow: 1,
        slidesToScroll: 1,
        arrows: false,
        asNavFor: '.tabs',
        mobileFirst: true,
        initialSlide: 1
    });

Is there any chance that the fix supposedly merged earlier on doesn't cover asNavFor sliders?

proimage on 28 Sep 2016

👍2

All 10 comments

Typically initial slide is set initially. Is there a scenario in which you would actually need to have a different initial slide for different window sizes?

kenwheeler on 4 Nov 2014

I thought this might be more of an feature than an bug. But yeah, I have a scenario where this would have been handy.

I have a scenario where the amount of slides vary on different pages. One of the slides represents the page the user is on. I want that slide to be the first one, but as I have different amounts of slides on different screen sizes I might get an scenario where I have less slides on the screen than what it can be fitted on the slidesToShow. If I have the initialSlide value set on these scenarios I will lose the slider functionality and some of the slides might be "dropped" from view.

Here's a more precise jsfiddle of the problem: http://jsfiddle.net/9p3agprL/52/

I would have used the responsive settings to set the innitialSlide to 0 if there was room for all the slides in the slider. Other way to fix this might be that the innitialSlide value would be set to 0 if slidesToShow is greater than the number of slides.

JoonasToroi on 4 Nov 2014

Looking into this.

kenwheeler on 7 Nov 2014

I'm also having this issue, what I can say is that the problem appears after slidesToShow, for example if I set slidesToShow: 4 and initialSlide: 2, it works but if I change initialSlide: 3 then it doesn't works.

This works:
infinite: true,
slidesToShow: 4,
slidesToScroll: 3,
initialSlide: {0|1|2}

This doesn't:
infinite: true,
slidesToShow: 4,
slidesToScroll: 3,
initialSlide: {3|4}

All this assuming we have 5 "items" to test with.

By the way I'm not using responsive settings, here is my script

<script type="text/javascript">
    $(document).ready(function(){
        $('.my-slider').slick({
            dots: true,
            infinite: true,
            slidesToShow: 4,
            slidesToScroll: 3,
            initialSlide: 3
        });
    });
</script>

enb141 on 15 Dec 2014

I am having the same issue and have worked around it with the following hack. You can replace the previous and next cases in the Slick.prototype.changeSlide method. This isn't that pretty, but it fixes the issue I was having. That being said, this assumes infinity is false.

Sadly this editor isn't honoring the "pre" tag, so you may have to see the source for the html.

SOLUTION:
case 'previous':
slideOffset = indexOffset === 0 ? _.options.slidesToScroll : _.options.slidesToShow - indexOffset;
if (_.slideCount > _.options.slidesToShow) {
//ORIGINAL - _.slideHandler(_.currentSlide - slideOffset, false, dontAnimate);
//HACK START
var slideTo = _.currentSlide - slideOffset;
if (!_.options.infinite && slideTo < 0) {
slideTo = 0;
}
_.slideHandler(slideTo, false, dontAnimate);
//HACK END
}
break;

case 'next':
//ORIGINAL - slideOffset = indexOffset === 0 ? _.options.slidesToScroll : indexOffset;
//HACK START
slideOffset = _.options.slidesToShow;
//HACK END
if (_.slideCount > _.options.slidesToShow) {
//ORIGINAL - _.slideHandler(_.currentSlide + slideOffset, false, dontAnimate);
//HACK START
var slideTo = _.currentSlide + slideOffset;
if (!_.options.infinite && (slideTo + slideOffset) > _.slideCount) {
slideTo = _.slideCount - slideOffset;
}
_.slideHandler(slideTo, false, dontAnimate);
//HACK END
}
break;

HTML

JAVASCRIPT
$('#slider').slick({
infinite: false,
centerMode: true,
initialSlide: 8,
responsive: [{
breakpoint: 1680,
settings: {
slidesToShow: 8,
centerMode: false,
slidesToScroll: 8
}
}, {
breakpoint: 1480,
settings: {
slidesToShow: 8,
centerMode: false,
slidesToScroll: 8
}
}, {
breakpoint: 1280,
settings: {
slidesToShow: 6,
centerMode: false,
slidesToScroll: 6
}
}, {
breakpoint: 1152,
settings: {
slidesToShow: 6,
centerMode: false,
slidesToScroll: 6
}
}, {
breakpoint: 1024,
settings: {
slidesToShow: 5,
centerMode: false,
slidesToScroll: 5
}
}, {
breakpoint: 896,
settings: {
slidesToShow: 5,
centerMode: false,
slidesToScroll: 5
}
}, {
breakpoint: 768,
settings: {
slidesToShow: 4,
centerMode: false,
slidesToScroll: 4
}
}, {
breakpoint: 640,
settings: {
slidesToShow: 3,
centerMode: false,
slidesToScroll: 3
}
}, {
breakpoint: 480,
settings: {
slidesToShow: 2,
centerMode: false,
slidesToScroll: 2
}
}]
});

CSS
.slider-container {
background-color: green;
text-align: center;
font-size: 40px;
color: white;
border: 3px solid white;
padding-top: 30px;
padding-bottom: 30px;
cursor: pointer;
}
.pager-active .slider-container {
background-color: orange;
}

jmlivingston on 9 Jan 2015

This still seems to be broken, at least when using this init code:

    $(".tabs").slick(
    {
        slidesToShow: 3,
        slidesToScroll: 1,
        asNavFor: '.schedule',
        centerMode: true,
        centerPadding: '24px',
        focusOnSelect: true,
        mobileFirst: true,
        vertical: true,
        initialSlide: 1,
        responsive:
        [
            {
                breakpoint: 768,
                settings:
                {
                    centerPadding: '50px',
                    vertical: false,
                    initialSlide: 1
                }
            }
        ]
    });
    $(".schedule").slick(
    {
        slidesToShow: 1,
        slidesToScroll: 1,
        arrows: false,
        asNavFor: '.tabs',
        mobileFirst: true,
        initialSlide: 1
    });

Is there any chance that the fix supposedly merged earlier on doesn't cover asNavFor sliders?

proimage on 28 Sep 2016

👍2

Hi there... :)
I am using 1.6.0 and this still seems to be broken:

when i reload or intial load the page in a responsive small view it does not show the corresponding .slider-for-Container and also not the last slide-nav wich is in my case 12

$('.slider-nav').slick({
        initialSlide: 12,
        slidesToShow: 5,
        slidesToScroll: 1,
        asNavFor: '.slider-for',
        dots: false,
        centerMode: false,
        infinite: false,
        focusOnSelect: true,
        responsive: [
            {
                breakpoint: 480,
                settings: {
                    slidesToShow: 3
                }
            },
            {
                breakpoint: 360,
                settings: {
                    slidesToShow: 2
                }
            }
        ]
});

$('.slider-nav').slick({
        initialSlide: 12,
        slidesToShow: 5,
        slidesToScroll: 1,
        asNavFor: '.slider-for',
        dots: false,
        centerMode: false,
        infinite: false,
        focusOnSelect: true,
        responsive: [
            {
                breakpoint: 480,
                settings: {
                    slidesToShow: 3
                }
            },
            {
                breakpoint: 360,
                settings: {
                    slidesToShow: 2
                }
            }
        ]
});

<h2>Slider Syncing</h2>
<div class="slider slider-for">
    <div><h3>1</h3></div>
    <div><h3>2</h3></div>
    <div><h3>3</h3></div>
    <div><h3>4</h3></div>
    <div><h3>5</h3></div>
    <div><h3>6</h3></div>
    <div><h3>7</h3></div>
    <div><h3>8</h3></div>
    <div><h3>9</h3></div>
    <div><h3>10</h3></div>
    <div><h3>11</h3></div>
    <div><h3>12</h3></div>
</div>

<div class="slider slider-nav">
    <div><h3>1</h3></div>
    <div><h3>2</h3></div>
    <div><h3>3</h3></div>
    <div><h3>4</h3></div>
    <div><h3>5</h3></div>
    <div><h3>6</h3></div>
    <div><h3>7</h3></div>
    <div><h3>8</h3></div>
    <div><h3>9</h3></div>
    <div><h3>10</h3></div>
    <div><h3>11</h3></div>
    <div><h3>12</h3></div>
</div>

is there a way to fix it? Many thanks in advance. And thx for the slider in general!

MatthiasPeltzer on 10 Mar 2017

Got it to work by doubling the slidestoscroll:
infinite: true,
speed: 500,
slidesToShow: 7,
initialSlide: 14,
dots: true,
arrows: false,
appendDots: $(".new_slider"),
slidesToScroll: 7,

Moworks on 4 Apr 2017

Still having this bug - needed different initialSlide in responsive cnfiguration. with different rows and slidesPerRow. I eventually solved it using the slickGoTo method, inside an 'init' event listener.