Carrusel de IMAGENES 3D con Elementor

CSS

				
					.gallery-item {
    opacity: 0;
    position: absolute;
    transition: all 0.3s ease-in-out;
    z-index: 0;
    border-bottom: 15px;
    background-size: contain;
}

.gallery-item-1 {
    left: 25%;
    opacity: .4;
    transform: translateX(-50%);
}

.gallery-item-2, .gallert-item-4 {
    opacity: .8;
    z-index: 1;
}

.gallery-item-2 {
    left: 35%;
    transform: translateX(-50%);
}

.gallery-item-3 {
    box-shadow: -2px 5px 33px 6px rgb(0 0 0 / 35%);
    opacity: 1;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 25px;
    z-index: 2;
}

.gallery-item-4 {
    left: 65%;
    opacity: .8;
    transform: translateX(-50%);
}

.gallery-item-5 {
    left: 75%;
    opacity: .4;
    transform: translateX(-50%);
}

.gallery-controls button {
    background-color: transparent;
    border: 0;
    cursor: pointer;
    font-size: 30px;
    margin: 0 50px;
    padding: 0 12px;
    text-transform: capitalize;
   outline: none;
    display:none;
}

.gallery-controls-button:focus {
    outline: none;
}

.gallery-controls-previous {
    position: relative;
}

.gallery-controls-previous:before {
    border: solid #000;
    border-width: 0 5px 5px 0;
    content: '';
    display: inline-block;
    height: 5px;
    left: -30px;
    padding: 10px;
    position: absolute;
   top: -10%;
    transform: rotate(135deg) translateY(-50%);
transition: left 0.15s ease-in-out;
   width: 5px;
}



.gallery-controls-next{
	position: relative;
}

.gallery-controls-next:before{
	    border: solid #000;
    border-width: 0 5px 5px 0;
    content: '';
    display: inline-block;
    height: 5px;
    padding: 10px;
    position: absolute;
   right: -30px;	
   top: 40%;
    transform: rotate(-45deg) translateY(-50%);
transition: right 0.15s ease-in-out;
   width: 5px;
}


.gallery-nav{

	bottom: -15px;
	list-style: none;
padding: 0;
position: absolute;
width: 100%
}


.gallery-nav li {
	background: #ccc;
border-radius: 50%;
height: 10px;
margin: 0 16px;
width: 10px;

}

.gallery-nav li.gallery-item-selected{
	background: #555;
}

JAVASCRIPT

				
					    <script>

 const galleryContainer = document.querySelector('.gallery-container');
const galleryControlsContainer = document.querySelector('.gallery-controls');
const galleryControls = ['previous','next'];
const galleryItems = document.querySelectorAll('.gallery-item');

class Carousel {
    constructor (container, items, controls){
        this.carouselContainer = container;
        this.carouselArray = [...items];
        this.carouselControls = controls;
    }
    start() {
        this.updateGallery();
        this.setControls();
        this.useControls();
    }
    updateGallery (){
        this.carouselArray.forEach(im => {
            im.classList.remove('gallery-item-1');
            im.classList.remove('gallery-item-2');
            im.classList.remove('gallery-item-3');
            im.classList.remove('gallery-item-4');
            im.classList.remove('gallery-item-5');
        });

        this.carouselArray.slice(0,5).forEach((im, i) => {
            im.classList.add(`gallery-item-${i+1}`);
        });
    }


    setCurrentState(direction){
        if(direction.className == 'gallery-controls-previous'){
            this.carouselArray.unshift(this.carouselArray.pop());
        }else {
            this.carouselArray.push(this.carouselArray.shift());
        }
        this.updateGallery();
    }
    setControls(){
        this.carouselControls.forEach(control => {
            galleryControlsContainer.appendChild(document.createElement('button')).className = `gallery-controls-${control}`;
            document.querySelector(`.gallery-controls-${control}`).innerText = control;
        });
    }

    useControls(){
        const triggers = [...galleryControlsContainer.childNodes];
        triggers.forEach(control => {
            control.addEventListener('click', e =>{
                e.preventDefault();
                this.setCurrentState(control);
            });
        });
    }
}

const carouselExample = new Carousel(galleryContainer,galleryItems, galleryControls);
carouselExample.start();

// Add event listeners for the previous and next buttons
const prevButton = document.querySelector('.gallery-controls-previous');
const nextButton = document.querySelector('.gallery-controls-next');

prevButton.addEventListener('click', () => carouselExample.setCurrentState(prevButton));
nextButton.addEventListener('click', () => carouselExample.setCurrentState(nextButton));

// Optional: Auto slide feature
let autoSlide = setInterval(() => carouselExample.setCurrentState(nextButton), 3000);

// Optional: Pause and play feature
const pauseButton = document.querySelector('.pause-play');
pauseButton.addEventListener('click', () => {
  if (pauseButton.innerText === 'Pause') {
    clearInterval(autoSlide);
    pauseButton.innerText = 'Play';
  } else {
    autoSlide = setInterval(() => carouselExample.setCurrentState(nextButton), 3000);
    pauseButton.innerText = 'Pause';
  }
});

    </script>