CODEWITHSUNDEEP
twitter-bootstrap-3carouselslick.js
Howie
Howie

Reputation: 2778

Problematic image carousel wrap-around

The carousel doesn't wrap-around nicely.

If I keep clicking right, the last image that will show will be the very first one. Then I have to click four more times, at which point this image will be at the very left of the carousel. No images are shown on the right side. Then all of the sudden they all appear at once. This happens when the carousel starts over.

Image

I'd expect that the "Transition 2" frame would have "Img #2" on the right side, and so on.

I've tried

I'm using slick.js 1.5.8 with the following settings:

  $("#myslick").slick({
    autoplay: true,
    variableWidth: true
  });

With the following HTML (the slick carousel is within a Bootstrap 3 container):

<div class="container">
    <div id="myslick">
        a few <img> tags with variable dimensions
    </div>
</div>

I use the included CSS theme files, but have added the following

.slick-slide {
    height: 100px;
    margin: 0 15px;
}

Upvotes: 6

Views: 1907

Answers (3)

Lakshitha Dilhan Gunasekara
Lakshitha Dilhan Gunasekara

Reputation: 1

This can happen when you got EVEN number 'slidesToShow' with 'centerMode' ON

Upvotes: 0

Bob Dill
Bob Dill

Reputation: 1010

slick has a slidesToShow setting which defaults to 1. You want to change that setting to "3". Check out the "multiple Items" setting here: http://kenwheeler.github.io/slick/ which has this code:

$('.multiple-items').slick({
 infinite: true,     // Keep on looping
 slidesToShow: 3,    // Number of slides to show at one time
 slidesToScroll: 3   // Number of slides to scroll per click
});

Upvotes: 0

ndurante
ndurante

Reputation: 187

I'm not familiar with the slick carousel, but I would suggest removing as many unknowns as possible by creating the slick carousel without any bootstrap or extraneous custom CSS involved. If you find the carousel working as intended without the bootstrap/custom css, then you know some CSS is conflicting with slick. Otherwise, something must be wrong with your slick setup.

I'm sure you've looked through all the configuration options slick has... http://kenwheeler.github.io/slick/

Also, it seems like slick has some great uses, but I've had a lot of success using the bootstrap carousel. Might be worth a try if slick doesn't work out. http://getbootstrap.com/javascript/#carousel

Upvotes: 0

Related Questions