Cara Install React ID Swiper untuk Membuat Komponen React Slideshow

#Pranala

Sebelumnya, saya menggunakan library React Slick untuk membuat komponen slideshow pada beberapa proyek sebelumnya. Namun, saya merasa sedikit ada masalah ketika mencoba mencoba untuk memanipulasi beberapa element HTML dan merubah styling pada pustaka tersebut sehingga mencoba alternatif lain. Akhirnya, saya menemukan yang namanya React ID Swiper.

Hal ini bisa terjadi saat saya mencari mana saja pustaka slideshow yang bisa bekerja bareng TailwindCSS dan menemukan Tweet dari Adam Wathan.

#Cara Install

Menggunakan NPM

npm install react-id-swiper@4.0.0 swiper@5.4.5

Menggunakan Yarn

yarn add react-id-swiper@4.0.0 swiper@5.4.5

Mengapa menggunakan versi tersebut? Karena, saat tulisan ini dibuat ( 1 November 2020) React ID Swiper belum memperbaiki / memperbarui sumber css pada Swiper 6.1 . Karena pada versi Swiper JS tersebut, pustaka tersebut merubah lokasi file cssnya. Bisa dilihat pada tulisan saya berikut :

Mengatasi Error Module not found: Can’t resolve ‘swiper/swiper.css’ di React ID Swiper

React ID Swiper adalah salah satu library yang saya gunakan untuk membuatslideshow. Library ini saat saya membacanya sangat mudah dokumentasinya. Tautanlibrary ini bisa teman-teman lihat pada situs berikut : React ID Swiper : https://react-id-swiper.ashernguyen.site Saat saya melakukan install…

FaldiCerita Faldi

#Import CSS Swiper

Import CSS Swiper bisa pada Index.js atau komponen Slideshow. Saya lebih menyarankan pada komponen Slideshow. Karena css ini hanya digunakan saat komponen tersebut diload.

import 'swiper/css/swiper.css';

#Kode Awal

Secara basis awal, bisa menggunakan kode seperti ini :

import React from 'react';
  import Swiper from 'react-id-swiper';
  import 'swiper/css/swiper.css';

  const Navigation = () => {
    const params = {
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev'
      }
    }

    return (
      <Swiper {...params}>
        <div>Slide #1</div>
        <div>Slide #2</div>
        <div>Slide #3</div>
        <div>Slide #4</div>
        <div>Slide #5</div>
      </Swiper>
    )
  };

  export default Navigation;

Hasilnya nanti kurang lebih seperti ini :

#Dokumentasi dan Dukungan Komunitas

Sejujurnya, dokumentasi React ID Swiper sudah cukup bagus. Maksudnya, sangat mudah  untuk melakukan kustomisasi dan perubahan sesuai dengan yang kita inginkan. Masalahnya adalah dukungan komunitas yang terbatas (saat melihat chat spectrum) atau melihat repository github React ID Swiper, ada banyak issues dan pull request yang belum ditanggapi.

Terkahir, juli 2020 pemilik melakukan commit pada branch master. Jadi balik lagi, pilihan mau menggunakan React ID Swiper atau yang lain. Malah, tetap menggunakan React Slick juga tidak ada masalah.

Semoga Membantu!