Carousel with variable item-sizes

Carousel with variable item-sizes


I have implemented a Javascript / jQuery + CSS Carousel which is auto-scroll-able, but also has the possibility to manually scroll the items.

The biggest advantage of this carousel is that you can have items of different size and the carousel is not changing its size.

Here is the how you define the items that will be displayed in the Carousel:

Code:

<li><a href="#"><img src="./img/item5.png"></a></li>
<li><a href="#"><img src="./img/item3.png"></a></li>

To configure the speed of scrolling when auto-scrolling you need to amend this line of code:

Code:

var autoSpeed = 2000;

To configure the speed of scrolling when clicking on left or right button, you need to amend this line of code:

Code:

var clickSpeed = 500;

You can find the sources here: Infinite Carousel with variable item width / item sizes

Please share this page if you like it.

Infinite Carousel Tutorial with variable item width / item sizes

• 
• 
• 
• 
• 

Please share this article.