Geek Answers Handbook

Problem Image Carousel Wrap

The carousel does not turn around beautifully.

If I keep pressing right, the last image to be displayed will be the first. Then I have to click four more times, and at that moment this image will be in the very left corner of the carousel. Images are not displayed on the right side. Then all of a sudden they all appear at once. This happens when the carousel begins.

Picture

I expect the "Transition 2" frame to have "Img # 2" on the right side, etc.

I tried

  • disable autorun or enable
  • infinity inclusion or inclusion
  • messing around with the slidesToShow settings, and zooming can help, but since I have variable-width images and a responsive design, this option only displays a small number of images on smaller screens.
  • he is in the latest versions of Chrome and FF

I am using slick.js 1.5.8 with the following settings:

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

In the following HTML (the smooth carousel is in the 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 added the following

 .slick-slide { height: 100px; margin: 0 15px; }
+6
source share
2 answers

I am not familiar with the carousel, but I would suggest removing as many unknowns as possible by creating a smooth carousel without any loading operations or extraneous custom CSS. If you find that the carousel works as intended without boot / user css, then you know that some CSS contradicts the stain. Otherwise, something should be wrong with your smooth setup.

I'm sure you looked at all the configuration options that have ... http://kenwheeler.imtqy.com/slick/

Also, slick seems to be of great use, but I had great success using the carousel for bootstrapping. It might be worth a try if the stain doesn't work. http://getbootstrap.com/javascript/#carousel

0
source

slick has a slidesToShow parameter, which defaults to 1. You want to change this parameter to "3". Check out the Multiple Elements setting here: http://kenwheeler.imtqy.com/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 });
0
source

More articles:


All Articles