"
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
"
Posted in: 
