JavaScript / DHTML

Effektvolle JavaScript Slideshow auf jQuery Basis: Nivo Slider

WordPress Entwickler und Webdesigner

NivoSlider

Beim Nivo Slider handelt es sich um eine umfangreiche Javascript Slideshow auf jQuery Basis. Der Nivo Slider hebt sich vor allem durch seine vielen wundervollen Effekte und Einstellungsmöglichkeiten von der Masse ab. Es gibt insgesamt 16 Übergangseffekte und 3 Vorgefertigte Themes die mit ausgeliefert werden. Von den Einstellungen her gesehen, ist alles vorhanden, was man gerne personalisieren möchte. Eine Demo des Nivo Sliders ist auf dieser Seite zu finden.

Das Script liegt in zwei verschiedenen Varianten vor: Zum einen gibt es die kostenlose jQuery Plugin Version (Open Source) und ein kostenpflichtiges WordPress Plugin (ab 19$). Gerade durch das WordPress Plugin hat der Nivo Slider eine hohe Popularität erreicht.

In diesem Artikel möchte ich euch erklären wie ihr die jQuery Plugin Variante in eure Webseite einbauen könnt.

Anzeige:




Der Vollständigkeit halber möchte ich an dieser Stelle allerdings einen kleinen Screenshot, als Auszug des WordPress Plugins, mit einfügen:

Nivo Slider WordPress

Im Download-Paket des jQuery Plugins sind mehre Ordner und Dateien, dabei sind allerdings nicht alle relevant. Zum einbinden in die eigene Webseite benötigen wir folgende Dateien aus der *.zip Datei:

  • jquery.nivo.slider.pack.js – gepackte Version des JavaScripts
  • nivo-slider.css – CSS main-stylesheets
  • /themes/ – Dieser Ordner enthält die drei Themes

Diese zwei Dateien inklusive dem themes Ordner kopieren wir nun in den Projekt-Ordner bzw. unsere Webseite.

Einbinden des Nivo Sliders

Um den Nivo Slider nun einzubinden müssen wir als erstes die Standard-Dateien mit unserer Webseite verbinden. Bei den Pfaden gehen wir davon aus, dass sich sämtliche Dateien auf der Hauptebene unserer Webseite befinden und nicht in Unterordnern wie /CSS/ oder /JS/.

Folgender Part muss zwischen die <head> * </head> Tags:

<!-- nivo-slider.css - ist die main stylesheet -->
<link rel="stylesheet" href="nivo-slider.css" type="text/css" media="screen" />
<!-- Aktuelle Version des jQuery Frameworks über Google's CDN -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<!-- Die gepackte Hauptdatei des Nivo Sliders -->
<script src="jquery.nivo.slider.pack.js" type="text/javascript"></script>

Neben diesen drei Hauptdateien müssen wir noch die CSS Datei von einem der drei Themes einbinden. In diesem Beispiel arbeiten wir mit dem Default-Theme und müssen entsprechend dazu noch diese Datei mit einbinden:

<link rel="stylesheet" href="themes/default/default.css" type="text/css" media="screen" />

Nun folgt der HTML-Aufbau des Nivo Sliders, dieser sieht mit verlinkten Bildern z.B. wie folgt aus:

<div class="theme-default">
  <div id="slider" class="nivoSlider">
    <a href="#"><img src="bild-1.jpg" alt="Bild 1" title="Nivo Slider Caption - Titel" /></a>
    <a href="#"><img src="bild-2.jpg" alt="Bild 2" title="Nivo Slider Caption - Titel" /></a>
    <a href="#"><img src="bild-3.jpg" alt="Bild 3" title="Nivo Slider Caption - Titel" /></a>
  </div>
</div>

Solltet ihr nicht das Default Theme verwenden, muss die Klasse des ersten Div-Containers mit theme-default entsprechend angepasst werden.

Im letzten Schritt wird nun der Slider gestartet, dies geschieht über die dafür vorgesehene Javascript Funktion nivoSlider(). Diese Funktion wiederum führen wir in einer Standard-jQuery-Funktion aus: $(document).ready(). Die in $(document).ready() ausgeführten Funktionen werden erst dann geladen, wenn der DOM einer Webseite komplett geladen ist.

So würde nun unsere entsprechende Funktion aussehen (wird zwischen <script> * </script> Tags asugeführt):

$(document).ready(function(){
  $('#slider').nivoSlider();
});

Diese kleine Funktion reicht im Prinzip schon um den Nivo Slider zu starten, nun gibt es allerdings noch eine lange Liste von Optionen, die eingestellt werden können, aber nicht müssen:

$(document).ready(function(){
  $('#slider').nivoSlider({
    effect: 'random', // Effekt der Übergänge z.B.: 'fold,fade,sliceDown'
    slices: 15, // Slides der slice* Animationen
    boxCols: 8, // Spalte für Box-Animationen
    boxRows: 4, // Reihe für Box-Animationen
    animSpeed: 500, // Animations-Dauer eines Übbergangs
    pauseTime: 3000, // Pause zwischen dem nächsten Bild 1000 = 1 Sekunde
    startSlide: 0, // Index-Wert des ersten Bilds
    directionNav: true, // Weiter & Zurück Navigation einblenden
    directionNavHide: true, // Weiter & Zurück nur bei hover anzeigen
    controlNav: true, // 1,2,3... Navigation
    keyboardNav: true, // Keyboard Navigation
    pauseOnHover: true, // Animation bei hover unterbrechen
    captionOpacity: 0.8, // Transparenz der Titelleiste
    prevText: 'Prev', // Text des "Zurück" Buttons
    nextText: 'Next', // Text des "Weiter" Buttons
    randomStart: false, // Mit Zufallsbild starten
  });
});

Bei den voreingetragenen Werten oben handelt es sich um die Standards die automatisch verwendet werden, wenn nicht anders angegeben.

Damit sind wird bereits am Ende dieses kleinen Tutorials, so einfach lässt sich der Nivo Slider in eine Webseite integrieren.

Ich wünsche euch viel Spaß damit.

Schlagworte zu diesem Artikel: , , , ,

Veröffentlicht von Pascal Bajorat

Pascal Bajorat ist Mediengestalter und arbeitet als Webdesigner / Webentwickler, Autor und Trainer in Berlin. In den vergangenen Jahren hat er sich vor allem auf das CMS WordPress und die Entwicklung von hochwertigen Webseiten und Sonderlösungen spezialisiert. Er hat den Webdesign-Podcast.de 2010 gegründet.

Webseite:

17 Antworten zu “Effektvolle JavaScript Slideshow auf jQuery Basis: Nivo Slider”

    • Na dann bin ich mal gespannt, habe den Rhinoslider ehrlich gesagt noch nie ausprobiert, für die meisten kleinen Seiten hat meine eigene Slideshow gereicht und wenn es mehr Effekte sein sollten, dann war es bei mir immer der Nivo Slider.

    • Hallo Pascal,
      toller Slider.
      Allerdings habe ich die Größe der Bilder auf 640 x 480 geändert, was auch funktioniert.
      Aber wie bekomme ich die Steuerung vor – zurück – pause unter den Slider?
      Danke

    • Hallo Frank,
      dumme Fragen gibt es nicht und ja du kannst, da gibt es zwei Möglichkeiten:
      Nr. 1: Du kaufst das WordPress Plugin für 19$, damit lässt sich das ganze am einfachsten machen und vor allem auch über WordPress verwalten.
      Nr. 2: Du programmierst die Slideshow so wie oben gezeigt in dein Theme, musst dann halt die Pfade mit bloginfo(‚template_url‘); anpassen.

      Beste Grüße
      Pascal

  1. nur noch mal zur Verdeutlichung:
    ich arbeite NICHT mit WordPress und werde es voraussichtlich auch nicht;
    gehts dann trotzdem ?
    Ich hab Deine Antwort als JA gedeutet !?

    hArzlichen Gruß
    frank

  2. Hallo Pascal,
    ich habe den Nivo slider erfolgreich und nach Anleitung eingebunden(ohne WordPress), er läuft auch wie er soll, allerdings hab ich im Chrome ein Problem. Und zwar befinden sich bei einigen Effekten paralelle Streifen im Bild und durch diese Streifen schimmert das darunter liegende Bild durch. Kennst du das Problem?

    Vielen Dank im Voraus

  3. Hallo, ihr Beitrag zu Nivo-Slider ist gut erklärt, das kann jeder nachvollziehen – Toll !!
    Ich habe aber trotzdem noch eine Frage:
    Wenn ich den Text rechts oder links neben der Slidhow haben möchte statt unten, wie kriegt man das hin?
    Ich habe das bei „s3Slider“ als Demoseite gesehen leider funktioniert bei s3Slider nicht das responsive Webdesign was bei Nivo-Slider der Vorteil ist, deshalb habe ich mich auch für Nivo-Slider entschieden.
    Eine kurze Info per Email wäre toll.

    Mit freundlichen Grüßen
    J.G.

  4. Ich versuche gerade, 2 Slideshows mit verschiedenen Bildern in eine Seite zu setzen, aber irgendwie zeigt er mir nur die erste… mach ich irgendwas falsch?

    Beide Shows sind mit …. eingebunden

Schreibe eine Antwort zu frankAntwort abbrechen

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.

Der Benachrichtigungs-Dienst wird von WordPress.com (Automattic Inc., USA ) bereitgestellt. Mit der Anmeldung akzeptierst du die Datenschutzerklärung. Die Abmeldung / Abo-Verwaltung ist jederzeit über diesen Link möglich.