So erstellen Sie ein anklickbares Karussell von Divi-Modulen

Der heutige Beitrag wurde von Michelle Nunan von Divi Soup eingereicht, der Heimat der „Divi Kitchen“, wo sie ständig neue und nützliche Divi-Tutorials und E-Kurse kocht.

Karussells sind ein beliebtes Website-Feature. Sie ermöglichen es Ihnen, mehr Inhalte anzuzeigen, ohne zusätzlichen Platz zu beanspruchen, und fügen Ihrer Website ein interaktives Element hinzu, das Ihre Besucher dazu anregen kann, sich mehr mit Ihren Inhalten zu beschäftigen.

Es gibt eine Reihe großartiger Plugins, die Ihnen helfen können, Ihre Inhalte in einem Karussell anzuzeigen, aber in diesem Beitrag werde ich Ihnen zeigen, wie Sie ein anklickbares Karussell von Divi-Modulen nur mit CSS und Javascript erstellen.

Dieser Effekt kann mit fast jedem der standardmäßigen Divi-Module oder einer Kombination von Modulen verwendet werden. Ich werde Ihnen zeigen, wie Sie dieses Karussell mit dem Image-Modul und dann mit dem Blog-Modul erstellen, da der Prozess dafür etwas anders ist. Von dort aus sollten Sie verstehen, wie Sie mit fast allen Standardmodulen Ihr eigenes Karussell erstellen können.

Ergebnis

Das sollten Sie am Ende haben, nachdem Sie mit dem Blog-Modul ein Karussell erstellt haben

Sie können hier eine Live-Demo sehen, die den Effekt mit verschiedenen Divi Builder-Modulen zeigt.

Also lasst uns anfangen.

Eine neue Seite hinzufügen

Wir beginnen mit der Erstellung eines Karussells mit dem Bildmodul. Fügen Sie eine neue Seite hinzu oder öffnen Sie eine Seite, zu der Sie das Karussell hinzufügen möchten.

Einen neuen Abschnitt hinzufügen

Fügen Sie Ihrer Seite einen neuen Standardabschnitt mit einer einzigen Spalte hinzu. Öffnen Sie dann die Abschnittseinstellungen und fügen Sie auf der Registerkarte Erweitert die Klasse ds-carousel-section im Feld CSS-Klasse hinzu.

Da wir die Anzeige von Abschnitten und Zeilen ändern werden, möchten wir, dass diese Änderungen nur auf unser Karussell angewendet werden. Daher fügen wir eine benutzerdefinierte Klasse hinzu, um zu verhindern, dass unser Code andere Elemente auf unserer Website beeinflusst.

Dann speichern und verlassen Sie den Abschnitt.

Öffnen Sie nun die Zeileneinstellungen und fügen Sie auf der Registerkarte Erweitert die Klasse ds-carousel-row im Feld CSS-Klasse hinzu. Dann speichern und verlassen Sie die Zeile.

Als nächstes fügen wir unserer Zeile ein Bildmodul hinzu. Klicken Sie auf Modul(e) einfügen und wählen Sie das Bildmodul aus der Liste aus.

Klicken Sie auf der Registerkarte Inhalt des Bildmoduls auf Bild hochladen und wählen Sie entweder Ihr gewünschtes Bild aus der Medienbibliothek aus oder laden Sie ein neues hoch.

Wenn Sie möchten, dass Ihre Bilder in einer Lightbox geöffnet werden, wählen Sie diese Option in den Einstellungen.

Alternativ können Sie auf Wunsch eine URL hinzufügen, um eine neue Seite zu öffnen, wenn auf das Bild geklickt wird.

Als letztes müssen wir dem Modul eine Klasse hinzufügen. Klicken Sie auf die Registerkarte Erweitert und fügen Sie im Feld CSS-Klasse die Klasse ds-carousel-module hinzu . Dann Speichern & Beenden Sie das Modul.

Das ist eines unserer Module, aber wir brauchen mehr als ein einzelnes Image, um das Karussell zu erstellen. Der Code, den ich später in diesem Beitrag bereitstellen werde, zeigt 5 Bilder gleichzeitig an, daher benötigen wir mindestens 6 Bilder, damit unsere Karussellschaltflächen einen Effekt haben und unseren Inhalt verschieben.

Mit der Klonfunktion von Divi duplizieren Sie das Bildmodul so oft, wie Bilder in Ihrem Karussell angezeigt werden sollen.

Wenn Sie fertig sind, sollte Ihr Abschnitt so aussehen, wobei Ihre Bildmodule in einer einzigen Reihe gestapelt sind.

Sie müssen die Einstellungen für jedes Modul öffnen und Ihre Bilder und die URL austauschen, wenn Sie sie hinzugefügt haben.

Damit ist die Einrichtung des Inhalts abgeschlossen, jetzt erstellen wir die Navigation.

Einen neuen Abschnitt hinzufügen

Fügen Sie direkt unter Ihrem Bildbereich einen neuen Abschnitt hinzu, diesmal mit zwei Spalten.

Öffnen Sie die Zeileneinstellungen und fügen Sie auf der Registerkarte Erweitert die Klasse ds-arrow-row im Feld CSS-Klasse hinzu. Dann speichern und verlassen Sie die Zeile.

Fügen Sie die Navigation hinzu

Fügen Sie als Nächstes jeder der beiden Spalten in dieser Zeile einen Textbaustein hinzu.

Jetzt müssen wir Eingabefelder erstellen, die als unsere Navigationsschaltflächen fungieren. Öffnen Sie den Textbaustein in der linken Spalte und fügen Sie im Inhaltsbereich folgenden HTML-Code ein:

<input id="ds-arrow-left" type="button" value="8">

Dann Speichern & Beenden Sie das Modul.

Öffnen Sie als nächstes das Textmodul in der rechten Spalte und fügen Sie den folgenden HTML-Code ein:

<input id="ds-arrow-right" type="button" value="9">

Dann Speichern & Beenden Sie das Modul.

Wir geben diesen Eingabefeldern eindeutige IDs von ds-arrow-left und ds-arrow-right, damit wir sie sowohl mit CSS formatieren als auch mit JavaScript ausrichten können, um ihnen mitzuteilen, was sie tun sollen, wenn sie angeklickt werden.

Die Werte 8 und 9 beziehen sich auf die doppelten linken und rechten Pfeile aus der Schriftfamilie ET Modules.

Das ist alles, was wir im Builder tun müssen. Wenn Sie jetzt das Frontend Ihrer Seite überprüfen, ist es nur eine einzelne Spalte mit Bildern und dann zwei kleine graue Schaltflächen mit 8 und 9 darauf und sie werden nichts tun. Kommen wir also zum lustigen Teil, indem wir unseren Code hinzufügen.

CSS hinzufügen

Ich würde empfehlen, das folgende CSS zu Ihrem Child-Theme hinzuzufügen, aber wenn Sie kein Child-Theme verwenden, können Sie Divi> Theme Options> General> Custom CSS hinzufügen und auf Speichern klicken.

/*Hide the section overflow*/
.ds-carousel-section {
    width: 100%;
    overflow: hidden;
}

/*Set the row width*/
.ds-carousel-row {
    overflow: hidden;
    width: 1000vw;
    max-width: 1000vw;
}

@media all and (max-width: 1024px) {
/*Override Divi's width setting on tablets*/
    .ds-carousel-section .ds-carousel-row {
        max-width: 1000vw !important;
    }
}

@media all and (max-width: 479px) {
/*Override Divi's width setting on mobiles*/
    .ds-carousel-section .ds-carousel-row {
        max-width: 1000vw !important;
    }
}

/*Style the navigation arrows*/
#ds-arrow-left,
#ds-arrow-right {
    color: #fff;
    background: gray;
    font-family: 'ETModules';
    font-size: 30px;
    padding: 5px 30px;
    border-style: none;
    border-radius: 0;
    cursor: pointer;
    -webkit-box-shadow: 2px 2px 2px 0 rgba(0, 0, 0, 0.3);
    box-shadow: 2px 2px 2px 0 rgba(0, 0, 0, 0.3);
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}

/*Position the left arrow*/
#ds-arrow-left {
    float: right;
    margin-right: 5px;
}

/*Position the right arrow*/
#ds-arrow-right {
    float: left;
    margin-left: 5px;
}

/*Style navigation arrows on hover*/
#ds-arrow-left:hover,
#ds-arrow-right:hover {
    -webkit-box-shadow: 3px 3px 6px 1px rgba(0, 0, 0, 0.2);
    box-shadow: 3px 3px 6px 1px rgba(0, 0, 0, 0.2);
}

/*Style navigation arrows on click*/
#ds-arrow-left:active,
#ds-arrow-right:active {
    -webkit-box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, 0.2) inset;
    box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, 0.2) inset;
}

/*Make sure the modules span their entire container*/
.ds-carousel-module .column {
    float: left;
    width: 100% !important;
    margin-right: 0 !important;
}

/*Set the module width*/
.ds-carousel-module {
    width: 20vw; /*Change this value to increase or decrease the module displayed per page*/
    padding: 0 30px;
    float: left;
    position: relative;
    margin-bottom: 0 !important;
}

/*Adjust for smaller screens*/
@media all and (max-width: 1024px) {
    /*Show 3 modules per page on tablets*/
    .ds-carousel-module {
        width: 33.33vw;
    }
    /*Align the navigation on smaller screens*/
    #ds-arrow-row .et_pb_column {
        width: 50% !important;
    }
}

@media all and (max-width: 479px) {
    /*Show 1 module per page on mobiles*/
    .ds-carousel-module {
        width: 100vw;
    }
}

Bearbeiten Sie das CSS für Ihre Bedürfnisse

Je nachdem, wie viele Module Sie in Ihrem Karussell verwenden, müssen Sie möglicherweise einige der CSS-Deklarationen bearbeiten.

Jetzt ein bisschen Mathe!

Diese Deklaration legt die Breite der Zeile fest, die die Module enthält.

/*Set the row width*/
.ds-carousel-row {
    overflow: hidden;
    width: 1000vw;
    max-width: 1000vw;
}

Um unsere Module nebeneinander schweben zu lassen, wobei einige außerhalb des sichtbaren Bereichs sitzen, müssen wir die Breite der Reihe erhöhen.

Wenn Sie insgesamt 15 Module mit 5 pro Seite anzeigen, erhalten Sie am Ende 3 Seiten. Die sichtbare Breite der Zeile muss also sein:

(15 / 5) x 100 = 300.

Daher müssen Sie die 1000vw-Werte auf mindestens 300vw ändern. (Es spielt keine Rolle, ob Sie eine größere Zahl eingeben, da JavaScript dafür sorgt, dass keine zusätzlichen leeren Seiten angezeigt werden). Ihr angepasstes CSS würde also so aussehen:

/*Set the row width*/
.ds-carousel-row {
    overflow: hidden;
    width: 300vw;
    max-width: 300vw;
}

Bei den Media Queries ist das etwas anders. Da das CSS so konfiguriert ist, dass 3 Bilder pro Seite auf Bildschirmen mit einer Breite von 1024 Pixel und weniger angezeigt werden, und 1 Bild pro Seite auf Bildschirmen mit einer Breite von 479 Pixel oder weniger, müssen wir die Mathematik anpassen, um Folgendes widerzuspiegeln:

(15 / 3) x 100 = 500 (für Tabletten)
(15 / 1) x 100 = 1500 (für Handys)

Ihr angepasstes CSS würde so aussehen:

@media all and (max-width: 1024px) {
/*Override Divi's width setting on tablets*/
    .ds-carousel-section .ds-carousel-row {
        max-width: 500vw !important;
    }
}

@media all and (max-width: 479px) {
/*Override Divi's width setting on mobiles*/
    .ds-carousel-section .ds-carousel-row {
        max-width: 1500vw !important;
    }
}

Wenn Sie möchten, können Sie alle diese Werte der Einfachheit halber auf eine Breite ändern, die größer ist als die Gesamtzahl der von Ihnen verwendeten Module. Im oben genannten Beispiel wäre dieser Wert also 1500 vw oder mehr.

Sie können auch die Anzahl der pro Seite angezeigten Module ändern. In dieser CSS-Deklaration können Sie das anpassen.

/*Set the module width*/
.ds-carousel-module {
    width: 20vw; /*Change this value to increase or decrease the modules displayed per page*/
    padding: 0 30px;
    float: left;
    position: relative;
    margin-bottom: 0 !important;
}

Der Breitenwert von 20vw zeigt 5 Bilder pro Seite an, und es ist nur ein Prozentsatz von 100. 25vw würde also 4 Bilder pro Seite anzeigen und 16.66vw würde 6 Bilder pro Seite anzeigen und so weiter.

Dasselbe können Sie für die Medienabfragen tun:

/*Adjust for smaller screens*/
@media all and (max-width: 1024px) {
    /*Show 3 modules per page on tablets*/
    .ds-carousel-module {
        width: 33.33vw;
    }
    /*Align the navigation on smaller screens*/
    #ds-arrow-row .et_pb_column {
        width: 50% !important;
    }
}

@media all and (max-width: 479px) {
    /*Show 1 module per page on mobiles*/
    .ds-carousel-module {
        width: 100vw;
    }
}

Denken Sie daran, dass Sie, wenn Sie die Anzahl der pro Seite angezeigten Bilder ändern, möglicherweise auch den zuvor besprochenen Zeilenbreitenwert anpassen müssen.

Wenn Sie Ihre Seite jetzt noch einmal überprüfen, sollte alles schön gestaltet sein und wie ein Karussell aussehen, aber damit es funktioniert, müssen wir etwas JavaScript hinzufügen.

JavaScript hinzufügen

Kopieren Sie den folgenden Code und fügen Sie ihn in Divi > Theme-Optionen > Integrationen > Code zum <head> Ihres Blogs hinzu und stellen Sie sicher, dass Sie Speichern.

<script type="text/javascript">
(function ($) {

var mn_index = 0; //Starting index
var mn_visible = 5;
var mn_end_index = 0;

function mn_next_slide(item) {
		mn_end_index = ( item.length / mn_visible ) - 1; //End index
	
		if (mn_index < mn_end_index ) {
			mn_index++;
			item.animate({'left':'-=100vw'}, 1000);
		}
}

function mn_previous_slide(item) {
		if (mn_index > 0) {
			 mn_index--; 
			 item.animate({'left':'+=100vw'}, 1000);
		}
}

function mn_first_slide(item) {
		if (mn_index > 0) {
			 var move_vw = (100 * mn_index);
			 item.animate({'left':'+='+move_vw+'vw'}, 1000);
			 mn_index = 0; 
		}
}

function mn_set_visible() {
	if ($(window).width() < 480) {      
		mn_visible = 1;
	} else if ($(window).width() < 1025) {
		mn_visible = 3;
	}
}

function mn_carousel_init() {
	mn_set_visible();

	var item = $('.ds-carousel-module');
 
	$('#ds-arrow-right').click(function() {
		mn_next_slide(item);
	});
 
	$('#ds-arrow-left').click(function() {
		mn_previous_slide(item);
	});
	 
	$(window).resize(function() {
		mn_set_visible();
	  	mn_first_slide(item);
	});

}

$(document).ready(function() {
	mn_carousel_init();
});

})(jQuery)
</script>

Dieser Code fügt unseren Schaltflächen Funktionalität hinzu, indem er die Zeile beim Klicken nach links und rechts verschiebt, um die Module anzuzeigen.

Es gibt einige Bereiche, die Sie möglicherweise bearbeiten möchten:

var mn_index = 0; //Starting index
var mn_visible = 5;
var mn_end_index = 0;

mn_visible = 5; Variable entspricht der Anzahl der Module, die pro Seite auf dem Desktop angezeigt werden. Wenn Sie dies also wie zuvor erwähnt im CSS geändert haben, möchten Sie auch diesen Wert ändern.

Ebenso passt diese Funktion die Anzahl der auf Tablets und Handys angezeigten Bilder an. Wenn Sie dies also im CSS geändert haben, dann passen Sie auch hier die mn_visible-Werte an.

function mn_set_visible() {
	if ($(window).width() < 480) {      
		mn_visible = 1;
	} else if ($(window).width() < 1025) {
		mn_visible = 3;
	}
}

Schließlich haben wir die Geschwindigkeit, mit der sich das Karussell bewegt. Hier wird 1000 eingestellt. Dies ist die Geschwindigkeit in Millisekunden: 1000 Millisekunden = 1 Sekunde.

Sie können diesen Wert anpassen, um die Animation zu beschleunigen oder zu verlangsamen.

function mn_next_slide(item) {
		mn_end_index = ( item.length / mn_visible ) - 1; //End index
	
		if (mn_index < mn_end_index ) {
			mn_index++;
			item.animate({'left':'-=100vw'}, 1000);
		}
}

function mn_previous_slide(item) {
		if (mn_index > 0) {
			 mn_index--; 
			 item.animate({'left':'+=100vw'}, 1000);
		}
}

function mn_first_slide(item) {
		if (mn_index > 0) {
			 var move_vw = (100 * mn_index);
			 item.animate({'left':'+='+move_vw+'vw'}, 1000);
			 mn_index = 0; 
		}
}

Das ist es! Wenn Sie nun Ihre Seite anzeigen, sollten Sie ein anklickbares Karussell von Bildmodulen haben.

Wie gesagt, Sie können diese Methode mit fast jedem der standardmäßigen Divi-Builder-Module verwenden, aber möglicherweise müssen Sie die Einstellungen mit Modulen anpassen, die eine Art von Feed anzeigen, wie das Blog-Modul.

Da das Blog-Modul Beiträge einzieht und diese in mehreren Spalten anzeigt (bei Verwendung der Rasterfunktion), erfordert dies eine Anpassung der Moduleinstellungen und ein kleines bisschen zusätzliches CSS.

Karussell mit dem Blog-Modul

Befolgen Sie die gleichen Schritte, um Ihren Abschnitt und Ihre Zeile einzurichten.

Anstatt ein Image-Modul hinzuzufügen, wählen Sie das Blog-Modul und fügen Sie die Klasse ds-carousel-module auf der Registerkarte Erweitert der Moduleinstellungen hinzu.

Wählen Sie als Nächstes auf der Registerkarte Design die Option Raster aus der Dropdown-Liste für das Layout.

Wenn Sie möchten, können Sie es als Vollbreite belassen, aber die Rasteroption fügt automatisch ein Styling hinzu, das besser zum Karussell-Layout passt.

Jetzt müssen wir einige Einstellungen auf der Registerkarte Inhalt anpassen.

Für dieses erste Modul müssen wir die Posts Number auf 1 setzen und die Offset Number auf 0 setzen.
Wie Sie die restlichen Einstellungen anpassen und welche Inhalte Sie anzeigen, liegt ganz bei Ihnen. Dann speichern und beenden.

Verwenden Sie wie zuvor die Klonfunktion von Divi, um das Modul so oft wie nötig zu duplizieren.

Sobald Sie die Anzahl der benötigten Blog-Module haben, öffnen Sie jedes und erhöhen Sie die Offset-Zahl jedes Mal um 1, damit jedes Blog-Modul den nächsten Beitrag im Feed anzeigt.

Deine Einstellungen würden also so aussehen:

1. = Offset-Nummer: 0
2. = Offset-Nummer: 1
3. = Offset-Nummer: 2
4. = Offset-Nummer: 3
Usw.

Ein bisschen mehr CSS

Da das Blog-Modul bei Verwendung des Grid-Formats in Spalten angezeigt wird, müssen wir diese zusätzliche Medienabfrage zu unserem CSS hinzufügen, um die Spalteneinstellung von Divi auf kleineren Bildschirmen zu überschreiben:

@media all and (max-width: 980px) {
    /*Set post to fullwidth on smaller screens*/
    .ds-carousel-section .et_pb_blog_grid .column.size-1of2 {
        width: 100% !important;
        margin: 0 !important;
    }
}

Wenn Sie sich entschieden haben, das Blog-Modul im Vollbreitenmodus zu verwenden, müssen Sie dies nicht hinzufügen.

Ergebnis

Überprüfen Sie jetzt Ihre Seite und sehen Sie Ihr schönes neues Blog-Karussell

Abschließende Gedanken

Es gibt so viele Möglichkeiten, wie Sie diesen Karussell-Effekt verwenden können, um mehr Inhalt anzuzeigen, ohne die Länge Ihrer Seite zu erhöhen.

Sie können eine Präsentation Ihrer Site-Designs, Kundenreferenzen, Mitarbeiterbiografien, Videos, Podcasts oder sogar Produkte aus Ihrem Shop anzeigen.

Ich würde gerne hören, wie Sie dieses Tutorial verwenden, um ein anklickbares Karussell von Divi-Modulen zu erstellen, also hinterlassen Sie bitte einen Kommentar im folgenden Abschnitt!

Ausgewähltes Bild von aunaauna / Shutterstock.com