3d Carousel Html Css Javascript

MUAZHAN

5 min read

·

Jun 22, 2024

31

Share

Membuat Carousel 3D dengan HTML, CSS, dan JavaScript

Carousel 3D adalah cara yang menarik untuk menampilkan konten secara dinamis dan interaktif. Dalam artikel ini, kita akan membangun carousel 3D sederhana menggunakan HTML, CSS, dan JavaScript.

1. Struktur HTML

Pertama, kita perlu membangun struktur HTML dasar untuk carousel. Berikut contohnya:

Dalam kode di atas:

• carousel-container adalah wadah untuk carousel.
• carousel adalah elemen utama yang akan berisi item-item carousel.
• item adalah elemen yang mewakili setiap item di carousel, berisi gambar dalam contoh ini.

2. Styling dengan CSS

Selanjutnya, kita akan menata carousel menggunakan CSS. Berikut adalah contoh CSS untuk membuat carousel 3D:

.carousel-container {
    width: 500px;
    height: 300px;
    margin: 50px auto;
    perspective: 1000px;
}

.carousel {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.5s ease;
}

.item {
    width: 100%;
    height: 100%;
    position: absolute;
    backface-visibility: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.item img {
    max-width: 100%;
    max-height: 100%;
}

.item:nth-child(1) {
    transform: rotateY(0deg) translateZ(300px);
}

.item:nth-child(2) {
    transform: rotateY(60deg) translateZ(300px);
}

.item:nth-child(3) {
    transform: rotateY(120deg) translateZ(300px);
}

Dalam kode CSS di atas:

• perspective digunakan untuk memberikan efek 3D pada carousel.
• transform-style: preserve-3d memastikan bahwa anak-anak elemen carousel tetap berada dalam ruang 3D.
• rotateY dan translateZ digunakan untuk memutar dan memindahkan item-item carousel pada ruang 3D.

3. Animasi dengan JavaScript

Terakhir, kita akan menambahkan JavaScript untuk membuat animasi dan interaksi pada carousel. Berikut contohnya:

const carousel = document.querySelector('.carousel');
const items = document.querySelectorAll('.item');
const nextButton = document.querySelector('.next');
const prevButton = document.querySelector('.prev');

let currentItem = 0;

nextButton.addEventListener('click', () => {
  currentItem = (currentItem + 1) % items.length;
  updateCarousel();
});

prevButton.addEventListener('click', () => {
  currentItem = (currentItem - 1 + items.length) % items.length;
  updateCarousel();
});

function updateCarousel() {
  const angle = currentItem * 60;
  carousel.style.transform = `rotateY(${angle}deg)`;
}

Dalam kode JavaScript di atas:

• Kita memilih elemen carousel, item, dan tombol navigasi.
• Kita mendeklarasikan variabel currentItem untuk melacak item yang aktif.
• Event listener ditambahkan ke tombol navigasi untuk mengubah currentItem dan memanggil fungsi updateCarousel().
• updateCarousel() menghitung sudut rotasi untuk carousel dan memperbarui gaya transformasi carousel.

4. Menjalankan Carousel

Sekarang Anda memiliki semua kode yang diperlukan untuk membuat carousel 3D. Simpan kode HTML, CSS, dan JavaScript dalam file terpisah (index.html, style.css, script.js), dan buka file HTML di browser Anda. Anda akan melihat carousel 3D yang dapat diputar menggunakan tombol navigasi.

Kesimpulan

Dalam artikel ini, kita telah mempelajari cara membuat carousel 3D sederhana menggunakan HTML, CSS, dan JavaScript. Anda dapat memperluas kode ini dengan menambahkan fitur-fitur tambahan seperti efek animasi yang lebih canggih, navigasi otomatis, dan desain yang lebih menarik.