Infinite TinyCarousel

Lösung

Das TinyCarousel wurde mittlerweile von Maarten Baijs vollständig überarbeitet und unterstützt diese Features! Bitte verwendet das originale TinyCarousel. Der Vollständigkeit halber findest Du nachfolgend "mein" Infinite TinyCarousel.

Das Infinite TinyCarousel erweitert TinyCarousel 1.8 um eine echte Karussell-Funktion. Außerdem können Pause-/Fortsetzen-Buttons verwendet werden, um die Animation beim automatischen Weiterschalten zu pausieren/fortzusetzen. Daneben sind mehrere Seitennavigationen für das direkte Anspringen eines Blocks erlaubt und die Klasse disable wurde in disabled umbenannt. Auch können Buttons im HTML zunächst mit dem Attribut disabled versehen werden, damit die Buttons bei ausgeschaltetem JavaScript vom Nutzer nicht als funktionstüchtig erachtet werden. Bei eingeschaltetem JavaScript werden diese dann aktiviert.

Demo ansehen

Einbindung

Um das Infinite TinyCarousel zu verwenden, müssen jQuery und jquery.tinycarousel.min.js eingebunden sein.

<script type="text/javascript" language="javascript" src="js/mootools.min.js"></script>     
<script type="text/javascript" language="javascript" src="js/thumbzoomer.min.js"></script>

Für ein Infinite TinyCarousel mit Seitennavigation und allen Funktionsbuttons ist folgendes HTML notwendig. Die Elemente sind dabei auch in anderer Reihenfolge zueinander platzierbar. Die Buttons können auch andere Elemente sein - hier zählt nur die CSS-Klasse.

<div class="carousel">
    <!-- Seitennavigation -->
    <ul class="pager">
        <li><a rel="0" class="pagenum" href="#"><span>Page 1</span></a></li>
        <li><a rel="1" class="pagenum" href="#"><span>Page 2</span></a></li>
        <li><a rel="2" class="pagenum" href="#"><span>Page 3</span></a></li>
        <li><a rel="3" class="pagenum" href="#"><span>Page 4</span></a></li>
        <li><a rel="4" class="pagenum" href="#"><span>Page 5</span></a></li>
    </ul>
    <!-- sichtbarer Inhaltsbereich -->
    <div class="viewport">
        <ul class="overview">
            <!-- Inhalte -->
            <li>Content 1</li>
            <li>Content 2</li>
            <li>Content 3</li>
            <li>Content 4</li>
            <li>Content 5</li>
        </ul>
    </div>
    <!-- Funktionsbuttons -->
    <button class="prev" disabled>&lt; Previous</button>
    <button class="next" disabled>Next &gt;</button>
    <button class="play" style="display: none;" disabled>|> Play</button>
    <button class="pause" disabled>|| Pause</button>
</div>

Für ein horizontal ausgerichtetes Infinite TinyCarousel ist mindestens folgendes CSS Voraussetzung.

.viewport {
    height: 300px; /* Höhe des sichtbaren Bereichs */
    overflow: hidden;
    position: relative;
    width: 400px; /* Breite des sichtbaren Bereichs */
}
 
.overview {
    padding: 0;
    position: absolute;
    overflow: hidden;
}
 
.viewport li {
    display: block;
    float: left;
    height: 300px; /* Höhe des sichtbaren Bereichs */
    width: 400px; /* Breite des sichtbaren Bereichs */
}

Nun muss das Plugin nur noch mit der gewünschten Konfiguration aufgerufen werden. Nachfolgend beispielsweise mit Seitennavigation, automatischer Weiterschaltung, Pause-/Fortsetzen-Funktionalität und echtem Karussell-Effekt.

<script type="text/javascript">
    $(document).ready(function(){
        $('.carousel').tinycarousel({pager: true, interval: true, playpause: true, infinite: true});
    });
</script>

Rudimentäres Demo ansehen
Erweitertes Demo ansehen

Eine ausführliche Dokumentation mit noch mehr Beispielen für das ursprüngliche TinyCarousel gibt es auf http://www.baijs.nl/tinycarousel/.

Konfiguration

Folgende neue Optionen können dem Infinite TinyCarousel als Parameter mitgegeben werden.

Der Vollständigkeit halber hier die übrigen Optionen des originalen TinyCarousels: