Suwaki karuzelowe są szeroko stosowane w projektowaniu stron internetowych ze względu na ich zdolność do skutecznego prezentowania usług, obrazów, funkcji i różnych innych treści bez zajmowania nadmiernej przestrzeni. Wdrażając karuzelę, możesz zoptymalizować wykorzystanie przestrzeni i poprawić ogólne wrażenia użytkownika.
W tym przewodniku przeprowadzę Cię przez proces integracji funkcjonalności karuzeli z Twoją witryną Divi . Wykorzystamy bibliotekę Swiper.js z zewnętrznego źródła i zastosujemy niestandardowy CSS, aby dostosować suwak do Twoich preferencji.
Aby włączyć funkcję suwaka do swojej witryny Divi, po prostu wywołaj bibliotekę swiper.js w pliku Functions.php motywu potomnego.
Zaprojektuj suwak karuzelowy bez wtyczki
Aby włączyć funkcjonalność naszego suwaka, musimy dołączyć bibliotekę swiper.js do plikufunctions.php naszego motywu potomnego Divi.
Twórz niesamowite strony internetowe
Z najlepszym darmowym kreatorem stron Elementor
Zacząć terazDodatkowo musimy wstawić kod konfiguracyjny określający m.in. takie parametry jak liczba kolumn wyświetlanych w sliderze, czy slajdy mają się zapętlać, czy ma być włączona nawigacja strzałkami i paginacja.
Pełną listę dostępnych konfiguracji można znaleźć na stronie Swiper API . Przejdźmy teraz do implementacji.
Cały kod PHP powinien zostać włączony do pliku Functions.php motywu potomnego Divi. Możesz edytować ten plik za pośrednictwem FTP, Menedżera plików na swoim serwerze lub za pomocą Edytora motywów dostępnego w panelu WordPress. W tym przypadku będziemy kontynuować pracę z Edytorem motywów.
Aby umieścić bibliotekę swiper.js w naszym motywie potomnym, wykonaj następujące kroki:
- Przejdź do Wygląd → Edytor motywów
- Otwórz plikfunctions.php w motywie potomnym i dodaj niestandardowy kod PHP.
<?php
// Enqueue Swiper.js Library
function dp_carousel(){
wp_enqueue_script( 'your-swiper-js-slug', 'https://unpkg.com/swiper@7/swiper-bundle.min.js', [] , '7.0.2', true );
wp_enqueue_style( 'your-swiper-css-slug', 'https://unpkg.com/swiper@7/swiper-bundle.min.css', [] , '7.0.2');
}
add_action('init', 'dp_carousel', 99);
function dp_carousel_slider_scripts() {
?>
<script type="text/javascript">
// adding navigation html
(function(){
window.addEventListener('DOMContentLoaded', function(){
let sliders = document.querySelectorAll('.dp-carousel')
sliders.forEach(function( slider ) {
swiper_init(slider)
})
});
function swiper_init(slider){
// configuration
if(slider === null) return;
// extra controls
let extraControls = '';
// If we need pagination
extraControls += '<div class="swiper-pagination"></div>';
// If we need navigation buttons
extraControls += '<div class="swiper-button-prev"></div><div class="swiper-button-next"></div>';
slider.innerHTML = '<div class="swiper-container" style="overflow:hidden">' + slider.innerHTML + '</div>' + extraControls;
// Wait for Swiper
var waitForSwiper = setInterval( function () {
if (typeof Swiper != "undefined") {
clearInterval(waitForSwiper);
let carousel_container = slider.querySelector('.swiper-container');
const swiper = new Swiper( carousel_container , {
slidesPerView: 1, // mobile value
loop: true,
spaceBetween: 0, // mobile value
autoplay: {
delay: 3000,
},
speed: 600,
// If we need pagination
pagination: {
el: '.swiper-pagination',
clickable : true,
dynamicBullets: true
},
// Navigation arrows
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
breakpoints: {
768: { // Tablet
slidesPerView: 2,
spaceBetween: 20,
},
981: { // Desktop
slidesPerView: 3,
spaceBetween: 30,
}
}
});
}
}, 20);
}
})();
</script>
<?php }
add_action( 'wp_footer', 'dp_carousel_slider_scripts'); - Wybierz opcję Aktualizuj plik.
Teraz musimy użyć Divi Builder, aby stworzyć wszystkie rzeczy, które będą wyświetlane w naszym suwaku. Konieczne będzie dodanie niestandardowych klas i identyfikatorów wierszy, kolumn i modułów. Może istnieć tylko jeden układ kolumn, który zostanie przekształcony w karuzelę na podstawie numerów kolumn określonych w ustawieniach kodu PHP.
W tym przykładzie wykorzystałem moduły Blurb z pięknym wyglądem i efektami najechania kursorem, ale możesz użyć dowolnego modułu Divi, który Ci się podoba.
Dodaj sekcję z jednym wierszem kolumny do swojej strony za pomocą Divi Builder.
Znajdź moduł Blurb i dodaj go do strony.
Dostęp do ustawień wierszy można uzyskać, klikając symbol koła zębatego na zielonym pasku narzędzi.
Wybierz Zaawansowane identyfikatory i klasy CSS.
Uwzględnij dp-carousel w polu Klasa CSS.
Przejdź do karty Treść
Otwórz ustawienia kolumny i dodaj klasę suwaka do pola Klasa CSS.
Aby dostosować moduł Blurb, otwórz ustawienia modułu i przejdź do karty Zaawansowane. Następnie dodaj suwak-slide do pola CSS.
Przejdź do karty Treść i kliknij przełącznik Tekst.
Dołącz tytuł i treść.
Dodaj obraz tła w przełączniku Tło.
A teraz, jeśli chodzi o projekt tekstu tytułu, oto ustawienia:
- Czcionka tytułowa – Abhaya Libre
- Kolor – #415962
- Rozmiar tekstu tytułu – 26 pikseli i 22 pikseli na telefonach komórkowych
W przypadku tekstu podstawowego postępuj zgodnie z tymi ustawieniami.
- Czcionka tytułowa – Open Sans
- Kolor – #879296
- Rozmiar tekstu głównego – 14 pikseli i 12 pikseli na telefonach komórkowych
- Wysokość linii nadwozia: 1,5 em
Na tym ostatnim etapie dodamy odstępy rozmycia i niestandardowy CSS, aby nadać kontenerowi zawartości białe tło i animację powiększenia obrazu tła.
Przełącz przełącznik odstępów między projektami w ustawieniach notki.
- Należy dodać dopełnienie dla komputerów stacjonarnych. 300 pikseli/1,5 vw/1,5 vw/1,5 vw
- Należy dodać wyściółkę na tablety. 220 pikseli/30 pikseli/30 pikseli/30 pikseli
- Należy dodać wyściółkę do telefonów komórkowych. 200 pikseli/20 pikseli/20 pikseli/20 pikseli
Przejdź do karty Zaawansowane i zaznacz pole wyboru Niestandardowy CSS.
Rozmiar tła: 100%.
Tło – przejście do pola Element główny.
Wszystkie przejścia trwają 0,5 s.
Po najechaniu kursorem dodaj rozmiar tła i przejdź do głównego elementu.
105% rozmiaru tła; Wszystkie przejścia trwają 0,5 s.
Aby ustawić kolor tła, wklej go w niestandardowym polu CSS.
background-color: white;
padding: 30px 1.5vw;Musisz także dodać kolor tła i dopełnienie do pola treści Blurb po najechaniu kursorem.
background-color: white;
padding: 30px 4vw;
Teraz, gdy ukończyliśmy moduł Blurb, możemy go powielać tyle razy, ile chcemy, dodając świeże notki do naszej karuzeli. Wystarczy zastąpić słowa i zmienić obraz tła w każdym skopiowanym module.
Nasz slider jest już prawie gotowy. Na koniec dodamy niestandardowy CSS, aby ozdobić naszą nawigację suwakową i paginację. Kod ten można umieścić w Divi/Opcjach motywu/Niestandardowym CSS lub w pliku style.css motywu potomnego.
/* DP Slider Navigation */
.dp-carousel .swiper-button-prev {
transform: none;
margin-top: -100px;
top: 10px !important;
margin-left: auto!important;
right: 52px;
font-size: 20px !important;
background-color: #fff;
padding: 25px !important;
}
.dp-carousel .swiper-button-next {
transform: none;
top: 10px !important;
margin-top:-100px;
right: 0px !important;
background-color: #fff;
padding: 25px !important;
}
/* Arrow Size and Style */
.swiper-button-next:after, .swiper-button-prev:after {
font-size: 20px;
color: #aed4e4;
}
/* DP Slider Pagination */
.dp-carousel .swiper-pagination-bullet-active {
background-color: #fff;
}
.dp-carousel .swiper-pagination-bullet {
background-color: #fff;
top: 15px;
}
A teraz ostatni slajd.
Ostatnie słowa
Tworzenie karuzeli w Divi bez użycia wtyczki wymaga wykorzystania wbudowanej funkcjonalności i opcji dostosowywania zapewnianych przez motyw Divi. Postępując zgodnie z tą procedurą, możesz stworzyć karuzelę dostosowaną do Twoich konkretnych treści i preferencji projektowych, bez polegania na dodatkowych wtyczkach.
