3d Carousel Slider Javascript Codepen

MUAZHAN

4 min read

·

Jun 22, 2024

37

Share

3D Carousel Slider with JavaScript: A CodePen Example

This article will guide you through the implementation of a 3D carousel slider using JavaScript, showcasing a practical example on CodePen.

Understanding the Concept

A 3D carousel slider presents a series of images or content in a visually appealing, three-dimensional manner. Unlike traditional carousels, it creates an immersive experience by allowing users to rotate and explore content in a 3D space.

JavaScript Implementation with CodePen

Here's a breakdown of the JavaScript code used to create the 3D carousel slider:

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

let currentIndex = 0;
let isDragging = false;
let startX = 0;
let scrollLeft = 0;

carouselItems.forEach((item, index) => {
  item.style.width = `${100 / carouselItems.length}%`;
});

const handleDragStart = (e) => {
  isDragging = true;
  startX = e.pageX - scrollLeft;
};

const handleDragMove = (e) => {
  if (!isDragging) return;
  scrollLeft = e.pageX - startX;
  carousel.style.transform = `translateX(${scrollLeft}px)`;
};

const handleDragEnd = () => {
  isDragging = false;
  const scrollWidth = carousel.offsetWidth;
  const moveDistance = scrollWidth * 0.4; // 40% of the carousel width

  if (scrollLeft > moveDistance) {
    currentIndex--;
  } else if (scrollLeft < -moveDistance) {
    currentIndex++;
  }

  currentIndex = Math.max(0, Math.min(currentIndex, carouselItems.length - 1));

  carousel.style.transition = 'transform 0.3s ease-in-out';
  carousel.style.transform = `translateX(-${currentIndex * scrollWidth}px)`;
  scrollLeft = -currentIndex * scrollWidth;
};

prevBtn.addEventListener('click', () => {
  currentIndex = (currentIndex - 1 + carouselItems.length) % carouselItems.length;
  carousel.style.transition = 'transform 0.3s ease-in-out';
  carousel.style.transform = `translateX(-${currentIndex * carousel.offsetWidth}px)`;
  scrollLeft = -currentIndex * carousel.offsetWidth;
});

nextBtn.addEventListener('click', () => {
  currentIndex = (currentIndex + 1) % carouselItems.length;
  carousel.style.transition = 'transform 0.3s ease-in-out';
  carousel.style.transform = `translateX(-${currentIndex * carousel.offsetWidth}px)`;
  scrollLeft = -currentIndex * carousel.offsetWidth;
});

carousel.addEventListener('mousedown', handleDragStart);
carousel.addEventListener('mousemove', handleDragMove);
carousel.addEventListener('mouseup', handleDragEnd);
carousel.addEventListener('mouseleave', handleDragEnd);

This JavaScript code uses the following techniques:

• CSS Transforms: The code utilizes transform: translateX to create the sliding effect.
• Event Listeners: It uses event listeners to capture mouse events (mousedown, mousemove, mouseup, mouseleave) and button clicks.
• Scroll Width Calculation: It dynamically calculates the carousel's width to ensure smooth transitions.
• Drag-and-Drop Functionality: The code implements drag-and-drop functionality, allowing the user to interact with the carousel slider.

CodePen Example

You can view the complete code and see the 3D carousel slider in action on this CodePen: [https://codepen.io/your-username/pen/your-pen-id] (Replace the bracketed parts with your actual CodePen username and pen ID).

Conclusion

This article provides a clear and concise guide to creating a 3D carousel slider using JavaScript. The CodePen example demonstrates the implementation with a practical demonstration, and the explanations provide insights into the underlying techniques. By understanding these concepts, you can implement your own 3D carousel sliders, creating engaging and interactive user experiences.