Strict Standards: Redefining already defined constructor for class Object in /home/richards/public_html/cake/libs/object.php on line 54

Strict Standards: Non-static method Configure::getInstance() should not be called statically in /home/richards/public_html/cake/bootstrap.php on line 38
jQuery - carousel plugin - Richard Scarrott: Frontend Web Developer

jQuery - carousel plugin

jQuery - carousel plugin image

I've recently been working on a jQuery carousel script and I've finally found the time to package it up as a plugin for your consumption. It's been used on a number of live projects so it's battle tested and will run in all major browsers including IE6.

UPDATE 09/03/2011: This plugin has now been rewritten using jQuery UI's Widget Factory with a few extra features including autoScroll - https://github.com/richardscarrott/jquery-ui-carousel

I'm aware there are ton's of carousel's already out there but many I've seen either require non-semantic mark-up, are unresponsive resulting in poor usability or have unnecessarily large file sizes, so hopefully I've managed to quash these concerns with this carousel.

You can check out the demo here to see if it's what you're after, download it here then continue reading below for its usage.

This is the basic HTML structure required:

<div id="my-carousel">
	<ul>
		<li>
			<!-- item 1 content -->
		</li>
		<li>
			<!-- item 2 content -->
		</li>
		<li>
			<!-- item 3 content -->
		</li>
		<li>
			<!-- item 4 content -->
		</li>
		<li>
			<!-- item 5 content etc. -->
		</li>
	</ul>
</div>

Here's some CSS to get you going (I've flagged which declarations are required):

#my-carousel ul {
	position:absolute; /* required */
	overflow:hidden; /* required */
	margin:0;
	padding:0;
	list-style:none;
}

#my-carousel ul li {
	float:left; /* required */
	width:100px;
	height:200px;
	margin:0 10px 0 0;
}

#my-carousel .mask {
	position:relative; /* required */
	overflow:hidden; /* required */
	width:540px; /* required */
}

#my-carousel .pagination-links {
	list-style:none;
	margin:0;
	padding:0;
}

#my-carousel .pagination-links li {
	display:inline;
}

#my-carousel .pagination-links li.current {
	background:grey;
}

#my-carousel .disabled {
	color:grey;
}

And here's the JavaScript:

$(document).ready(function() {
	$('#my-carousel').carousel();
});

You can pass in any number of options from the following defaults:

{
	itemsPerPage: 1, // number of items to show on each page
	itemsPerTransition: 1, // number of items moved with each transition
	noOfRows: 1, // number of rows (see demo)
	nextPrevLinks: true, // whether next and prev links will be included
	pagination: true, // whether pagination links will be included
	speed: 'normal', // animation speed
	easing: 'swing' // supports the jQuery easing plugin
}

The plugin supports multiple carousels on a single page and maintains jQuery’s chainability so usage should feel pretty familiar but if you do become stuck see the demo or leave me a message.

Advanced usage

In general I prefer to steer away from jQuery’s plugin pattern for ‘widget’ functionality such as this carousel as it doesn’t easily offer state or extensibility/inheritance. It can be much more flexible to use object literals or if information hiding is important the module design pattern.

Saying this, to stay consistent with jQuery’s API, I’ve wrapped the main carousel object within a plugin to help those less familiar with JavaScript should they want to use it.

With this in mind however, I’ve taken a leaf from Alex Sexton’s plugin pattern by utilising jQuery’s element.data() store to offer access to the carousels methods like so:

var myCarousel = $('#my-carousel');
myCarousel.carousel();
myCarousel.data('carousel').methodName(); // calls 'methodName'

I recognise this is a little ugly but it’s there if, for example, you ever needed to access nextItem() or prevItem() without actually firing an event.

If you wanted to extend and interact with the object to a higher degree then I’d recommend extracting the 'Carousel' object from the plugin and using it separately calling the init() method manually. This would offer more flexibility and allow you to properly extend its functionality using Object.create etc.

Comments

Feel free to use basic HTML to format your comment.

  • 92

    Umar says:

    21.01.2011

    This plugin is by the far the simplest and at the same time comprehensive plugin ive used. Beats jCarousel by a mile. Thank you

  • 97

    Edson says:

    02.02.2011

    I agree with Umar, no doubt. But Is there a command line to make it autoscroll? Sorry, I'm not a programmer.

  • 98

    Richard Scarrott says:

    03.02.2011

    @Umar - glad you like it :)

    @Edson - I have extended it in the past so it auto scrolls however this isn't a built in option, when I find some time I'll make an update.

  • 100

    wiktor says:

    03.02.2011

    hey, good work, is there any option to have autoplay function?

  • 111

    Anders says:

    29.03.2011

    By far the best i've found so far. Thanks alot for sharing this. I'm really new with coding,  any suggestions on how to make the next/prev into arrows displayed at the sides of the slides? Like many other sliders does?I'm using a couple of differently styled carousels on my site, been trying to replace them all with this one, since its just so much better. Can't figure out to replace the pagination links with thumbs though, so any hints/suggestions on that is much appreciated as well. Thanks again for sharing this. Great work.

  • 114

    JC says:

    20.04.2011

    Hi, any chance this plugin will include an option for infinite looping (sliding in the same direction back to the first page), rather than sliding back to the first page?

  • 116

    Leandro says:

    21.04.2011

    Its possible put some description text in li image?thx.

  • 119

    meldedme says:

    16.05.2011

    Reliable, fast, easy to use.  Recommend. 

  • 130

    Anne says:

    16.06.2011

    Multiple Rows Carosel:Is it possible to have the first set of images be #1-6 and the second set 6-12?

  • 131

    Anne says:

    16.06.2011

    Mulitple Row Carousel:Is it possible to have the first set of images be 1-6 and the second set to be 7-12? Seems more logical and would really help my current project.

  • 138

    Shinya says:

    18.06.2011

    Great job! Thank you!

  • 140

    bob says:

    23.06.2011

    thanks for this plugin, really nice. is there a way to load content upon clicking the next button? I use this to load 6 youtube videos in 1 page, so pre-loading all videos at once slows down the page / even browser usethanks

  • 144

    Richard Scarrott says:

    01.07.2011

    @bob - This Carousel doesn't easily support adding content after init, however it's been rewritten using jQuery UIs Widget Factory which would allow you to append new items on the 'beforeAnimate' event then call .refresh() to update the internals.

  • 161

    crab says:

    25.07.2011

    I suggest embedding all required styles into the plugin and add an "width" attribute.  That will make the plugin more ready to plug-and-use.Besides, there is a bug.  The plugin goes through all UL elements, but it should only look for the first UL.  Otherwise, there will be problem when the page has nested-UL.

  • 163

    Maria says:

    26.07.2011

    Thanx for good plugin! But i have some problem with it. My li elements have no height, cause my content can be any height. So, it works properly in firefox, ies, but not working in safari. In safari my content is hidden. Please, help me with this problem.

  • 165

    Richard Scarrott says:

    28.07.2011

    @crab - Whilst you're right, it would be easier to 'plug and use' if I were to add all styles with JavaScript it wouldn't be something I'd ever do.

    I tend to write widgets / plugins to be useful in my day to day work so I want to ensure I'm following best practices and not necessarily trying to cater for people who don't know JavaScript.

    On that note, whilst there are exceptions to this rule, it's generally bad practice to apply style properties with JavaScript, even using something like jQuery.show() .hide() isn't ideal; adding a class makes things much more flexible and ensures the specific use case can define the styles that should be applied in that situation.

    The nested UL bug has been fixed in the latest re-write however.

  • 166

    Richard Scarrott says:

    28.07.2011

    @Maria - The height is dynamically set based on the natural height of the UL, perhaps you can post a link to an example of this bug in the issue tracker so I can investigate further. Thanks.

  • 178

    Anders Hansen says:

    14.08.2011

    Thanks alot for this awesome plugin. Beats everything else i've tried.We've used it on our site, and it looks great. Have a look, site is at CoverMe.dk - Design laptop Covers

  • 186

    Ross says:

    23.08.2011

    This doesn't work in Firefox 6.

  • 187

    Xavier says:

    25.08.2011

    Hi, I am using the new version with ui widget factory and I am trying to implement insertNextAction.It works because next button is added in correct place(div#prevnext) , however nothing happens when I click it.My function looks like this - am I am missing something ?nextPrevActions: true, insertNextAction:function(){$('Next').appendTo('div#prevnext');    },*if I delete insertNextAction - prev and next buttons worksthanks

  • 193

    Simon says:

    16.09.2011

    Hi there.Really nice plugin, one of my friends use it alot. Have tried to use it on SpotON Marketing but problems keeps showing up. Can it be because im using lightbox script?

  • 194

    Ulrik M says:

    18.09.2011

    I quit using jQuery though and thus had to stop using your plugin, but still owe you a thanks :) Could you consider making a non-jquery version? I really need it for my webshop :)

  • 196

    Richard Scarrott says:

    21.09.2011

    @Xavier - the element is already created and is set to the context (this) of the insertNextAction function. So this === <a href="#">Next</a>

    So you'd want something like this:

    function () {
        $(this).appendTo('div#prevnext');
    }
  • 197

    Richard Scarrott says:

    21.09.2011

    @Simon - There's no reason a lightbox plugin should conflict with the carousel, it's hard to say why you might be having issues but if you have a link I can look into it.

  • 198

    Richard Scarrott says:

    21.09.2011

    @Ulrik M - I don't have any plans to rewrite without using jQuery as I feel all sites need a DOM library to normalize browsers and you can't go far wrong with jQuery. If you take a look through the code it would be pretty simple to do however.

  • 200

    Lachlan says:

    27.09.2011

    Great Carousel.I'm trying to use your new version with autoScroll. However, when I replace your complex demo script with what is provided in the docs it doesn't work. I'm not getting any animation, and it's not detecting the width. However setting pagination, etc, does produce pagination buttons, but they don;t do anything.Is it possible to get some basic instructions to use the new version without the fancy demo script that interacts with the form fields?Many thx,Lachlan

  • 201

    Lachlan says:

    28.09.2011

    In case it helps I've put up my test here:http://mackinven.com/carousel/demo.htmlI've possibly done something stupid and noobish. And I understand if you are too busy to look at it.I tried itemsPerPage: 5, with and without quotes around the number. The pagination seems to show the correct 3 pages of 5 results when I set this without quotes, though the documentation seems to indicate I should use quotes. Neither seem to give me an animating carousel.Cheers

  • 203

    Tom says:

    02.10.2011

    "noOfRows" doesn't behave as I expected; it doesn't respect the order of the list. In your demo, under "Multiple Rows Carousel", it shows [123-789] instead of [123-456].How can this be fixed?

  • 204

    Cristian says:

    05.10.2011

    I Need move to first page, when is in page 2, when I'll press a button, how can I do?

  • 205

    Richard Scarrott says:

    06.10.2011

    @Tom - Unfortunately it's not possible to change the order, it would be over complicated to achieve and in all honesty I feel multiple rows is a bit of an edge case anyway.

    This is why I've removed the 'noOfRows' option from the rewrite. With this rewrite you could still achieve multiple rows by simply creating two Carousels and syncing them up - that way you could also get the ordering you're after.

  • 206

    Isaac says:

    12.10.2011

    I'm looking to implement a paged scroller that pulls server data in more palatable chunks (the full list is huge). It's pretty straightforward to strip off the current carousel, add items, and reinitialize a new scroller with the same list, but the new scroller starts at the beginning--is there an option to specify which element/page to start on? Alternatively, could I ask the scroller to "incorporate new items"? The same options would apply, but there would be new list elements (and possibly old elements removed).

  • 207

    Richard Scarrott says:

    13.10.2011

    @Isaac - you'd definitely be better off with the rewrite. It offers 'add', 'remove' and 'refresh' methods, a 'startAt' option as well as various callback events within which you can add new items at the appropriate time.

  • 208

    sendel says:

    17.10.2011

    it's a great plugin! thx

  • 209

    Paul says:

    19.10.2011

    Hi Rich, nice work - but is there a way to use it without a fixed height? What I'm after is a simple version like demo 1, but with images that have common widths & any possible heights. The carousel will then automatically adjust it's height to fit the current image when using the controls.Cheers

  • 210

    Lucio says:

    19.10.2011

    Hi, is there a way to "Paginate vertically" ??I mean: if I have 9 items the plugin puts them in the order1-2-34-5-67-8-9How can I put them in a1-4-72-5-83-6-9 order ???thanks in advancelucio

  • 211

    Richard Scarrott says:

    19.10.2011

    @Paul - If you set the .runner el to position: relative instead of absolute the height won't have to be explicitly declared so that should work for you. If you're using latest carousel you might want to take a look at the core functional CSS as a basis because the current CSS needs refactoring.

  • 212

    Matt Wilde says:

    20.10.2011

    Hey Richard, nice little carousel! Really simple.Is there a way to style the "Next" and "Prev" links? The css only appears to style the pagination.ThanksMatt

  • 213

    Paul says:

    20.10.2011

    Hey Rich,Thanks for that, I started using the newer version and now the carousel height adjusts automatically, but is there a way to resize the height based on each slide? IE if every image has a different height, the controls below (and rest of the page) will shift up/down and not leave the excess space?Not sure if that makes sense!

  • 214

    Richard Scarrott says:

    21.10.2011

    @Matt Wilde - you can style the next and prev links however you like, it's just standard HTML and CSS (hint: .prev & .next)

  • 230

    foreigner says:

    13.11.2011

    It's compact and neat - genuinely commendable.In addition to being horizontal, is there any option to allow wit to be vertical? I have seen the "jQuery UI Carousel plugin with touch extension" demo, which is similar to my target, but it appears to be hardcoded for up to 4 visible items only.

  • 231

    Richard Scarrott says:

    13.11.2011

    @foreigner jQuery RS carousel - It supports multiple items (try resizing your browser on the demo) and offers vertical or horizontal orientations.

  • 235

    foreigner says:

    17.11.2011

    Thanks for the update! Just tried its functionality on iPad and Android browsers with no issue. I am impressed.BTW, is there any option to enable it to be operated by touch as well?

  • 236

    Dan says:

    18.11.2011

    Please advise if there is any example which illustrates how touch can be enabled in the latest jquery-ui-carousel. The bundled example does not seem to touch actions despite the inclusion of jquery.rs.carousel-touch.js.Keep up the good work. Much appreciated.

  • 237

    Christoffer says:

    22.11.2011

    Hi Richard!First of all, great plugin. I'm unfortunately unable to use the new one due to limitations in that project. It seems like my code is bugging up somewhere, the page indicator of the carousel starts far right and then goes to the left. The same goes for the animation of the carousel content, it goes the 'opposite' way. Is there a simple way to change this? Thanks!

  • 238

    Wing says:

    25.11.2011

    There is no multiple rows support in RS Carousel. Of course I can add another carousel, but I rather have one carousel. Will this feature be (re)added?

  • 240

    Michael says:

    29.11.2011

    Brilliant plugin!!!However, I wonder if I can...- change the numeric navigation to graphics (disc shapes)- add a caption for each list item.Is this possible?Thank you

  • 242

    Eneko says:

    10.12.2011

    Is possible to use images to "prev" and "next" controls?

  • 245

    Richard Scarrott says:

    17.12.2011

    @Michael & @Eneko - You can do whatever you want with the next, prev and pagination controls, you just need to write some CSS.

    @Michael - The carousel items can contain any mark-up you like so you can just add the caption inside the li. If you're using the newer version written on top of the widget factory you could also use the beforeAnimate and afterAnimate callbacks to fade or slide it in etc.

  • 313

    Katy says:

    13.01.2012

    Thank you so much for this code, it's great and I especially love the way it hides the prev and next links if there are less than the 'itemsPerPage' parameter, very classy. I've got this working fine (on a Wordpress site) but I want it to be a continuous loop, so I've added the jquery.rs.carousel-continuous file, linked to it, my calling of the fuction looks like this:   jQuery(document).ready(function() {    jQuery('.slideshow').carousel({    itemsPerPage: 3,    pagination: false,    continuous: true    });}); and the continuous part just isn't working. Can anyone please suggest something. The error in Chrome is: Uncaught TypeError: Cannot read property 'carousel' of undefined On line 20 of the continuous.js which is:  var _super = $.rs.carousel.prototype;And in Firefox it's: error: $.rs is undefined on the same line. I'm not very good at javascript so any help would be massively appreciated. 

  • 315

    Richard Scarrott says:

    14.01.2012

    @Katy - looks to me like you're loading the scripts in the wrong order, you need to ensure you have jquery.js, jquery.rs.carousel.js then jquery.rs.carousel-continuous.js in that order. If that's not the issue then post a link and I can take a look.

  • 325

    Sagar says:

    17.01.2012

    I have total 30 item and 3 rows every page shows 15 items at a time. My problem is the plugin not showing me 1 to 15 in 1st page, it shows like [1 2 4 5, 11 12 13 14 15, 21 22 23 24 25] and I need [1 2 3 4 5, 6 7 8 9 10, 11 12 13 14 15]. Please help me for this.

  • 353

    Katy says:

    27.01.2012

    Hi Richard - thank you for replying. The actual problem was that I was including this version (jQuery Carousel Plugin v1.0) of the main script but trying to use the extras which require the jquery.rs.carousel.js v0.8.6 version - at least that seemed to fix it. 

  • 354

    Katy says:

    27.01.2012

    I'm using this again on a different site (thank you :)) and I want to use custom terms for the pagination - essentially a nav menu that moves between the slides Is that possible?

  • 369

    Bill says:

    02.02.2012

    Man alive!  I've been googling my face off trying to finds out how to put together a simple, basic thumbnail menu....and here it is!!Couple this with slimbox, and the world is my oyster.Dude, you just brought my blood pressure back down to normal.I can't thank you enough for building something so truly easy to use and so totally effective.

  • 379

    Andrew Brandwood says:

    07.02.2012

    I found this a really simple and lightweight solution for what I needed (which was a quick carousel with paging).  I did however, like a few others here need autoscroll to be a feature.  I've quickly added the feature and uploaded it here. Carousel with autoscroll

    To activate just use

    $('#my-carousel').carousel({auto:true});
    to alter the wait time use
    $('#my-carousel').carousel({auto:true, waitTime:5000});

    Hope this helps people out

  • 380

    Richard Scarrott says:

    08.02.2012

    @Katy - I'd suggest, within the create callback, either manually updating the pagination text value to the custom terms you're after or forgetting the default pagination and creating your own. The 'pages' array can be retrieved within the create callback using $(this).carousel('getPages') which you could then iterate over and spit out however you like or you could bind events to a hardcoded nav and use the $(this).carousel('goToPage', page, [animate]) method, you would likely then have to update the UI manually using the before or after callbacks but this offers the most flexibility.

    @Andrew Brandwood - Glad to see the carousel is of use to you. The rewrite  (jQuery RS Carousel) includes an autoscroll extension which also handles things like disabling the scroll when hovering over the UI etc. but your adjustments to the old carousel might suit people better if they don't require the more extensive API of the rewrite.

  • 395

    ben says:

    10.02.2012

    this plugin is amazing, the only thing that is missing is mousewheel support!

  • 410

    Paul Cobb says:

    14.02.2012

    I am attempting to use your updated jquery-ui-carousel code for a vertical slider -(that's what attracting me in the first place)  I have a test page on my delevopment server that I am working on but I can not get the slider to run.  Do you have a a simple demo page that shows all of the right code in the right place?  I'm struggling trying to use use your demo page and stripping out all of the form elements unsuccesfully. Many thanks,  Paul

  • 430

    Dhirendra Kumar says:

    21.02.2012

    Is there any change we can use something like "wrap:'circular' " in this js?

  • 584

    Gavin says:

    09.05.2012

    Does this carousel support a circular carousel? For example, when the last item in the carousel shows, the rest simply add onto it? So I can press next and go through the entire carousel and then pass the first item and continue going forward again.Alternatively, it'd be good to be able to just click the next item to return the the start instead of having to press the previous button.

  • 698

    Rui Silva says:

    22.05.2012

    Hi, this is one of the most interesting plugins I came across till now. I must thank you for it. But since i'm newbie in the js land I'm having some difficulties. I managed to set everything fine but one thing, how to display the pagination links and the nextprev links on the top of the carrousel. Does anyone have a suggestion on how to do it? Thank you 

  • 712

    Anneleen says:

    23.05.2012

    Hi, I'm using your carousel with php, but there's something going wrong. I have 70 elements, but there only 69 showing up. The two last images of the 8th page are also showing up on the 9th page, and the very last image doesn't show in the carousel. You can see it here: www.mllsdemode.be/deezer/deezer.php

  • 965

    Jeffrey says:

    06.06.2012

    Richard- Is there a way to make it timed loop for the li transitions or do I have to change it to the Carousel UI JS?Thanks

  • 1129

    Josh says:

    14.06.2012

    Richard, this is a great plugin...is there a way to make it continuous? Like when a user hits next after the last picture it will display the first picture, and when they first visit the page, is there a way that when they hit previous the last image displays? Thanks, Josh

  • 1553

    Wayne says:

    03.07.2012

    Awesome plugin. I love the simplicity. I was wondering if there is any way to make the transition a fade instead of a slide.

  • 1676

    Rene says:

    16.07.2012

    Love i!QQ: Can you a TIMER to scroll, say, every 5 seconds?Please advise.Thanks!

  • 1770

    Sandeep Rathi says:

    26.07.2012

    Hi Richard,I'm using your latest Jquery Ui Carousel plugin with continuous and autoscroll feature but with the same requirement I want to use noOfRows option which is not supported in your latest code base.Is it possible to use all in one carousel? 

  • 1922

    Carlos Salgado says:

    31.07.2012

    Freaking Genius! awesome and simple!