Jak stworzyć klikalną karuzelę modułów Divi

Dzisiejszy post został przesłany przez Michelle Nunan z Divi Soup, domu „Divi Kitchen”, gdzie nieustannie przygotowuje nowe i przydatne samouczki Divi i e-kursy.

Karuzele to popularna funkcja witryny. Pozwalają wyświetlać więcej treści bez zajmowania dodatkowej przestrzeni, a także dodają element interaktywności do Twojej witryny, co może zachęcić odwiedzających do większego zaangażowania się w Twoje treści.

Istnieje wiele świetnych wtyczek, które mogą pomóc w wyświetlaniu treści w karuzeli, ale w tym poście pokażę Ci, jak stworzyć klikalną karuzelę modułów Divi, używając tylko CSS i JavaScript.

Ten efekt może być używany z prawie każdym standardowym modułem Divi lub kombinacją modułów. Pokażę ci, jak stworzyć tę karuzelę za pomocą modułu obrazu, a następnie modułu bloga, ponieważ proces jest nieco inny. Stamtąd powinieneś zrozumieć, jak możesz stworzyć własną karuzelę z prawie każdym standardowym modułem.

Wynik

Tak powinno się skończyć po stworzeniu karuzeli z modułem blogowym

Tutaj możesz zobaczyć demo na żywo, pokazujące efekt przy użyciu różnych modułów Divi Builder.

Więc zacznijmy.

Dodaj nową stronę

Zaczniemy od stworzenia karuzeli z modułem obrazu. Dodaj nową stronę lub otwórz stronę, do której chcesz dodać karuzelę.

Dodaj nową sekcję

Dodaj do swojej strony nową sekcję standardową z pojedynczą kolumną. Następnie otwórz ustawienia sekcji i na karcie Zaawansowane dodaj klasę ds-carousel-section w polu CSS Class.

Ponieważ zamierzamy zmienić sposób wyświetlania sekcji i wierszy, chcemy, aby te zmiany zostały zastosowane tylko w naszej karuzeli, dlatego dodajemy niestandardową klasę, aby zapobiec wpływowi naszego kodu na inne elementy naszej witryny.

Następnie Zapisz i wyjdź z sekcji.

Teraz otwórz ustawienia wiersza i na karcie Zaawansowane dodaj klasę ds-carousel-row w polu Klasa CSS. Następnie Zapisz i wyjdź z wiersza.

Następnie dodamy moduł obrazu do naszego wiersza. Kliknij Wstaw moduł(y) i wybierz z listy moduł obrazu.

Na karcie Treść modułu obrazu kliknij Prześlij obraz i wybierz żądany obraz z biblioteki multimediów lub prześlij nowy.

Jeśli chcesz, aby Twoje obrazy otwierały się w lightboxie, wybierz tę opcję w ustawieniach.

Alternatywnie możesz dodać adres URL, aby otworzyć nową stronę po kliknięciu obrazu, jeśli chcesz.

Ostatnią rzeczą, jaką musimy zrobić z modułem, jest dodanie klasy. Kliknij kartę Zaawansowane i dodaj klasę ds-carousel-module w polu Klasa CSS. Następnie Zapisz i wyjdź z modułu.

To jeden z naszych gotowych modułów, ale do stworzenia karuzeli będziemy potrzebować więcej niż jednego obrazu. Kod, który podam w dalszej części tego postu, wyświetli 5 obrazów na raz, więc będziemy potrzebować co najmniej 6 obrazów, aby nasze przyciski karuzeli miały jakikolwiek efekt i przesuwały naszą zawartość.

Korzystając z funkcji klonowania Divi, zduplikuj moduł obrazu tyle razy, ile chcesz, aby obrazy były wyświetlane w karuzeli.

Kiedy skończysz, twoja sekcja powinna wyglądać tak, z modułami obrazu ułożonymi w jednym rzędzie.

Będziesz musiał otworzyć ustawienia dla każdego modułu i zamienić swoje obrazy i adres URL, jeśli go dodałeś.

To jest konfiguracja zawartości zakończona, teraz utworzymy nawigację.

Dodaj nową sekcję

Dodaj nową sekcję bezpośrednio pod sekcją obrazu, tym razem z dwiema kolumnami.

Otwórz ustawienia wiersza i na karcie Zaawansowane dodaj klasę ds-arrow-row w polu Klasa CSS. Następnie Zapisz i wyjdź z wiersza.

Dodaj nawigację

Następnie dodaj moduł tekstowy do każdej z dwóch kolumn w tym wierszu.

Teraz musimy utworzyć pola wejściowe, które będą działać jako nasze przyciski nawigacyjne. Otwórz moduł tekstowy w lewej kolumnie i w obszarze zawartości wklej następujący kod HTML:

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

Następnie Zapisz i wyjdź z modułu.

Następnie otwórz moduł tekstowy w prawej kolumnie i wklej następujący kod HTML:

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

Następnie Zapisz i wyjdź z modułu.

Nadajemy tym polom wejściowym unikalne identyfikatory ds-arrow-left i ds-arrow-right, dzięki czemu możemy zarówno stylizować je za pomocą CSS, jak i kierować je za pomocą JavaScript, aby powiedzieć im, co chcemy, aby zrobili po kliknięciu.

Wartości 8 i 9 odnoszą się do podwójnych strzałek w lewo i w prawo z rodziny czcionek ET Modules.

To wszystko, co musimy zrobić w kreatorze. Jeśli sprawdzisz teraz przód swojej strony, będzie to tylko pojedyncza kolumna obrazków, a następnie dwa małe szare przyciski z 8 i 9 na nich i nic nie zrobią. Przejdźmy więc do zabawnej części, dodając nasz kod.

Dodaj CSS

Radziłbym dodać następujący kod CSS do motywu potomnego, ale jeśli nie używasz motywu potomnego, możesz dodać do Divi> Opcje motywu> Ogólne> Niestandardowy CSS i naciśnij Zapisz.

/*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;
    }
}

Edytuj CSS według swoich potrzeb

Może być konieczne edytowanie niektórych deklaracji CSS w zależności od liczby modułów używanych w karuzeli.

Teraz trochę matematyki!

Ta deklaracja ustawia szerokość wiersza zawierającego moduły.

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

Aby nasze moduły unosiły się obok siebie, a niektóre znajdowały się poza widocznym obszarem, musimy zwiększyć szerokość rzędu.

Jeśli wyświetlasz łącznie 15 modułów, po 5 na stronę, otrzymasz 3 strony. Widoczna szerokość rzędu musi więc wynosić:

(15/5) x 100 = 300.

Dlatego będziesz musiał zmienić wartości 1000vw na minimum 300vw. (Nie ma znaczenia, jeśli wstawisz większą liczbę, ponieważ JavaScript zadba o to, aby nie wyświetlać żadnych dodatkowych pustych stron). Więc Twój dostosowany CSS będzie wyglądał tak:

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

W przypadku zapytań medialnych jest nieco inaczej. Ponieważ CSS jest skonfigurowany do wyświetlania 3 obrazów na stronę na ekranach o szerokości 1024 pikseli i mniejszej oraz 1 obraz na stronę na ekranach o szerokości 479 pikseli lub mniejszej, musimy dostosować matematykę, aby to odzwierciedlić:

(15 / 3) x 100 = 500 (dla tabletów)
(15 / 1) x 100 = 1500 (dla telefonów komórkowych)

Twój dostosowany CSS będzie wyglądał tak:

@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;
    }
}

Możesz, jeśli chcesz, po prostu zmienić wszystkie te wartości na szerokość większą niż całkowita liczba modułów, których używasz dla uproszczenia. W powyższym przykładzie wartość ta wynosiłaby 1500vw lub więcej.

Możesz także zmienić liczbę modułów wyświetlanych na stronie. Ta deklaracja CSS to miejsce, w którym możesz to dostosować.

/*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;
}

Wartość szerokości 20vw wyświetla 5 obrazów na stronie, a to tylko procent 100. Tak więc 25vw wyświetli 4 obrazy na stronie, a 16,66vw wyświetli 6 obrazów na stronie i tak dalej.

To samo możesz zrobić dla zapytań o media:

/*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;
    }
}

Pamiętaj, że jeśli zmienisz liczbę obrazów wyświetlanych na stronie, może być konieczne dostosowanie omówionej wcześniej wartości szerokości wiersza.

Jeśli teraz ponownie sprawdzisz swoją stronę, wszystko powinno być ładnie wystylizowane i wyglądać jak karuzela, ale aby działała, musimy dodać trochę JavaScript.

Dodaj JavaScript

Skopiuj i wklej następujący kod do Divi> Opcje motywu> Integracje> Dodaj kod do <head> swojego bloga i pamiętaj, aby zapisać.

<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>

Ten kod dodaje funkcjonalność do naszych przycisków, przesuwając wiersz w lewo i prawo po kliknięciu, aby wyświetlić moduły.

Istnieje kilka obszarów, które możesz chcieć edytować:

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

mn_widoczny = 5; zmienna odpowiada liczbie modułów wyświetlanych na stronie na pulpicie. Więc jeśli zmieniłeś to w CSS, jak wspomniano wcześniej, będziesz również chciał zmienić tę wartość.

Podobnie funkcja ta dostosowuje liczbę obrazów wyświetlanych na tabletach i telefonach komórkowych. Więc jeśli zmieniłeś to w CSS, dostosuj również tutaj wartości mn_visible.

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

Wreszcie mamy prędkość, z jaką porusza się karuzela. Jest on tutaj ustawiony na 1000. Jest to prędkość w milisekundach: 1000 milisekund = 1 sekunda.

Możesz dostosować tę wartość, aby przyspieszyć lub spowolnić animację.

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; 
		}
}

Otóż ​​to! Teraz, jeśli przeglądasz swoją stronę, powinieneś mieć klikalną karuzelę modułów graficznych.

Jak powiedziałem, możesz użyć tej metody z prawie każdym standardowym modułem Divi Builder, ale może być konieczne dostosowanie ustawień za pomocą modułów zaprojektowanych do wyświetlania jakiegoś rodzaju kanału, takiego jak moduł bloga.

Ponieważ moduł bloga pobiera posty i wyświetla je w wielu kolumnach (przy korzystaniu z funkcji siatki), wymagałoby to dostosowania ustawień modułu i odrobiny dodatkowego CSS.

Karuzela za pomocą modułu Blog

Wykonaj te same czynności, aby skonfigurować sekcję i wiersz.

Zamiast dodawać moduł obrazu, wybierz moduł blogu i dodaj klasę ds-carousel-module na karcie Zaawansowane w ustawieniach modułu.

Następnie na karcie Projekt wybierz Siatka z menu rozwijanego układu.

Jeśli chcesz, możesz pozostawić ją jako pełną szerokość, ale opcja Siatka automatycznie dodaje styl, który lepiej pasuje do układu karuzeli.

Teraz musimy dostosować niektóre ustawienia w zakładce Treść.

W tym pierwszym module potrzebujemy numeru postów ustawionego na 1, a numeru offsetu ustawionego na 0.
To, jak dostosujesz pozostałe ustawienia i jakie treści wyświetlasz, zależy wyłącznie od Ciebie. Następnie zapisz i wyjdź.

Tak jak poprzednio, użyj funkcji klonowania Divi, aby zduplikować moduł tyle razy, ile potrzebujesz.

Gdy masz już odpowiednią liczbę modułów bloga, otwórz każdy z nich i za każdym razem zwiększaj liczbę przesunięcia o 1, aby każdy moduł bloga wyświetlał następny post w kanale.

Twoje ustawienia będą wyglądać tak:

1. = Numer przesunięcia: 0
2. = Numer przesunięcia: 1
3. = Numer przesunięcia: 2
4. = Numer przesunięcia: 3
Itp.

Trochę dodatkowego CSS

Ponieważ moduł bloga wyświetla się w kolumnach podczas korzystania z formatu Grid, musimy dodać to dodatkowe zapytanie o media do naszego CSS, aby zastąpić ustawienie kolumny Divi na mniejszych ekranach:

@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;
    }
}

Jeśli zdecydowałeś się korzystać z modułu bloga w trybie pełnej szerokości, nie musisz tego dodawać.

Wynik

Teraz sprawdź swoją stronę i zobacz swoją uroczą nową karuzelę blogów

Końcowe przemyślenia

Efekt karuzeli można wykorzystać na wiele sposobów, aby wyświetlić więcej treści bez zwiększania długości strony.

Możesz wyświetlić prezentację projektów swojej witryny, referencje klientów, biografie pracowników, filmy, podcasty, a nawet produkty ze swojego sklepu.

Chciałbym usłyszeć, jak używasz tego samouczka do tworzenia klikalnej karuzeli modułów Divi, więc zostaw komentarz w sekcji poniżej!

Polecane zdjęcie autorstwa aunaauna / Shutterstock.com