13 February 2012

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.

No comments:

Post a Comment

your thoughts are welcome:

Need more? Leave comments and subscribe to my blog.

.