Akses kelas selamanya
Masuk /
Daftar
Cara Membuat Slider Website Keren dengan Swiper.js
Daftar Isi PendahuluanApa Itu Swiper.js?Kelebihan SwiperPersiapan AwalCara Install SwiperPakai CDNPakai NPMStruktur HTML Dasar untuk Swiper ScrollImplementasi Swiper Scroll HorizontalContoh Swiper Scroll HorizontalImplementasi Swiper Scroll VertikalContoh Swiper Scroll VertikalTroubleshooting UmumPenutup Pendahuluan Pernah lihat slider di website yang bisa digeser ke kanan atau ke bawah dengan mulus banget? Nah, itu biasanya dibuat pakai Swiper.js sebuah library JavaScript yang ringan tapi powerful untuk bikin slider modern. Swiper ini bukan cuma responsif, tapi juga bisa di-scroll pakai mouse, sentuhan jari, atau bahkan trackpad. Di artikel ini, kita akan bahas dari nol gimana cara menggunakan Swiper Scroll, baik horizontal maupun vertikal, lengkap dengan scrollbar, efek transisi, dan pastinya responsif untuk semua perangkat. Apa Itu Swiper.js? Swiper.js adalah library open-source yang biasa dipakai buat bikin slider (carousel) yang cepat, ringan, dan sangat fleksibel. Dibuat oleh Vladimir Kharlampidi, Swiper dirancang untuk aplikasi mobile dan web modern. Kelebihan Swiper Support touch gesture (drag pakai jari)Super ringan & cepatBisa diintegrasikan dengan React, Vue, dan SvelteBanyak efek transisi keren (fade, cube, coverflow, dll) Banyak website dan aplikasi populer udah pakai Swiper, dari situs e-commerce, landing page startup, sampai platform media sosial. Persiapan Awal Sebelum mulai, pastikan kamu punya alat berikut: Text editor (contoh: VS Code)Browser modern (Chrome, Firefox, Safari)Koneksi internet (kalau pakai CDN) Cara Install Swiper Pakai CDN: Paste swiper css berikut sebelum tag penutup </head> <!-- Swiper CSS --> <link rel="stylesheet" href="<https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css>" /> Lalu tambahkan swiper js berikut sebelum tag penutup </body> <!-- Swiper JS --> <script src="<https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js>"></script> Sehingga struktur HTML akan seperti ini: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Swiper Scroll untuk Pemula: Cara Bikin Slider Keren di Website</title> <!-- Swiper CSS --> <link rel="stylesheet" href="<https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css>" /> </head> <body> <!-- Swiper JS --> <script src="<https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js>"></script> </body> </html> Pakai NPM: npm install swiper Lalu import di file JavaScript kamu: import Swiper from 'swiper'; import 'swiper/css'; Struktur HTML Dasar untuk Swiper Scroll Untuk mulai pakai Swiper, kamu butuh struktur HTML seperti ini: <div class="swiper"> <div class="swiper-wrapper"> <div class="swiper-slide">Slide 1</div> <div class="swiper-slide">Slide 2</div> <div class="swiper-slide">Slide 3</div> </div> <div class="swiper-scrollbar"></div> </div> swiper: container utamaswiper-wrapper: pembungkus semua slideswiper-slide: masing-masing slideswiper-scrollbar: untuk scrollbar opsional Implementasi Swiper Scroll Horizontal Ini dia konfigurasi dasar buat scroll horizontal: const swiper = new Swiper('.swiper', { direction: 'horizontal', slidesPerView: 'auto', freeMode: true, scrollbar: { el: '.swiper-scrollbar', }, mousewheel: true, }); Dengan konfigurasi ini, slider bisa digeser pakai mouse atau sentuhan secara bebas, seperti scroll biasa. Cocok banget buat galeri gambar atau daftar produk. Contoh Swiper Scroll Horizontal Ini kode lengkap untuk swiper scroll horizontal: <!DOCTYPE html> <html lang="id"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Swiper Scroll Horizontal</title> <link rel="stylesheet" href="<https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css>" /> <style> body { font-family: sans-serif; padding: 2rem; } .swiper { width: 100%; height: 200px; margin-top: 20px; } .swiper-slide { background: #2447f9; color: white; font-size: 1.5rem; display: flex; justify-content: center; align-items: center; width: 300px; border-radius: 10px; } </style> </head> <body> <h1>Swiper Scroll Horizontal</h1> <div class="swiper"> <div class="swiper-wrapper"> <div class="swiper-slide">Slide 1</div> <div class="swiper-slide">Slide 2</div> <div class="swiper-slide">Slide 3</div> <div class="swiper-slide">Slide 4</div> <div class="swiper-slide">Slide 5</div> </div> <div class="swiper-scrollbar"></div> </div> <script src="<https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js>"></script> <script> const swiper = new Swiper(".swiper", { direction: "horizontal", slidesPerView: "auto", spaceBetween: 16, freeMode: true, scrollbar: { el: ".swiper-scrollbar", }, mousewheel: true, }); </script> </body> </html> Hasilnya: Result Swiper Scroll Horizontal Implementasi Swiper Scroll Vertikal Cukup ubah properti direction: 'vertical' dan tambahkan height untuk slide: <style> .swiper { width: 100%; height: 500px; } .swiper-slide { height: 300px; } </style> <script> const swiper = new Swiper('.swiper', { direction: 'vertical', slidesPerView: 'auto', freeMode: true, scrollbar: { el: '.swiper-scrollbar', }, mousewheel: true, }); </script> Contoh Swiper Scroll Vertikal Ini kode lengkap untuk swiper scroll vertikal: <!DOCTYPE html> <html lang="id"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Swiper Scroll Vertikal</title> <!-- Swiper CSS --> <link rel="stylesheet" href="<https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css>" /> <style> body { font-family: sans-serif; padding: 2rem; margin: 0; } .swiper { width: 100%; height: 500px; } .swiper-slide { background-color: #2447f9; color: white; font-size: 1.5rem; display: flex; justify-content: center; align-items: center; height: 150px; border-radius: 10px; margin-bottom: 16px; } .swiper-scrollbar { background-color: rgba(0, 0, 0, 0.1); } .swiper-scrollbar-drag { background-color: #0ea5e9; } </style> </head> <body> <h1>Swiper Scroll Vertikal</h1> <div class="swiper"> <div class="swiper-wrapper"> <div class="swiper-slide">Konten 1</div> <div class="swiper-slide">Konten 2</div> <div class="swiper-slide">Konten 3</div> <div class="swiper-slide">Konten 4</div> <div class="swiper-slide">Konten 5</div> <div class="swiper-slide">Konten 6</div> <div class="swiper-slide">Konten 7</div> </div> <div class="swiper-scrollbar"></div> </div> <!-- Swiper JS --> <script src="<https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js>"></script> <script> const swiper = new Swiper(".swiper", { direction: "vertical", slidesPerView: "auto", spaceBetween: 16, freeMode: true, mousewheel: true, scrollbar: { el: ".swiper-scrollbar", }, }); </script> </body> </html> Hasilnya: Result Swiper Scroll Vertikal Troubleshooting Umum Swiper tidak muncul: Cek HTML & CSS sudah benar.Scroll tidak jalan: Pastikan mousewheel: true.Slide tumpang tindih: Tambahkan spaceBetween. Penutup Swiper Scroll itu gampang dipakai dan hasilnya keren. Mau bikin slider gambar, konten, video, atau galeri Swiper bisa semuanya. Tinggal atur arah scroll dan sedikit styling, website kamu langsung tampil lebih profesional. Swiper Scroll bisa bikin tampilan website kamu lebih hidup dan interaktif. Dengan setup yang mudah dan dokumentasi lengkap, kamu bisa bikin berbagai jenis slider tanpa pusing. Selamat mencoba!
