Cara Membuat Slider Website Keren dengan Swiper.js

Daftar Isi

  • Pendahuluan
  • Apa Itu Swiper.js?
    • Kelebihan Swiper
  • Persiapan Awal
  • Cara Install Swiper
    • Pakai CDN
    • Pakai NPM
  • Struktur HTML Dasar untuk Swiper Scroll
  • Implementasi Swiper Scroll Horizontal
    • Contoh Swiper Scroll Horizontal
  • Implementasi Swiper Scroll Vertikal
    • Contoh Swiper Scroll Vertikal
  • Troubleshooting Umum
  • Penutup

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 & cepat
  • Bisa diintegrasikan dengan React, Vue, dan Svelte
  • Banyak 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 utama
  • swiper-wrapper: pembungkus semua slide
  • swiper-slide: masing-masing slide
  • swiper-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!