Recently while working on a client I ran into a major jQuery crisis: I needed a carousel rotator which had a menu and for each menu item an image and description. Said image could not have dimensional restraints and the description needed to be able to contain HTML if necessary. The menu could not be restricted to a single format (not just list items) and it needed to hold default content to start the rotation. Lastly, it needed to be able to adapt to multiple environments and not be restricted to a single layout or style or require a number to be set as to how many list items would be included.

Solution: mix, mash, and create my own code because all of the scripts I found failed to properly handle the content, were restrictive to a certain styling, or required a specific number to know how many items it was rotating through.

Features

• This script requires very little styling. The example (link below) has only three lines of CSS. This is to demonstrate that it can be applied to whatever and styled however you want.
• Not restrictive to an unordered list (ul) with list elements (li) for the menu. Simple modifications to the code allows for it to accept any element that can be treated as a block (even a div).
• Menu does not have to be positioned in relation to the carousel in any way, shape, or form. Menu can be in the header and carousel can be in the footer.
• Extremely lightweight at only 2Kb in size.
• Tested and works with jQuery 1.4.x+ (work with your older code? let me know in the comments.)

Working Example

You can view a live example of this script without any styling and only basic imagery. (Remember, styling is up to you and your design and any image will fit within the script.)

jQuery Code

/*
* jQuery Carousel Compilation by Ryan Barr
* http://spookyismy.name
* v1.0.0
*/
$(document).ready(function() {

/* Show default content within .carousel-content */
$(".carousel-content").show();
$(".carousel-content .carousel-content-image").animate({ opacity: 0.85 }, 1 );

/* Set the first menu item as active. */
$("#carousel-menu li:first").addClass('selected');

/* If menu item is clicked, switch content properly. */
$("#carousel-menu li.menu-item").click(function(){

var altText = $(this).find('.carousel-content-image img').attr("alt");
var imgSrc = $(this).find('a.carousel').attr("href");
var imgDesc = $(this).find('.info').html();

if ($(this).is(".selected")) {
return false;
} else {
$(".carousel-content").animate({ opacity: 0 }, 250 , function() {
$(".carousel-content-info").html(imgDesc).animate({ opacity: 0.85, marginBottom: "0" }, 400 );
$(".carousel-content-image img").attr({ src: imgSrc , alt: altText }).animate({ opacity: 1 }, 400 );
$(".carousel-content").animate({ opacity: 1 }, 250 );
});
}

$("#carousel-menu li").removeClass('selected');
$(this).addClass('selected');
return false;

});

/* Pause Rotation if Hovering #carousel-menu Item */
carouselNext = false;
$("#carousel-menu li").hover(
function () {
carouselNext = true;
},
function () {
carouselNext = false;
}
);

/* Rotate Carousel, Move from :last to :first if necessary. */
var carouselNextClick = function(){
if(!carouselNext) {

var $nextElement = $(".selected").next("li.menu-item");

if($("li.selected").hasClass("menu-last") ){
$("#carousel-menu li:first").trigger("click");
} else {
$nextElement.trigger("click");
}

}
};

/* Pause between rotations in milliseconds. (3500 is 3.5 seconds) */
setInterval(carouselNextClick, 3500);

});

HTML Code

<ul id="carousel-menu">
    <li class="menu-item"><a class="carousel" href="images/sample1.png">Sample 1</a>
<div class="info">Slug about the first sample.</div></li>
    <li class="menu-item"><a class="carousel" href="images/sample2.png">Sample 2</a>
<div class="info">Slug about the second sample.</div></li>
    <li class="menu-item menu-last"><a class="carousel" href="images/sample3.png">Sample 3</a>
<div class="info">Slug about the third sample.</div></li>
</ul>
<div class="carousel-content">
<div class="carousel-content-image"><img src="images/sample1.png" alt="Sample Image" /></div>
<div class="carousel-content-info">Slug about the first sample.</div>
</div>

CSS Code

#carousel-menu li { cursor: pointer; }
#carousel-menu li.selected { background: #eee; }
.info { display: none; }

User Manual

To make this easy we will break this down into each section: jQuery, HTML, and CSS.

1. jQuery
   • Note: Nothing in the jQuery needs to be edited as long as you use the same classes/ids which are set.
   • Simply, the jQuery animates the default content, applies the first menu item as active, writes the code to swap content when an item is clicked, writes the code to pause when a user is hovering an item, rotates through the items in the menu and shows their content, and then takes a hold or pause time for the rotation at the very bottom.
2. HTML
   • Note: #carousel-menu is the container for the menu items (whether that be a ul with lis, or a div with sub divs) and .carousel-content is the container for the content.
   • #carousel-menu holds .menu-item elements which are to be rotated.
   • The last .menu-item also holds a .menu-last class to tell the jQuery to rotate back to the top.
   • Each .menu-item holds an <a>. This <a>’s href attribute holds the source to the image that will be shown in the rotation. Each <a> must have the .carousel class.
   • Each .menu-item contains a <div> with the .info class. Any data (including more HTML) within this <div> will be shown with the image in the carousel.
   • .carousel-content holds two sub elements, .carousel-content-image and .carousel-content-info.
   • .carousel-content-image holds and <img> tag; its src gets changed when rotated.
   • .carousel-content-info is the equivalent to the .info <div> within the .menu-items.
3. CSS
   • Line 1 of the example makes the user’s cursor change to a pointer finger when hovering a menu item.
   • Line 2 of the example sets the selected menu item’s background to gray.
   • Line 3 of the example hides the .info elements within the menu.
   • You can change, add, modify, remove any and all CSS to fit your needs. I only highly suggest keeping the third line in tact.

Remember

Please remember you must be properly calling both the jQuery library and the JavaScript code above into your document in order for this to function properly. For example:

<script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="js/jquery-carousel.1.0.0.js" type="text/javascript"></script>

Placing the above code between your head tags would cause the JavaScript to load prior to the content on your page. Placing it right before the </body> tag will allow it to load after your content as been loaded.

Questions? Comments? Suggestions? Comments form is below.

About the Author

Ryan Barr is a professional web designer and developer. You can read this original post on his blog.