Slider automático de tarjeta giratoria básica con JavaScript y CSS3

Vista prévia

Descripción

Un componente de control deslizante de JavaScript puro que utiliza transiciones y transformaciones CSS3 para rotar a través de un grupo de elementos de tarjeta mientras resalta la diapositiva actual.

Funcionamiento

Añada el elemento de tarjeta al deslizador y especifique la diapositiva inicial utilizando la clase CSS ' Active '.

<div class="container">

<div class="card"></div>

<div class="card active"></div>

<div class="card"></div>

<div class="card"></div>
</div>
<script>

Los estilos CSS básicos para el deslizador de la tarjeta.

.container {

position: relative;

background: black;

max-width: 650px;

min-width: 650px;

height: 410px;

margin: 0 auto;

overflow: hidden;
}

.card {

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

display: inline-block;

width: 340px;

height: 300px;

background: red;

margin: 5px;

transition: transform 0.5s, background 0.3s ease-in-out;
}

.reset .card { transition: none; }

Establezca los estilos CSS en la diapositiva activa:

.active {

background: yellow;

transform: translate(-50%, -50%) scale(1.1) !important;
}

Aplique efectos de transición suaves a las diapositivas al deslizarse.

.card:nth-child(1) { transform: translate(-170%, -50%); }

.card:nth-child(2) { transform: translate(-50%, -50%); }

.card:nth-child(3) { transform: translate(70%, -50%); }

.card:nth-child(4) { transform: translate(190%, -50%); }

.next .card:nth-child(1) { transform: translate(-290%, -50%); }

.next .card:nth-child(2) { transform: translate(-170%, -50%); }

.next .card:nth-child(3) { transform: translate(-50%, -50%); }

.next .card:nth-child(4) { transform: translate(70%, -50%); }

.reset .card .card:nth-child(1) { transform: translate(-170%, -50%); }

.reset .card .card:nth-child(2) { transform: translate(-50%, -50%); }

.reset .card .card:nth-child(3) { transform: translate(70%, -50%); }

.reset .card .card:nth-child(4) { transform: translate(190%, -50%); }

El principal JavaScript para activar el deslizador de la tarjeta.

let holder = document.querySelectorAll('.container')[0],


cards = document.querySelectorAll('.card');

let preActiveCard = cards[1];
let nextActiveCard = cards[2];

function scrollLeft() {

holder.classList.remove('next');

holder.classList.remove('reset');

holder.classList.add('next');



preActiveCard.classList.remove('active');

nextActiveCard.classList.add('active');

setTimeout(reset, 600);
}

function reset() {

holder.classList.remove('next');

holder.classList.add('reset');

preActiveCard.classList.add('active');

nextActiveCard.classList.remove('active');
}

setInterval(scrollLeft, 1500);