bootstrap: Tabs als Slideshow

bootstrap: Tabs als Slideshow

Das bootstrap Framework von Twitter ist mittlerweile schon ein Muss, wenn man an Responsive Design denkt. Für einen Kunden habe ich eine Slideshow mit Hilfe der bootstrap Tabs erstellt.

Als erstes brauchen wir das html Gerüst für die Tabs (ich habe hier die Beispiel Tabs von der bootstrap Webseite verwendet):

<div id="slideshow">
    <ul class="nav nav-tabs">
        <li class="active"><a href="#one" data-toggle="tab">Eins</a></li>
        <li><a href="#two" data-toggle="tab">Zwei</a></li>
        <li><a href="#three" data-toggle="tab">Drei</a></li>
        <li><a href="#four" data-toggle="tab">Vier</a></li>
    </ul>
    <div class="tab-content">
        <div id="one" class="tab-pane fade active">Lorem Ipsum, die erste!</div>
        <div id="two" class="tab-pane fade">Lorem Ipsum, die zweite!</div>
        <div id="three" class="tab-pane fade">Lorem Ipsum, die dritte!</div>
        <div id="four" class="tab-pane fade">Lorem Ipsum, die vierte!</div>
    </div>
</div>

Somit hätten wir zumindest schon mal funktionierende Tabs. Übrigens, mit der CSS Klasse fade hübschen wir die Tabs etwas aus, da ein leichter Überblend-Effekt beim Tab Wechsel erfolgt.

Jetzt brauchen wir nur die JavaScript Handler für die automatische Slideshow.

$( document ).ready( function () {
    var slider = setInterval(function() { slide(); }, 5000);

    $( "#slideshow" ).mouseenter( function() {
        clearInterval(slider) 
    });

    $( "#topnews" ).mouseleave( function() {
        slider = setInterval(function() { slide(); }, 5000);
    });

    function slide() {
        var tabs = $('#slideshow.nav-tabs > li'),
            active = tabs.filter('.active'),
            next = active.next('li'),
            toClick = next.length ? next.find('a') : tabs.eq(0).find('a');
        toClick.trigger('click');
    }
});

Dieses jQuery Snippet aktiviert beim Start via setInterval die Funktion slide(). Diese sucht das aktive Tab sowie das nächste und simuliert dann einen Mouseklick auf das nächste Element. Beim Event mouseenter() pausieren wir den slider, in dem wir das Interval löschen (mit clearInterval); somit wird die Slideshow angehalten, wenn man mit dem Mauszeiger auf der Slideshow ist. Verlässt der Mauszeiger die Slideshow wieder, aktivieren wir diese erneut mit dem mouseleave Handler.

Die Zahl bei setInterval ist in Millisekunden angegeben, also in unserem Fall wären es 5 Sekunden.

 

Bitte bewerten Sie meinen Beitrag

Alexander Jungwirth ist Webentwickler bei einem Ingolstädter Verlagshaus und ist Inhaber der Firma Webdesign Manching. Seine Leidenschaft ist HTML, seine Passion PHP, seine Hingabe CSS und seine Inbrunst jQuery. Alexander lebt in Manching mit seiner liebevollen Frau und seinen wunderbaren Kindern.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.