Lesefortschritt:

Divi-Slideshows in zufälliger Reihenfolge anzeigen

1. Januar 2021 | Divi-Theme, Scripts

Dieser Beitrag beinhaltet 363 Wörter. – Geschätzte Lesezeit: ca. 2 Minuten.

Das Divi-Theme ist mit einem Slider-Modul ausgestattet, mit welchem sich ansprechende Slideshows anzeigen lassen. Ein Nachteil: Die einzelnen Folien werden normalerweise in genau jener Reihenfolge angezeigt, in der man die Slides erfasst. Doch es gibt einen Trick, um die Slides randomized anzuzeigen. Vorteil: BesucherInnen sehen bei jedem Websiteaufruf eine andere Folie als erste.

Um die Folien bunt zu mischen bedarf es einiger Zeilen Code, welche im Backend unter Divi/Theme Options/Integration eingetragen werden. Im Feld «Add code to the < head > of your blog» wird folgender Code eingetragen und anschliessend gespeichert:

<script type="text/javascript">
jQuery(document).ready(function(){
  var item = document.querySelector('.et_pb_slider .et_pb_slides');
  if(item!=null){
    for (var i = item.children.length; i >= 0; i--) {
      item.appendChild(item.children[Math.random() * i | 0]);
    }
  }
});
</script>

Die Slides werden anschliessend in zufälliger Reihenfolge angezeigt.

Allerdings wird der Code nach diesem Vorgehen in allen Slideshows aktiv. Das heisst, möchte man Slideshow A randomizen, Slideshow B hingegen nicht, benötigen Sie eine Variante:

Zufällige Anzeige nur für ausgewählte Slideshows

Möchten Sie die Slider Ihrer Slideshows grundsätzlich in genau jener Reihenfolge anzeigen lassen, in welcher Sie sie programmiert haben? Und soll der Randomizer nur bei einzelnen Slideshows wirken? Ganz einfach: Fügen Sie auf den betreffenden Divi-Seiten oder -Beiträgen ein «Code»-Modul hinzu und kopieren Sie wiederum obigen Code da rein.

Nun wird einzig die betreffende Slideshow nach Zufallsprinzip angezeigt.

 

Werbung

Werbung

 

Kostenlose WordPress- und Divi-Tricks im Abo

Wir schicken Ihnen sporadisch (weniger als 10x jährlich) neue Tricks für Wordpress und das Divi-Theme, aber auch hilfreiche CSS- und HTML-Codes frei Haus.

Füllen Sie zur Anmeldung das folgende Formular aus. Angaben mit * sind Pflichtangaben.






Vielen Dank.

Pin It on Pinterest

Share This