Card Slider Javascript

MUAZHAN

5 min read

·

Jun 24, 2024

22

Share

Cara Membuat Card Slider dengan JavaScript

Card slider merupakan salah satu elemen UI yang sering digunakan untuk menampilkan konten seperti produk, artikel, atau galeri gambar dalam format yang lebih interaktif dan mudah dinavigasi. Pada artikel ini, kita akan mempelajari cara membuat card slider yang sederhana dengan JavaScript.

1. HTML Struktur

Pertama, kita perlu membuat struktur HTML dasar untuk card slider kita. Berikut contohnya:

    
    
    
    


    

        

            

                
                
Judul Card 1
                
Deskripsi singkat untuk card 1.
            
            

                
                
Judul Card 2
                
Deskripsi singkat untuk card 2.
            
            

                
                
Judul Card 3
                
Deskripsi singkat untuk card 3.
            
        
        Previous
        Next
    

    

Pada kode HTML di atas, kita memiliki:

• slider-container: Div yang menampung seluruh elemen slider.
• slider-track: Div yang berisi semua card.
• card: Div yang mewakili setiap card yang ingin ditampilkan.
• prev dan next: Tombol untuk navigasi ke card sebelumnya dan selanjutnya.

2. CSS Styling

Selanjutnya, kita perlu mengatur style untuk slider dengan CSS. Berikut contohnya:

.slider-container {
    width: 500px;
    overflow: hidden;
    margin: 20px auto;
}

.slider-track {
    display: flex;
    transition: transform 0.5s ease;
}

.card {
    width: 200px;
    height: 300px;
    margin-right: 20px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    padding: 15px;
}

.prev, .next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: #ccc;
    border: none;
    padding: 10px 15px;
    border-radius: 5px;
    cursor: pointer;
}

.prev {
    left: 10px;
}

.next {
    right: 10px;
}

Kode CSS di atas mengatur lebar, tinggi, margin, padding, dan style lainnya untuk slider dan card.

3. JavaScript Logic

Terakhir, kita perlu menambahkan JavaScript untuk membuat slider menjadi dinamis. Berikut contohnya:

const sliderTrack = document.querySelector('.slider-track');
const cards = document.querySelectorAll('.card');
const prevBtn = document.querySelector('.prev');
const nextBtn = document.querySelector('.next');

let currentSlide = 0;

const slideWidth = cards[0].offsetWidth;

const updateSlider = () => {
    sliderTrack.style.transform = `translateX(-${currentSlide * slideWidth}px)`;
};

prevBtn.addEventListener('click', () => {
    currentSlide--;
    if (currentSlide < 0) {
        currentSlide = cards.length - 1;
    }
    updateSlider();
});

nextBtn.addEventListener('click', () => {
    currentSlide++;
    if (currentSlide >= cards.length) {
        currentSlide = 0;
    }
    updateSlider();
});

updateSlider(); // Inisialisasi slider saat halaman dimuat

Pada kode JavaScript di atas, kita melakukan:

1. Memilih elemen: Mendapatkan referensi ke elemen slider, card, tombol sebelumnya, dan tombol selanjutnya.
2. Mendeklarasikan variabel: Menentukan posisi slide saat ini ( currentSlide ), lebar card ( slideWidth ), dan fungsi updateSlider untuk memperbarui posisi card di slider.
3. Menangani event: Menambahkan event listener untuk tombol "previous" dan "next" yang akan mengubah nilai currentSlide dan menjalankan fungsi updateSlider.
4. Memanggil updateSlider: Memanggil updateSlider saat halaman dimuat untuk menginisialisasi slider pada slide pertama.

4. Kesimpulan

Dengan langkah-langkah di atas, Anda sudah bisa membuat card slider yang sederhana menggunakan JavaScript. Anda bisa menambahkan fitur-fitur tambahan seperti pagination, auto-play, atau animasi untuk membuat slider Anda lebih interaktif dan menarik.