Beanslider ist ein jQuery Plugin, mit dem sich sehr einfach eine Slideshow realisieren lässt. Das Plugin ist "Fully Responsive" und unterstützt mehrere Slide-Effekte. Neben Images kann jeglicher Inhalt (Text, Video, Tabellen etc.) eingebunden werden.
Vorschau
Am folgenden Beispiel können die unten beschriebenen Optionen getestet werden. Eingegebene Änderungen werden sofort in der Vorschau angezeigt. Das vollständige Beispiel findet sich auch im Downloadbereich.
Installation
Der Hauptcontainer ist ein Block-Element mit einer beliebigen Klasse oder ID, z. B.:
<div id="container"> ... </div>
Jeder Inhalt braucht ein Block-Element der Klasse "slide-content", z. B.:
<div class="slide-content"><img src="pic1.jpg" alt="Bild"></div>
Im Script wird die Funktion "easySlide" am Hauptcontainer aufgerufen:
$('#container').easySlide({
});
Optionen
auto: [true | false] ; default: true"true" startet die Slideshow automatisch, bei "false" ist das Sliden nur mit den Kontrollelementen möglich.
transition: [time in ms] ; default: 1000Gibt die Zeit in Millisekunden an, die der Slide-Effekt benötigt.
pause: [time in ms] ; default: 3000Gibt die Zeit in Millisekunden an, die der Slide-Effekt pausiert.
start: [1 - n] ; default: 1Gibt an, mit welchem Container der Klasse "slide-content" gestartet wird.
direction: ['left' | 'right'] ; default: rightLegt die Richtung der Slideshow fest: "right" für aufsteigende Reihenfolge, "left für absteigend".
type: ['slide' | 'overlay' | 'flipX' | 'flipY' | 'transform'] ; default: 'slide'Legt den Slide-Effekt fest. Die verschiedenen Typen können am oberen Beispiel gestestet werden.
background: ['color' | 'image'] ; default: 'white'Legt die Farbe oder das Image hinter dem Content fest. Die Angabe erfolgt mit CSS-Attributen.
numbering: [true | false] ; default: true "true" zeigt die "carousel indicators" an. Bei "false" werden diese ausgeblendet.
numberingSize: [n] ; default: 12 Durchmesser der "carousel indicators" in px.
controls: [true | false | 3] ; default: trueLegt fest, ob die Kontrollelemente angezeigt werden: "true" für anzeigen beim Hover, "false" für ausblenden, "3" für permanent.
aspectRatio: ['n:m' | 'off'] ; default: 'off'Ist "off" gesetzt, muss Breite und Höhe des Hauptcontainers im CSS angegeben werden. Ist ein Seitenverhältnis (z. B. '900:600' oder '4:3' etc.) gesetzt, muss nur die Breite des Containers im CSS angegeben werden. Die Höhe wird dann aus dem Seitenverhältnis berechnet. Für eine responsive Slideshow muss die Größenangabe des Hauptcontainers immer über das Seitenverhältnis eingestellt werden.