3d Carousel Html Css Js

MUAZHAN

4 min read

·

Jun 28, 2024

23

Share

3D Carousel dengan HTML, CSS, dan JavaScript

3D Carousel adalah sebuah efek visual yang membuat objek-objek seperti gambar atau teks tampak berputar pada sumbu tiga dimensi. Efek ini sering digunakan pada website untuk menampilkan berbagai konten secara menarik dan interaktif. Di artikel ini, kita akan mempelajari cara membuat 3D Carousel dengan HTML, CSS, dan JavaScript.

1. Struktur HTML

Pertama, kita akan membuat struktur HTML untuk carousel. Kita akan menggunakan elemen div untuk membuat wadah carousel dan elemen img untuk menampilkan gambar.

2. Styling CSS

Selanjutnya, kita akan menggunakan CSS untuk men-styling carousel. Kita akan memberikan gaya 3D pada carousel, menentukan ukuran, dan mengatur posisi gambar.

.carousel {
  width: 400px;
  height: 300px;
  margin: 50px auto;
  perspective: 1000px;
  position: relative;
}

.carousel-item {
  width: 100%;
  height: 100%;
  position: absolute;
  backface-visibility: hidden;
  transition: transform 0.5s ease-in-out;
}

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

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

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

.carousel-item:nth-child(3) {
  transform: translateZ(150px) rotateY(-60deg);
}

3. Logika JavaScript

Terakhir, kita akan menggunakan JavaScript untuk membuat carousel berputar. Kita akan menggunakan addEventListener untuk mendeteksi klik pada tombol dan mengubah transform property dari setiap carousel-item.

const carousel = document.querySelector('.carousel');
const carouselItems = document.querySelectorAll('.carousel-item');
const prevBtn = document.querySelector('.prev-btn');
const nextBtn = document.querySelector('.next-btn');

let currentIndex = 0;

function rotateCarousel(direction) {
  currentIndex += direction;
  if (currentIndex < 0) currentIndex = carouselItems.length - 1;
  if (currentIndex > carouselItems.length - 1) currentIndex = 0;

  const angle = currentIndex * 60;

  carouselItems.forEach((item, index) => {
    item.style.transform = `translateZ(${index === currentIndex ? 300 : 150}px) rotateY(${angle + (index - currentIndex) * 60}deg)`;
  });
}

prevBtn.addEventListener('click', () => rotateCarousel(-1));
nextBtn.addEventListener('click', () => rotateCarousel(1));

Dengan kode HTML, CSS, dan JavaScript di atas, kita berhasil membuat 3D Carousel yang sederhana. Anda dapat memodifikasi kode ini untuk menambahkan lebih banyak gambar, mengatur kecepatan rotasi, dan menambahkan tombol kontrol lainnya.