In Playground by 39 Comments

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

Fullscreen Video Slideshow with BigVideo.js

Fullscreen Video Slideshow with BigVideo.js

Slider Pagination Concept

Slider Pagination Concept

Responsive 3D Panel Layout

Responsive 3D Panel Layout

Stay connected with us:

Grab the RSS Feed Get email updates Follow us on Twitter Join us on Facebook Add us on Google+
Advertisement

Feedback 39

Comments are closed.
  1. 1

    Great example as usual.

    Any chance of a hover pause facility?

    Cheers,

    Barton.

  4. 4

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

  5. 5

    Great tutorial.

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

    • 6

      Thanks all for the great feedback! @Sue, works fine over here :)
      Cheers,
      ML

  6. 7

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

  16. 17

    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?

    • 18

      @Martin That was indeed a bug :) I have updated the zip file with the fix. Thanks!

  19. 21

    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!

Comments are closed.