Hello, AMPs

Carousel atau juga disebut slideshow ialah proses penampilan gambar-gambar berjalan yang diberi efek tertentu, sekarang banyak sekali website yang menggunakan efek ini untuk mempercantik tampilan websitenya.

Untuk membuat carousel diperlukan script CSS khusus yang nanti ditambahkan ke tema Divi Anda, tutorial ini juga membutuhkan waktu yang lumayan lama. Jadi mohon bersabar 🙂

carousel tema divi

Untuk persiapan awal, memulai dengan menyiapkan regular section  dan tambahkan single row, buka row setting dan di sizing yang berada di tab design setelah itu sesuaikan setingan seperti berikut :

Make this row fullwidth = yes
Use costum gutter width = yes
Gutter width = 1

carousel divi

Kemudian, pada tab Advanced  masukkan text ds-carousel dibaris css class.

setting row divi

Sekarang save & exit dari row Anda, persiapan sudah selesai.

Sekarang, di row Anda tambahkan modul baru. Saya akan menggunakan module image untuk contoh ini,  Jika Anda ingin memberi jarak, tambahkan padding kiri dan kanan di dalam modul itu sendiri. Anda kemudian dapat melakukan penyesuaian lainnya yang Anda inginkan.

setting image module

Setelah Anda mengatur module sesuai keinginan Anda, duplikat untuk jumlah modul yang diinginkan di carousel Anda. Disini saya akan mencontohkan  dengan delapan, jadi row saya akan terlihat seperti ini:

carousel divi 4

Selanjutnya, masuk ke setiap module dan masukkan  konten yang Anda inginkan. Saya baru saja menambahkan gambar yang berbeda untuk setiap module nya.

Setelah Anda selesai silahkan duplikasi setiap modulenya. Gandakan masing-masing modul Anda sekali, sehingga Anda memiliki dua set module, semua dalam row yang sama, seperti ini:

carousel divi 5

Di module image 1 dan image 1 nya merupakan gambar yang sama, inilah teknik yang akan membuat carousel Anda seolah-olah tidak ada habisnya terus berputar, jika Anda berniat mengganti gambar berarti Anda harus mengganti kedua-duanya.

Jika sudah silahkan Anda masukkan script dibawah ini Divi – theme options – additonal css dan klik save changes.

:root {
–ds-module-number: 16;
–ds-columns-desktop: 6;
–ds-columns-tablet: 4;
–ds-columns-mobile: 2;
–ds-speed-desktop: 30s;
–ds-speed-tablet: 30s;
–ds-speed-mobile: 30s;
}
@media all and (min-width: 981px) {
:root {
–ds-column-width: auto;
–ds-module-width: calc(100vw / var(–ds-columns-desktop));
–ds-column-animation: calc(var(–ds-module-width) – (var(–ds-module-width) * 2));
–ds-scroll-speed: var(–ds-speed-desktop);
}
}@media all and (max-width: 980px) {
:root {
–ds-column-width: auto;
–ds-module-width: calc(100vw / var(–ds-columns-tablet));
–ds-column-animation: calc(var(–ds-module-width) – (var(–ds-module-width) * 2));
–ds-scroll-speed: var(–ds-speed-tablet);
}
}@media all and (max-width: 479px) {
:root {
–ds-module-width: calc(100vw / var(–ds-columns-mobile));
–ds-scroll-speed: var(–ds-speed-mobile);
}
}
.ds-carousel {
overflow: hidden;
}.ds-carousel .et_pb_column {
display: grid;
grid-template-columns: repeat(var(–ds-module-number), var(–ds-module-width));
width: var(–ds-column-width);
-webkit-animation: scroll var(–ds-scroll-speed) linear infinite;
animation: scroll var(–ds-scroll-speed) linear infinite;
}

.ds-carousel .et_pb_module {
width: var(–ds-module-width) !important;
}
@-webkit-keyframes scroll {
0% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
100% {
-webkit-transform: translateX(calc(var(–ds-column-animation) * (var(–ds-module-number) / 2)));
transform: translateX(calc(var(–ds-column-animation) * (var(–ds-module-number) / 2)));
}
}
@keyframes scroll {
0% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
100% {

Jika berhasil Anda akan melihat carousel tema Divi Anda berjalan dan menari dengan indah 🙂 .

Sekian tutorial tema Divi kali ini semoga bermanfaat, terimakasih.

Kursus Internet Marketing Jakarta DUMET School

Download Ebook : Step untuk sukses

Masukkan nama dan email Anda lalu klik tombol download

Terimakasih sudah download, cek email Anda sekarang ! dan klik link konfirmasinya