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

From our monthly sponsor: Take WordPress to a whole new level with Divi's incredibly advanced visual builder technology. Try it for free.

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:

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!

Tagged with:

ML is a freelance web designer and developer with a passion for interaction design. She studied Cognitive Science and Computational Logic and has a weakness for the smell of freshly ground peppercorns.

http://www.codrops.com

Receive our bi-weekly Collective or official newsletter right in your inbox.

CSS Reference

Learn about all important CSS properties from the basics with our extensive and easy-to-read CSS Reference.

It doesn't matter if you are a beginner or intermediate, start learning CSS now.

Feedback 39

Comments are closed.
  1. Wow… this one is great. Also the images btw… and you’re soooo fast with your useful drops of code

  2. Great tutorial.

    Did anyone else find that the back/forward buttons not working in the demo? (Firefox 5)

    • Thanks all for the great feedback! @Sue, works fine over here ๐Ÿ™‚
      Cheers,
      ML

  3. Works fine too on my firefox 5 !
    Great content rotator ! It looks like some flash stuff without flash !!

  4. Awesome slider ๐Ÿ™‚

    The only issue I’m having is when setting the options to true for autoplay and hiding the thumbs on load, for some reason this stops the slider from functioning.
    Is anyone else having this issue?

    • @Martin That was indeed a bug ๐Ÿ™‚ I have updated the zip file with the fix. Thanks!

  5. Hi thanks for posting up another really simple tutorial, this content slider looks great and functions beautifully. The show and hide function is a nice addition to the slider, thanks for sharing, keep up the good work!