3d Carousel Javascript

MUAZHAN

4 min read

·

Jun 22, 2024

22

Share

Membuat Carousel 3D dengan JavaScript

Carousel 3D adalah cara yang menarik dan interaktif untuk menampilkan konten seperti gambar, produk, atau cerita. Dalam artikel ini, kita akan mempelajari cara membuat carousel 3D sederhana menggunakan JavaScript, HTML, dan CSS.

1. Struktur HTML

Pertama, kita perlu membuat struktur HTML dasar untuk carousel kita. Kita akan menggunakan elemen <div> untuk wadah carousel dan elemen <img> untuk setiap slide:

2. Styling dengan CSS

Selanjutnya, kita perlu menambahkan beberapa styling dengan CSS untuk membuat carousel kita terlihat seperti carousel 3D. Kita akan menggunakan transformasi CSS untuk membuat efek 3D:

.carousel-container {
  width: 400px;
  height: 300px;
  margin: 50px auto;
  perspective: 1000px; /* Efek perspektif */
}

.carousel {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d; /* Aktifkan transformasi 3D */
  transition: transform 0.5s ease; /* Transisi halus */
}

.slide {
  width: 100%;
  height: 100%;
  position: absolute;
  backface-visibility: hidden; /* Sembunyikan sisi belakang slide */
  overflow: hidden;
}

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

/* Posisi slide */
.slide:nth-child(1) {
  transform: rotateY(0deg) translateZ(300px);
}
.slide:nth-child(2) {
  transform: rotateY(60deg) translateZ(300px);
}
.slide:nth-child(3) {
  transform: rotateY(120deg) translateZ(300px);
}
.slide:nth-child(4) {
  transform: rotateY(180deg) translateZ(300px);
}

3. Animasi dengan JavaScript

Terakhir, kita akan menggunakan JavaScript untuk membuat animasi carousel. Kita akan menggunakan event click untuk mengontrol pergerakan carousel:

const carousel = document.querySelector('.carousel');
const slides = document.querySelectorAll('.slide');
let currentSlide = 0;

// Fungsi untuk memindahkan ke slide berikutnya
const nextSlide = () => {
  currentSlide = (currentSlide + 1) % slides.length;
  const rotateY = currentSlide * 60; // Rotasi untuk setiap slide
  carousel.style.transform = `rotateY(${rotateY}deg)`;
};

// Fungsi untuk memindahkan ke slide sebelumnya
const prevSlide = () => {
  currentSlide = (currentSlide - 1 + slides.length) % slides.length;
  const rotateY = currentSlide * 60; // Rotasi untuk setiap slide
  carousel.style.transform = `rotateY(${rotateY}deg)`;
};

// Tambahkan event listener untuk tombol "Next" dan "Previous" (jika ada)
// ...

// Contoh: 
// nextButton.addEventListener('click', nextSlide);
// prevButton.addEventListener('click', prevSlide);

Kesimpulan

Dengan kode HTML, CSS, dan JavaScript ini, Anda dapat membuat carousel 3D sederhana. Anda dapat menyesuaikan styling, animasi, dan jumlah slide sesuai kebutuhan Anda. Selamat bereksperimen!