CODEWITHSUNDEEP
jquerycarouselslick.js
CDK
CDK

Reputation: 679

Slick Carousel navigation is disabled when my initialSlide is the last in a non infinite slide

I am using Slick carousel on my application, and for the most part it is a brilliant plugin. I have run into one problem though.

I have got a carousel which is 13 slides long. At different times, a different initial slide will be loaded.

When the initial slide is set to the last slide (in this case the 13th), the arrow to navigate to previous slides suddenly does not work.

I think it is related to the number of slides on display (in the JSFiddle below I have noticed that the problem occurs when the initialSlide is set to anything greater than 9. When on 9, the first click does not do anything, but the second click initiates a scroll).

Any help on how to fix this so that I can have the initialSlide set to one of the last few slides and still be able to navigate back would be appreciated.

JSFiddle of the issue: http://jsfiddle.net/nemh9nzk/7/

Fiddle html:

<section class="slider">
    <div>slide1</div>
    <div>slide2</div>
    <div>slide3</div>
    <div>slide4</div>
    <div>slide5</div>
    <div>slide6</div>
    <div>slide7</div>
    <div>slide8</div>
    <div>slide9</div>
    <div>slide10</div>
    <div>slide11</div>
    <div>slide12</div>
    <div>slide13</div>
</section>

Fiddle JS:

$(".slider").slick({
    slidesToScroll: 1,
    slidesToShow: 5,
    speed: 300,
    infinite: false,
    initialSlide:13
});

Upvotes: 1

Views: 3722

Answers (1)

CDK
CDK

Reputation: 679

I have managed to find a solution to this problem by using the slickGoTo method instead of using intialSlide.

$('.slider').slick('slickGoTo',13,true);

Which seems to work fine - Fiddle: http://jsfiddle.net/nemh9nzk/8/

I hope this might help somebody in the future.

Upvotes: 4

Related Questions