Content Rotator with jQuery

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.

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:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34

<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>         </div>         <div class="cr-content-container" id="content-2">             ...         </div>         ...     </div>     <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> </div>

The default options are the following:

1 2 3 4 5 6 7 8 9 10

$('#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