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.

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:


<code class="xml plain"><</code><code class="xml keyword">div</code> <code class="xml color1">class</code><code class="xml plain">=</code><code class="xml string">"cr-container"</code> <code class="xml color1">id</code><code class="xml plain">=</code><code class="xml string">"cr-container"</code><code class="xml plain">></code>
<code class="xml spaces"> </code><code class="xml plain"><</code><code class="xml keyword">div</code> <code class="xml color1">class</code><code class="xml plain">=</code><code class="xml string">"cr-content-wrapper"</code> <code class="xml color1">id</code><code class="xml plain">=</code><code class="xml string">"cr-content-wrapper"</code><code class="xml plain">></code>
<code class="xml spaces"> </code><code class="xml plain"><</code><code class="xml keyword">div</code> <code class="xml color1">class</code><code class="xml plain">=</code><code class="xml string">"cr-content-container"</code> <code class="xml color1">id</code><code class="xml plain">=</code><code class="xml string">"content-1"</code> <code class="xml color1">style</code><code class="xml plain">=</code><code class="xml string">"display:block;"</code><code class="xml plain">></code>
<code class="xml spaces"> </code><code class="xml plain"><</code><code class="xml keyword">img</code> <code class="xml color1">src</code><code class="xml plain">=</code><code class="xml string">"images/1.jpg"</code><code class="xml color1">class</code><code class="xml plain">=</code><code class="xml string">"cr-img"</code><code class="xml plain">/></code>
<code class="xml spaces"> </code><code class="xml plain"><</code><code class="xml keyword">div</code> <code class="xml color1">class</code><code class="xml plain">=</code><code class="xml string">"cr-content"</code><code class="xml plain">></code>
<code class="xml spaces"> </code><code class="xml plain"><</code><code class="xml keyword">div</code> <code class="xml color1">class</code><code class="xml plain">=</code><code class="xml string">"cr-content-headline"</code><code class="xml plain">></code>
<code class="xml spaces"> </code><code class="xml plain"><</code><code class="xml keyword">h2</code><code class="xml plain">>The slide title<!--<code class="xml keyword">h2</code><code class="xml plain">></code></code>
<code class="xml plain">
<code class="xml spaces"> </code><code class="xml plain"><</code><code class="xml keyword">h3</code><code class="xml plain">></code>
<code class="xml spaces"> </code><code class="xml plain"><</code><code class="xml keyword">span</code><code class="xml plain">>Some sub-title<!--<code class="xml keyword">span</code><code class="xml plain">> </code></code>
<code class="xml plain">
<code class="xml spaces"> </code><code class="xml plain"><</code><code class="xml keyword">a</code> <code class="xml color1">href</code><code class="xml plain">=</code><code class="xml string">"#"</code> <code class="xml color1">class</code><code class="xml plain">=</code><code class="xml string">"cr-more-link"</code><code class="xml plain">> read more →<!--<code class="xml keyword">a</code><code class="xml plain">></code></code>
<code class="xml plain">
<code class="xml spaces"> </code><code class="xml plain"><!--<code class="xml keyword">h3</code><code class="xml plain">></code></code>
<code class="xml plain">
<code class="xml spaces"> </code><code class="xml plain"><!--<code class="xml keyword">div</code><code class="xml plain">></code></code>
<code class="xml plain">
<code class="xml spaces"> </code><code class="xml plain"><</code><code class="xml keyword">div</code> <code class="xml color1">class</code><code class="xml plain">=</code><code class="xml string">"cr-content-text"</code><code class="xml plain">></code>
<code class="xml spaces"> </code><code class="xml plain"><</code><code class="xml keyword">p</code><code class="xml plain">>Some text here...<!--<code class="xml keyword">p</code><code class="xml plain">></code></code>
<code class="xml plain">
<code class="xml spaces"> </code><code class="xml plain"><!--<code class="xml keyword">div</code><code class="xml plain">></code></code>
<code class="xml plain">
<code class="xml spaces"> </code><code class="xml plain"><!--<code class="xml keyword">div</code><code class="xml plain">></code></code>
<code class="xml plain">
<code class="xml spaces"> </code><code class="xml plain"><!--<code class="xml keyword">div</code><code class="xml plain">></code></code>
<code class="xml plain">
<code class="xml spaces"> </code><code class="xml plain"><</code><code class="xml keyword">div</code> <code class="xml color1">class</code><code class="xml plain">=</code><code class="xml string">"cr-content-container"</code> <code class="xml color1">id</code><code class="xml plain">=</code><code class="xml string">"content-2"</code><code class="xml plain">></code>
<code class="xml spaces"> </code><code class="xml plain">...</code>
<code class="xml spaces"> </code><code class="xml plain"><!--<code class="xml keyword">div</code><code class="xml plain">></code></code>
<code class="xml plain">
<code class="xml spaces"> </code><code class="xml plain">...</code>
<code class="xml spaces"> </code><code class="xml plain"><!--<code class="xml keyword">div</code><code class="xml plain">></code></code>
<code class="xml plain">
<code class="xml spaces"> </code><code class="xml plain"><</code><code class="xml keyword">div</code> <code class="xml color1">class</code><code class="xml plain">=</code><code class="xml string">"cr-thumbs"</code><code class="xml plain">></code>
<code class="xml spaces"> </code><code class="xml plain"><</code><code class="xml keyword">div</code> <code class="xml color1">data-content</code><code class="xml plain">=</code><code class="xml string">"content-1"</code> <code class="xml color1">class</code><code class="xml plain">=</code><code class="xml string">"cr-selected"</code><code class="xml plain">></code>
<code class="xml spaces"> </code><code class="xml plain"><</code><code class="xml keyword">img</code> <code class="xml color1">src</code><code class="xml plain">=</code><code class="xml string">"images/thumbs/1.jpg"</code><code class="xml plain">/></code>
<code class="xml spaces"> </code><code class="xml plain"><</code><code class="xml keyword">h4</code><code class="xml plain">>The slide title<!--<code class="xml keyword">h4</code><code class="xml plain">></code></code>
<code class="xml plain">
<code class="xml spaces"> </code><code class="xml plain"><!--<code class="xml keyword">div</code><code class="xml plain">></code></code>
<code class="xml plain">
<code class="xml spaces"> </code><code class="xml plain"><</code><code class="xml keyword">div</code> <code class="xml color1">data-content</code><code class="xml plain">=</code><code class="xml string">"content-2"</code><code class="xml plain">></code>
<code class="xml spaces"> </code><code class="xml plain"><</code><code class="xml keyword">img</code> <code class="xml color1">src</code><code class="xml plain">=</code><code class="xml string">"images/thumbs/2.jpg"</code><code class="xml plain">/></code>
<code class="xml spaces"> </code><code class="xml plain"><</code><code class="xml keyword">h4</code><code class="xml plain">>Another slide title<!--<code class="xml keyword">h4</code><code class="xml plain">></code></code>
<code class="xml plain">
<code class="xml spaces"> </code><code class="xml plain"><!--<code class="xml keyword">div</code><code class="xml plain">></code></code>
<code class="xml plain">
<code class="xml spaces"> </code><code class="xml plain">...</code>
<code class="xml spaces"> </code><code class="xml plain"><!--<code class="xml keyword">div</code><code class="xml plain">></code></code>
<code class="xml plain">
<code class="xml plain"><!--<code class="xml keyword">div</code><code class="xml plain">></code></code>
<code class="xml plain">

The default options are the following:


<code class="js plain">$(</code><code class="js string">'#cr-container'</code><code class="js plain">).crotator({</code>
<code class="js spaces"> </code><code class="js comments">// slideshow on</code>
<code class="js spaces"> </code><code class="js plain">autoplay            : </code><code class="js keyword">false</code><code class="js plain">,</code>
<code class="js spaces"> </code><code class="js comments">// slideshow interval</code>
<code class="js spaces"> </code><code class="js plain">slideshow_interval  : 3000,</code>
<code class="js spaces"> </code><code class="js comments">// if true the thumbs will be shown initially</code>
<code class="js spaces"> </code><code class="js plain">openThumbs          : </code><code class="js keyword">true</code><code class="js plain">,</code>
<code class="js spaces"> </code><code class="js comments">// speed that the thumbs are shown / hidden</code>
<code class="js spaces"> </code><code class="js plain">toggleThumbsSpeed   : 300</code>
<code class="js plain">});</code>

We hope you like this little content rotator and find it useful!

Download:tympanus.net/Development/ContentRotator/ContentRotator.zip

If you cant Download or have any Suggestions please Contact us

Newer news items:

Older news items:

<< Previous pageNext page >>

Recommended Web Hosting For Bloggers and Designers

I recoomended Webhostings for Bloggers and Designers because I am freelancer, working with thousand clients in the worlds. Most of them will use those hosts.