How to make 3d Carousel?

Design help Layout & Design
1

Hello there,

Can anyone share a resource or tutorial on how to make this kind of slider?

slider
slider762Ă—431 51 KB

Your help is appreciated. Thank you,

2

hi @vivekjamwal91 keyword you should use in your favourite browser is “3d carousel”

there are many ways how to create it. here is one simple example that uses SwiperJS but there are many other ways. I believe you can find some examples in WF library “made in Weblow”

https://codepen.io/search/pens?q=3d+carousel

1 Like
3

Thank you Stan. That’s what I was looking for.

4

carousels
A lot of way to create a 3d carousels, the above one I creat using a swiperJs, beside this still many ways available to built it. you just need to explore it on google.

1 Like
5

Thank you Chris, I was searching for wrong keywords in google until someone told its called a 3D carousel.

6

To create a 3D carousel, you’ll need to combine HTML, CSS, and JavaScript. Here’s a step-by-step guide to help you build a basic 3D carousel:

  1. Set up the HTML structure:
<div class="carousel">
  <div class="carousel-inner">
    <div class="carousel-item"></div>
    <div class="carousel-item"></div>
    <div class="carousel-item"></div>
    <!-- Add more carousel items as needed -->
  </div>
</div>
  1. Style the carousel using CSS:
.carousel {
  width: 300px; /* Adjust the width to your desired size */
  height: 200px; /* Adjust the height to your desired size */
  perspective: 1000px;
}

.carousel-inner {
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 1s;
}

.carousel-item {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #ccc; /* Adjust the background color as desired */
  transform-style: preserve-3d;
  backface-visibility: hidden;
}
  1. Add JavaScript for carousel functionality:
// Variables
const carousel = document.querySelector('.carousel');
const carouselInner = document.querySelector('.carousel-inner');
const carouselItems = document.querySelectorAll('.carousel-item');
let currentIndex = 0;
let rotateY = 0;

// Function to rotate the carousel
function rotateCarousel() {
  rotateY = -currentIndex * 60; /* Adjust the rotation angle as desired */
  carouselInner.style.transform = `translateZ(-200px) rotateY(${rotateY}deg)`;
}

// Function to handle next button click
function next() {
  currentIndex++;
  if (currentIndex >= carouselItems.length) {
    currentIndex = 0;
  }
  rotateCarousel();
}

// Function to handle previous button click
function previous() {
  currentIndex--;
  if (currentIndex < 0) {
    currentIndex = carouselItems.length - 1;
  }
  rotateCarousel();
}

// Attach event listeners to next and previous buttons
document.getElementById('next-btn').addEventListener('click', next);
document.getElementById('prev-btn').addEventListener('click', previous);
  1. Finally, add the next and previous buttons in your HTML: 
<button id="prev-btn">Previous</button>
<button id="next-btn">Next</button>

With these steps, you should have a basic 3D carousel. You can customize the carousel’s appearance by adjusting the CSS properties and adding content to the carousel items. Remember to link the CSS and JavaScript files to your HTML file appropriately.

1 Like
7

Your help is appreciated. Thanks a ton!