CodeWatchers

Cara Membuat Slider Carousel Tanpa Plugin di Divi

Rifat Divi Tutorials Feb 19, 2024

Penggeser carousel banyak digunakan dalam desain web karena kemampuannya menampilkan layanan, gambar, fitur, dan berbagai konten lainnya secara efisien tanpa menghabiskan banyak ruang. Dengan menerapkan carousel, Anda dapat mengoptimalkan pemanfaatan ruang dan meningkatkan pengalaman pengguna secara keseluruhan.

Cara Membuat Slider Carousel Tanpa Plugin di Divi

Dalam panduan ini, saya akan memandu Anda melalui proses mengintegrasikan fungsionalitas carousel ke situs web Divi Anda. Kami akan memanfaatkan perpustakaan Swiper.js dari sumber pihak ketiga dan menerapkan CSS khusus untuk menyesuaikan bilah geser sesuai preferensi Anda.

Untuk memasukkan fungsionalitas penggeser ke situs web Divi Anda, cukup aktifkan perpustakaan wiper.js di file function.php tema anak Anda.

Rancang Slider Korsel Tanpa Plugin

Untuk mengaktifkan fungsionalitas penggeser kami, kami harus menyertakan perpustakaan wiper.js di file fungsi.php tema anak Divi kami.

Buat Situs Web Luar Biasa

Dengan Elementor pembuat halaman gratis terbaik

Mulai sekarang

Selain itu, kita perlu memasukkan kode konfigurasi yang menentukan parameter seperti jumlah kolom yang akan ditampilkan di penggeser, apakah slide harus berputar, dan apakah navigasi panah dan penomoran halaman harus diaktifkan, di antara pengaturan lainnya.

Untuk daftar lengkap konfigurasi yang tersedia, silakan merujuk ke halaman Swiper API . Sekarang, mari selami penerapannya.

Semua kode PHP harus dimasukkan ke dalam file function.php tema anak Divi. Anda dapat mengedit file ini melalui FTP, Manajer File di server Anda, atau dengan menggunakan Editor Tema yang dapat diakses di Dashboard WordPress. Dalam hal ini, kita akan melanjutkan dengan Editor Tema.

Untuk memasukkan pustaka wiper.js ke dalam tema anak kita, ikuti langkah-langkah berikut:

  • Navigasikan ke Penampilan → Editor Tema
  • Buka file function.php di tema anak Anda dan tambahkan kode PHP khusus.
<?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');
  • Pilih Perbarui File.

Sekarang kita harus menggunakan Divi Builder untuk membuat semua hal yang akan ditampilkan di slider kita. Kelas dan ID khusus baris, kolom, dan modul perlu ditambahkan. Hanya boleh ada satu tata letak kolom, dan itu akan diubah menjadi carousel berdasarkan nomor kolom yang ditentukan dalam pengaturan kode PHP.

Saya menggunakan modul Blurb dengan beberapa desain cantik dan efek hover untuk contoh ini, tetapi Anda dapat menggunakan modul Divi apa pun yang Anda suka.

Tambahkan bagian dengan satu baris kolom ke halaman Anda menggunakan Divi Builder.

Temukan modul Blurb dan tambahkan ke halaman.

Pengaturan baris dapat diakses dengan mengklik simbol roda gigi di toolbar hijau.

Pilih ID & Kelas CSS Tingkat Lanjut.

Sertakan dp-carousel di bidang Kelas CSS.

Beralih ke tab Konten

Buka pengaturan Kolom, dan tambahkan kelas wiper-wrapper ke bidang Kelas CSS.

Untuk menyesuaikan modul uraian, buka pengaturan modul dan navigasikan ke tab lanjutan. Kemudian tambahkan slide-swiper ke bidang CSS.

Arahkan ke tab Konten dan klik tombol Teks.

Sertakan judul dan teks isi.

Tambahkan Gambar Latar Belakang di sakelar Latar Belakang.

Sekarang untuk desain teks judul, berikut pengaturannya -

  • Font Judul – Abhaya Libre
  • Warna – #415962
  • Ukuran Teks Judul – 26px dan 22px di ponsel

Untuk isi teks, ikuti pengaturan berikut.

  • Font Judul – Terbuka Sans
  • Warna – #879296
  • Ukuran Teks Isi – 14px dan 12px di ponsel
  • Tinggi Garis Tubuh: 1,5em

Pada tahap akhir ini, kita akan menambahkan Blurb Spacing dan Custom CSS untuk memberikan latar belakang putih pada penampung konten dan animasi zoom pada gambar latar belakang.

Alihkan tombol Design Spacing di pengaturan Blurb.

  • Padding untuk desktop harus ditambahkan. 300 piksel/1.5vw/1.5vw/1.5vw
  • Padding untuk tablet harus ditambahkan. 220 piksel/30 piksel/30 piksel/30 piksel
  • Padding untuk ponsel harus ditambahkan. 200 piksel/20 piksel/20 piksel/20 piksel

Arahkan ke tab Advanced dan pilih kotak centang Custom CSS.

Ukuran latar belakang: 100%.

Transisi latar belakang ke bidang Elemen Utama.

Semua transisi adalah 0,5 detik.

Saat mengarahkan kursor, tambahkan ukuran latar belakang dan transisi ke Elemen Utama.

ukuran latar belakang 105%; Semua transisi adalah 0,5 detik.

Untuk warna latar belakang, tempelkan ini di bidang CSS khusus.

background-color: white;
padding: 30px 1.5vw;

Selain itu, Anda perlu menambahkan warna latar belakang dan padding ke Bidang Konten Blurb saat mengarahkan kursor.

background-color: white;
padding: 30px 4vw;

Sekarang setelah kita menyelesaikan modul Blurb, kita dapat mereplikasinya sebanyak yang kita inginkan untuk menambahkan uraian baru ke carousel kita. Anda hanya perlu mengganti kata-kata dan mengubah gambar latar belakang di setiap modul yang disalin.

Slider kami hampir selesai. Terakhir, kita akan menambahkan beberapa CSS khusus untuk menghiasi navigasi slider dan penomoran halaman. Kode ini dapat ditempatkan ke Divi/Opsi Tema/CSS Khusus atau file style.css tema anak Anda.

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

Sekarang inilah slide terakhirnya.

Kata-kata Terakhir

Membuat carousel di Divi tanpa menggunakan plugin melibatkan pemanfaatan fungsionalitas bawaan dan opsi penyesuaian yang disediakan oleh tema Divi. Dengan mengikuti prosedur ini, Anda dapat membuat carousel yang disesuaikan dengan konten spesifik dan preferensi desain Anda tanpa bergantung pada plugin tambahan.

Divi WordPress Theme