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.


View demo Download source

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!

View demo Download source

Previous:
Next:

Tagged with:

Mary Lou (Manoela Ilic) 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.

View all contributions by

Website: http://tympanus.net/

Related Articles

Feedback 39

Comments are closed.
  1. 7

    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.

  2. 11

    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.

  3. 12

    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?

  4. 13

    Hi!
    This is a very cool content rotator :D

    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.

  5. 14

    (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 ;)

  6. 15

    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!

    • 16

      Sorry Angel, my bad, I meant “jquery.crotator.js”
      I accidentally copied the name “jquery.accordion.js” since I was working in another jquery :P

      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 );"

  7. 17

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

    de 575px al tamaño que necesites..

Comments are closed.