Card slider JS

by 25058214

HTML

<div class="cards-box_wp">
<div class="cards-box">
    <div class="card">
        <div class="content-placeholder">
            <div class="row">
                <div class="img" data-letter="N"></div>
                <div class="img-text"></div>
            </div>
            <div class="text text--l"></div>
            <div class="text text--m"></div>
            <div class="text text--s"></div>
            <div class="btn"></div>
        </div>
    </div>
    <div class="card">
        <div class="content-placeholder">
            <div class="row">
                <div class="img" data-letter="M"></div>
                <div class="img-text"></div>
            </div>
            <div class="text text--l"></div>
            <div class="text text--m"></div>
            <div class="text text--s"></div>
            <div class="btn"></div>
        </div>
    </div>
    <div class="card">
        <div class="content-placeholder">
            <div class="row">
                <div class="img" data-letter="K"></div>
                <div class="img-text"></div>
            </div>
            <div class="text text--l"></div>
            <div class="text text--m"></div>
            <div class="text text--s"></div>
            <div class="btn"></div>
        </div>
    </div>
    <div class="card">
        <div class="content-placeholder">
            <div class="row">
                <div class="img" data-letter="G"></div>
                <div class="img-text"></div>
            </div>
            <div class="text text--l"></div>
            <div class="text text--m"></div>
            <div class="text text--s"></div>
            <div class="btn">
              <a href="#2">Wow</a>
            </div>
        </div>
    </div>
<div class="cards__box_buttons">
<button id="prev"><svg version="1.1" id="fi_271220" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 492 492" style="enable-background:new 0 0 492 492;"...

CSS

.cards-box_wp{
  padding:30px;
      width: fit-content;
    margin: auto;
}
.cards__box_buttons{
	position:absolute;
	top:50%;
	left:0;
	width:100%;
	display:flex;
      justify-content: space-between;
}
.cards-box {
  position: relative;
  display: flex;
   height: 355px;
   width: 435px;
   margin:0 50px;
}

.cards-box .card {
	width: 400px;
	max-width: 100%;
	background: #f7fffd;
	border-radius: 14px;
	cursor: pointer;
  	position: absolute;
	top: 0;
	left: 0;
	transition: all 0.8s cubic-bezier(0.18, 0.98, 0.45, 1);
	box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.07);
}

.cards__box_buttons {
    position: absolute;
    top: 50%;
    left: -50px;
    width: calc(100% + 100px);
    display: flex;
    transform: translateY(-50%);
}
.cards__box_buttons button{
  background:transparent;
  border:0;
}
.cards__box_buttons svg{
  width:30px;
  height:auto;
}
.cards-box .card:not(.hide)[data-slide='0'] {
	transform: translate(0px, 0px) scale(1);
	z-index: 6;
	opacity: 1;
}

.cards-box .card:not(.hide)[data-slide='1'] {
	transform: translate(15px, 15px) scale(0.975);
	z-index: 5;
	opacity: 0.9;
}

.cards-box .card:not(.hide)[data-slide='2'] {
	transform: translate(30px, 30px) scale(0.95);
	z-index: 4;
	opacity: 0.8;
}

.cards-box .card:not(.hide)[data-slide='3'] {
	transform: translate(45px, 45px) scale(0.925);
	z-index: 3;
	opacity: 0.7;
}

.cards-box .card:not(.hide)[data-slide='4'] {
	transform: translate(60px, 60px) scale(0.9);
	z-index: 2;
	opacity: 0.6;
}

.cards-box .card:not(.hide)[data-slide='5'] {
	transform: translate(75px, 75px) scale(0.875);
	z-index: 1;
	opacity: 0.5;
}

.cards-box .card:not(.hide)[data-slide='0'] {
	transition: all 0.32s cubic-bezier(0.18, 0.98, 0.45, 1);
}

.content-placeholder {
	padding: 14px 18px 20px;
}

.content-placeholder .row {
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	margin-bottom: calc(.8rem + 0.4vw);
}

.content-placeholder .row .img {
	flex-shrink: 0;
	position: relative;
	margin-right: 20px;
	background:...

JavaScript

window.onload = () => {
    let sliderImagesBox = document.querySelectorAll('.cards-box');
    sliderImagesBox.forEach(el => {
        let imageNodes = el.querySelectorAll('.card');
        let arrIndexes = []; // Index array
        (() => {
            let start = 0;
            while (imageNodes.length > start) {
                arrIndexes.push(start++);
            }
        })();

        let setIndex = (arr) => {
            for(let i = 0; i < imageNodes.length; i++) {
                imageNodes[i].dataset.slide = arr[i]; // Set indexes
            }
        };

        // Función para avanzar al siguiente slide
        const nextSlide = () => {
            arrIndexes.unshift(arrIndexes.pop());
            setIndex(arrIndexes);
        };

        // Función para retroceder al slide anterior
        const prevSlide = () => {
            arrIndexes.push(arrIndexes.shift());
            setIndex(arrIndexes);
        };

        // Añadir evento de clic al contenedor para avanzar al siguiente slide
        el.addEventListener('click', nextSlide);

        // Botones de navegación
        const btnPrev = document.getElementById('prev');
        const btnNext = document.getElementById('next');

        btnPrev.addEventListener('click', (event) => {
            event.stopPropagation(); // Detener la propagación para evitar que se active el evento del contenedor
            prevSlide();
        });

        btnNext.addEventListener('click', (event) => {
            event.stopPropagation(); // Detener la propagación para evitar que se active el evento del contenedor
            nextSlide();
        });

        // La primera adición de índices
        setIndex(arrIndexes);

        // Autoplay
        let autoplayInterval = 3000; // 3000 milisegundos (3 segundos)
        let interval = setInterval(nextSlide, autoplayInterval);

        // Funciones para detener y reanudar el autoplay
        const stopAutoplay = () => clearInterval(interval);
        const...