Carousel with touch swipe gestures
THE CAROUSEL
After looking around and testing a few carousel libraries I came across jCarousel. jCarousel allows you to have moltiple carousels on one page (which is a massive bonus) and has the flexibility to easily include plugins to extend it further with these defaolt pre built in plugins at your disposal.
Controls - previous & next
Pagination - simple navigation through the slides
Autoscroll - enables the auto scrolling through the carousel
ScrollIntoView - extends the core with additional API
Each of the above plugins have their own API and Events which you can bind to to fire your own events which gives you way more flexibility than many of the other carousels out there.
SWIPING GESTURE LIBRARY
Again there are plenty of swipe libraries out there but only a few really give you everything you need like Skinkers Labs TouchSwipe library. It allows you to target a specified swipe direction or every possible swipe direction (bit to much IMHO, but possible) and returns so much information from each swipe:
event
direction
distance
duration
fingerCount
You can also set thresholds eg. the user needs to swipe for least 100px before the swipe event is fired and its not just for touch devices it also fallback to mousedrag so you can also capture the same events on the desktop.
There is so much more which the library can do and capture but for this demo I wont need to go into them, if you want to know more go and check them out here Skinkers Labs TouchSwipe
GETTING STARTED
First off you'll need to download both the above libraries along with jQuery:
jQuery - I tend to use the the mediatemple CDN as its the offical and fastest around at the moment. (http://code.jquery.com/jquery-latest.min.js) - always returns the latest release version.
jCarousel.js
touchSwipe.js
Once you've got them place them at the bottom of your page as you woold normally do with any js file
<script src="http://http://code.jquery.com/jquery-latest.min.js"></script> <script src="js/jquery.jcarousel.min.js"></script> <script src="js/jquery.touchSwipe.min.js"></script> <script src="js/scripts.js"></script>
Once you done this then you need to setup up your html structure which is easy and can be done in a number of different ways but we're going to keep it simple
HTML:
<div class="jcarousel"> <ol> <li> <img src="http://distilleryimage1.s3.amazonaws.com/521c68b073f311e28d6622000a1fbc43_7.jpg" alt="San Fran rocket"/> </li> <li> <img src="http://distilleryimage9.s3.amazonaws.com/7b5437d673f211e2914022000a9e0903_7.jpg" alt="San Fran building"/> </li> <li> <img src="http://distilleryimage11.s3.amazonaws.com/61b6ae5c73df11e2862522000a1f9c96_7.jpg" alt="San Fran Blue Bottle Coffee"/> </li> </ol> </div>
told you it was simple...
CSS:
Add the following CSS.
.jcarousel { position: relative; overflow: hidden; /* You need at least a height, adjust this to your needs */ height: 612px; width: 612px; } .jcarousel ol { width: 20000em; position: absolute; list-style: none; margin: 0; padding: 0; } .jcarousel li { float: left; width:612px; }
JavaScript:
now in your scripts.js file add the following
$(.jcarousel).jcarousel();
This will initialise the carousel...
So now you have your very simple carousel up an running we'll add the swiping functionality, so when we swipe across an image in the carousel, the slide will will skip to the next or previous slide.
Adding the swiping gesture
To add the swiping functionality we just need to attach the swiping method to the carousel, this is done by doing the following to your js file
var carousel = $('.jcarousel'); carousel.swipe({ swipeLeft: function(event, direction, distance, duration, fingerCount) { carousel.jcarousel('scroll', '+=1'); }, swipeRight: function(event, direction, distance, duration, fingerCount) { carousel.jcarousel('scroll', '-=1'); } });
With the code above we're assigning the swipe method to our carousel and we're detecting the swipeLeft & swipeRight action (you can change this to detect all swiping by removing one of the actions and replacing it with just swipe), once the action (left or right) has been detected we can fire the carousel scroll method in the callback tell the slides to go back or forward
