Problematic image carousel wrap-around

Question

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.

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

I've tried

• turning autoplay setting off or on
• turning infinity setting off or on
• fiddling with the slidesToShow setting, and increasing it can help, but since I have variable width images and a responsive design, this setting will show only a small amount of images on smaller screens
• it in latest Chrome and FF

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;
}

Klipspringer

Please add a JSFiddle so we can check your code – Fiske

Were you able to resolve the issue or did you wind up using the Bootstrap carousel? – Propaedeutic

I left it as-is until it will annoy me enough to fix it or roll my own solution. I can't use the Bootstrap carousel as it doesn't support my use-case nicely. – Klipspringer

Answer 1

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

Propaedeutic

Answer 2

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
});

Giess

Simply using "3" doesn't fix the problem. I've tried combining the quoted settings with mine, with no luck. However removing variableWidth: true did fix the original problem, but now all my images are stretched and ugly. – Klipspringer

Answer 3

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

Loar