JQuery Infinite Drag Carousel


A fork/evolved version of http://code.google.com/p/jquery-infinite-carousel/ that allows dragging the elements and works with recent versions of JQuery.

This fork was created specially to allow the horizontal potion mixing on Twisted Potions for Windows 8 http://twistedpotions.com


  • Really easy way to insert a quality HTML carousel on your site
  • Loop infinitely over items when clicking next or previous button
  • Avoid animation flickering due to multi-clicks on next and previous buttons
  • No more endless tapping or tiring gestures in tablets by dragging with your finger.


Inifnite Drag Carousel needs jquery.event.drag. by Three Dub Media to work. You can get a copy from the examples or download them from their site.


Gplv2. It comes from the original project, i'm trying to get in contact with the original author to ask him if i can relicense it as too MIT (or at least LGPL) as i think it fits more the jQuery philosophy. In any case, if i get a negative answer i'll reimplement the remaining stuff from the original with a few improvements i have on mind.

For a more detailed insight check the advanced demo and it's stylesheet.


<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.event.drag-2.2.js"></script>
<script type="text/javascript" src="js/jquery.infinite-drag-carousel.js"></script>
<div id="viewport">
<a id="previous">Previous</a>
<a id="next">Next</a>

ul/li structure can be replaced by any other html structure as div/div, div/span... 


/* Comments on styles purpose in the source code */
    width: 240px;
#viewport ul{
    position: relative;
    padding: 0;
#viewport li{
    width: 100px;
    height: 50px;
    float: left;
    list-style: none;


// If you want the carousel to be dragabble use:
$('#viewport').carousel('#previous', '#next');

// If you just want the classic infinite carousel use:
$('#viewport').carousel('#previous', '#next', false);

Hacking it a bit.

If you want to just to interact via code with the carousel you can do it simulating a click on the next/previous buttons.

function slideLeft() {

Or if you want to implement autoscrolling:

//The auto-scrolling function
function slide(){

//Launch the scroll every 2 seconds
var intervalId = window.setInterval(slide, 2000);

//On user click deactivate auto-scrolling
$('#previous, #simpleNext').click(