Carousel Html Css Javascript Codepen

MUAZHAN

5 min read

·

Jun 24, 2024

36

Share

Membuat Carousel Sederhana dengan HTML, CSS, dan JavaScript di CodePen

Carousel merupakan elemen web interaktif yang menampilkan serangkaian gambar atau konten secara bergantian. Dalam artikel ini, kita akan membangun carousel sederhana dengan menggunakan HTML, CSS, dan JavaScript.

HTML Struktur

Pertama, kita akan membuat struktur HTML dasar untuk carousel kita:

    
    
    
    


    

        

            

                
            
            

                
            
            

                
            
        
        Prev
        Next
    

    

Penjelasan:

• carousel-container: Container utama untuk carousel.
• carousel-track: Container untuk slide yang akan bergerak.
• carousel-slide: Setiap slide berisi gambar atau konten yang akan ditampilkan.
• prev, next: Tombol navigasi untuk mengontrol pergerakan slide.

CSS Styling

Berikut adalah contoh CSS untuk menata tampilan carousel:

.carousel-container {
    width: 500px;
    height: 300px;
    overflow: hidden;
    position: relative;
    margin: 50px auto;
}

.carousel-track {
    display: flex;
    transition: transform 0.5s ease-in-out;
}

.carousel-slide {
    width: 500px;
    height: 300px;
}

.carousel-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

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

.prev {
    left: 10px;
}

.next {
    right: 10px;
}

Penjelasan:

• CSS mengatur ukuran, posisi, dan tampilan carousel dan slide.
• overflow: hidden: Untuk menyembunyikan bagian slide yang keluar dari container.
• transition: Untuk transisi pergerakan slide.
• object-fit: cover: Untuk menyesuaikan gambar ke dalam slide.

JavaScript Logic

Terakhir, kita akan menambahkan JavaScript untuk mengontrol pergerakan slide:

const track = document.querySelector('.carousel-track');
const slides = Array.from(document.querySelectorAll('.carousel-slide'));
const prevButton = document.querySelector('.prev');
const nextButton = document.querySelector('.next');

const slideWidth = slides[0].offsetWidth;

let currentIndex = 0;

const updateCarousel = () => {
  const offset = currentIndex * slideWidth;
  track.style.transform = `translateX(-${offset}px)`;
};

const handlePrev = () => {
  currentIndex = (currentIndex - 1 + slides.length) % slides.length;
  updateCarousel();
};

const handleNext = () => {
  currentIndex = (currentIndex + 1) % slides.length;
  updateCarousel();
};

prevButton.addEventListener('click', handlePrev);
nextButton.addEventListener('click', handleNext);

updateCarousel();

Penjelasan:

• JavaScript mengambil elemen DOM yang diperlukan.
• currentIndex: Melacak index slide saat ini.
• updateCarousel: Mengatur posisi slide berdasarkan index saat ini.
• handlePrev, handleNext: Fungsi untuk mengendalikan pergerakan slide.
• Event listener ditambahkan pada tombol untuk menjalankan fungsi yang sesuai.

Cara Menggunakan CodePen

1. Buka dan buat akun (jika belum).
2. Buat proyek baru dan tambahkan HTML, CSS, dan JavaScript seperti yang dijelaskan di atas.
3. Ganti gambar placeholder dengan gambar Anda sendiri.
4. Anda dapat menyesuaikan CSS dan JavaScript untuk menyesuaikan tampilan dan fungsionalitas carousel Anda.

Catatan:

Kode ini hanya menampilkan carousel sederhana. Anda dapat menambahkan fitur tambahan seperti:

• Indikator slide.
• Autoplay.
• Transisi animasi yang lebih kompleks.

Anda dapat menemukan berbagai tutorial dan contoh carousel yang lebih kompleks di internet.