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.

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:

Manoela Ilic

Manoela is the main tinkerer at Codrops. With a background in coding and passion for all things design, she creates web experiments and keeps frontend professionals informed about the latest trends.

Stay up to date with the latest web design and development news and relevant updates from Codrops.

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!

  6. That is really good, it is all about the graphics as well. Now I need to find a place to use it in my web design.

  7. Wow. Fantastic slider. Thanks. But can you help me with…in Opera v.11.52 last or first preview picture look strange…in ff, ie, chrome it’s all ok.

  8. Hi there,

    I would also like to know as would others how easy it would be to create a pause effect for this code? Is it possible to have it so that when someone hovers over any part of the rotator it stops cycling through the thumbnails?

  9. Hi!
    This is a very cool content rotator ๐Ÿ˜€

    I’m just having a small problem when editing ๐Ÿ˜
    I changed the width of the content (its a little larger) and I want to add more than 4 thumbs. In this case from 4 to 6.
    How can I add more thumbs? I search every where but coudn’t find the place ๐Ÿ™

    Help plz.
    Tks.

  10. (First, sorry for the double post)

    Its just to say that I finaly found the place here we can edit the numbers of thumbs displayed.
    We have to edit the jquery.accordion.js

    Tks any way.
    This content rotator with jQuery rocks!, tks ๐Ÿ˜‰

  11. Hey joao, you say we have to edit jquery.accordion.js to change the number of thumbs displayed, but that script it not used in the plugin, so I am confused. Can you be more specific about changing the number of thumbs? Thanks!

    • Sorry Angel, my bad, I meant “jquery.crotator.js”
      I accidentally copied the name “jquery.accordion.js” since I was working in another jquery ๐Ÿ˜›

      Open the “jquery.crotator.js” and change the numbers 4 in the parts of the code:
      “set = Math.ceil( (i + 1) / 4 );”
      “top : ( i < 4 && config.thumbsNav ) ? $item.data('top')'"
      "var maxSet = Math.ceil( ( config.totalThumbs ) / 4 );"

  12. Funciona como dice “joao” pero no te olvides modificar en style.css
    .cr-thumbs{
    width:575px; ….

    de 575px al tamaรฑo que necesites..