Content Rotator with jQuery

Today we want to share a fancy content rotator with you. It shows some image with a headline and sub-headline in each slide and allows navigating through the slides using the thumbnails that also contain a headline. Hiding the thumbnails will reveal a scrollable text container and the navigation arrows will move up so that one can navigate to the previous or next slides.

The beautiful images are by Andrey & Lili. The images are licensed under the Attribution-NonCommercial 3.0 Unported (CC BY-NC 3.0) License.

We also use the jQuery Mousewheel Plugin by Brandon Aaron and the jScrollPane Plugin by Kevin Luck.

Examples

We have two examples, one with autoplay and one without:

• Example with autoplay
• Example without autoplay

For the HTML structure we will have a main container, the content wrapper and the container for the thumbs. Each cr-content-container needs an ID assigned which we will reference in each thumb with data-content:

<div class="cr-container" id="cr-container">
	<div class="cr-content-wrapper" id="cr-content-wrapper">
		<div class="cr-content-container" id="content-1" style="display:block;">
			<img src="images/1.jpg"class="cr-img"/>
			<div class="cr-content">
				<div class="cr-content-headline">
					<h2>The slide title</h2>
					<h3>
						<span>Some sub-title</span> 
						<a href="#" class="cr-more-link"> read more →</a>
					</h3>
				</div>
				<div class="cr-content-text">
					<p>Some text here...</p>
				</div>
			</div><!-- cr-content -->
		</div><!-- cr-content-container -->
		<div class="cr-content-container" id="content-2">
			...
		</div><!-- cr-content-container -->
		...
	</div><!-- cr-content-wrapper -->
	<div class="cr-thumbs">
		<div data-content="content-1" class="cr-selected">
			<img src="images/thumbs/1.jpg"/>
			<h4>The slide title</h4>
		</div>
		<div data-content="content-2">
			<img src="images/thumbs/2.jpg"/>
			<h4>Another slide title</h4>
		</div>
		...
	</div><!-- cr-thumbs -->
</div><!-- cr-container -->

The default options are the following:

$('#cr-container').crotator({
	// slideshow on
	autoplay 			: false,
	// slideshow interval
	slideshow_interval 	: 3000,
	// if true the thumbs will be shown initially
	openThumbs			: true,
	// speed that the thumbs are shown / hidden
	toggleThumbsSpeed	: 300
});

We hope you like this little content rotator and find it useful!