This is a message.

Slideshow plugin for the tabs

Here you can see a slideshow plugin in action. Click on the arrow buttons, navigator or the content area to navigate through the slides. You can also enable the automatic slideshow by pressing the "play" button below the slides.

prev

First pane

Flying screens

Aenean nec imperdiet ligula. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Suspendisse potenti. Sed elementum risus eleifend massa vestibulum consectetur. Duis massa augue, aliquam eget fringilla vel, aliquam vitae arcu. Nam sed magna mi. Praesent odio neque, dapibus sit amet suscipit at, tempus sed nibh. Aliquam sagittis ligula in ligula faucibus cursus. Quisque vulputate pellentesque facilisis.

Second pane

Flying screens

Consectetur adipiscing elit. Praesent bibendum eros ac nulla. Integer vel lacus ac neque viverra.

Vivamus euismod euismod sagittis. Etiam cursus neque non lectus mattis cursus et a libero. Vivamus condimentum hendrerit metus, a sollicitudin magna vulputate eu. Donec sed tincidunt lectus. Donec tellus lectus, fermentum sit amet porta non, rhoncus ac mi. Quisque placerat auctor justo, a egestas urna tincidunt eleifend.

Third pane

Non lectus lacinia egestas. Nulla hendrerit, felis quis elementum viverra, purus felis egestas magna.

Aenean elit lorem, pretium vitae dictum in, fermentum consequat dolor. Proin consectetur sollicitudin tellus, non elementum turpis pharetra non. Sed quis tellus quam.

next
standalone demo

Note that when the slideshow is "playing" it will automatically pause when you move your mouse on top of the slideshow elements.

HTML coding

The HTML setup is similar to the normal tab setup except that we have the "next" and "prev" action buttons available and the tabs are placed below the panes. 

<!-- "previous slide" button -->
<a class="backward">prev</a>
 
<!-- container for the slides -->
<div class="images">
 
  <!-- first slide -->
  <div>Lorem ipsum ..</div>
 
  <!-- second slide -->
  <div>Lorem ipsum ..</div>
 
  <!-- third slide -->
  <div>Lorem ipsum ..</div>
 
</div>
 
<!-- "next slide" button -->
<a class="forward">next</a>
 
<!-- the tabs -->
<div class="slidetabs">
  <a href="#"></a>
  <a href="#"></a>
  <a href="#"></a>
</div>

HTML

The style comes from the tabs-slideshow.css file.

JavaScript coding

The JavaScript setup is pretty straightforward. The slideshow plugin is chained after the tabs initialization call. A non-zero fadeOutSpeed together with the fade effect creates the "cross-fading" effect. The rotate configuration property makes the slides behave so that when the last tab is encountered the next tab starts over from the beginning. The same thing happens when going backwards from the last tab. 

    $(".slidetabs").tabs(".images > div", {
 
    // enable "cross-fading" effect
    effect: 'fade',
    fadeOutSpeed: "slow",
 
    // start from the beginning after the last tab
    rotate: true
 
    // use the slideshow plugin. It accepts its own configuration
    }).slideshow();

JavaScript

Play/Stop action buttons

Those play and stop action buttons are there to show the automatic slideshow effect. The slideshow plugin will add additional API methods to the main Tabs API and those buttons are calling our new play and stop methods as follows: 

  <button onClick='$(".slidetabs").data("slideshow").play();'>Play</button>
  <button onClick='$(".slidetabs").data("slideshow").stop();'>Stop</button>

HTML