Bitbucket is a code hosting site with unlimited public and private repositories. We're also free for small teams!

Close

JQuery Infinite Drag Carousel

Overview

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

Features

  • 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.

Dependencies

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.

License

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.

HTML

<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">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</div>
<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... 
-->

CSS

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

Javascript

// 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() {
  $('#simpleNext').click();
}

Or if you want to implement autoscrolling:

//The auto-scrolling function
function slide(){
  $('#simpleNext').click();
}

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

//On user click deactivate auto-scrolling
$('#previous, #simpleNext').click(
function(event){
    if(event.originalEvent){
        window.clearInterval(intervalId);
    }
 }
);

Recent activity

Tip: Filter by directory path e.g. /media app.js to search for public/media/app.js.
Tip: Use camelCasing e.g. ProjME to search for ProjectModifiedEvent.java.
Tip: Filter by extension type e.g. /repo .js to search for all .js files in the /repo directory.
Tip: Separate your search with spaces e.g. /ssh pom.xml to search for src/ssh/pom.xml.
Tip: Use ↑ and ↓ arrow keys to navigate and return to view the file.
Tip: You can also navigate files with Ctrl+j (next) and Ctrl+k (previous) and view the file with Ctrl+o.
Tip: You can also navigate files with Alt+j (next) and Alt+k (previous) and view the file with Alt+o.