Carrusel 3D básico en JavaScript puro

Vista prévia

Descripción

Este es un carrusel/rotador estilo 3D CoverFlow muy básico implementado en JavaScript puro y CSS/CSS3.

Funcionamiento

Coloque la hoja de estilo principal en la sección head del documento HTML.

<link rel="stylesheet" href="style.css">

Agregue elementos junto con las flechas siguiente/anterior del contenido de texto al carrusel.

<div class="container">

<div class="button" onclick="shiftLeft()"><img src="https://image.ibb.co/mRsEb7/left_arrow.png" alt=""></div>

<div class="cards-wrapper">



<ul class="cards__container">





<li class="box" style="background-color:red">box 1</li>





<li class="box">box 2</li>





<li class="box">box 3</li>





<li class="box">box 4</li>





<li class="box">box 5</li>





<li class="box box--hide">box 6</li>





<li class="box box--hide">box 7</li>



</ul>



<div class="card__text-content">





<h3 class="card__title">The Famous Five</h3>





<div class="card__summary">The Famous Five is a series of children's adventure novels written by English author Enid Blyton. The first book, Five on a Treasure Island, was published in 1942.</div>



</div>

</div>

<div class="button" onclick="shiftRight()"><img src="https://image.ibb.co/dfPSw7/right_arrow.png" alt=""></div>
</div>

El código JavaScript para habilitar las flechas NEXT/PREV para alternar entre los elementos.

function shiftLeft() {
const boxes = document.querySelectorAll(".box");
const tmpNode = boxes[0];
boxes[0].className = "box move-out-from-left";

setTimeout(function() {


if (boxes.length > 5) {




tmpNode.classList.add("box--hide");




boxes[5].className = "box move-to-position5-from-left";


}


boxes[1].className = "box move-to-position1-from-left";


boxes[2].className = "box move-to-position2-from-left";


boxes[3].className = "box move-to-position3-from-left";


boxes[4].className = "box move-to-position4-from-left";


boxes[0].remove();



document.querySelector(".cards__container").appendChild(tmpNode);

}, 500);

}

function shiftRight() {
const boxes = document.querySelectorAll(".box");
boxes[4].className = "box move-out-from-right";
setTimeout(function() {


const noOfCards = boxes.length;


if (noOfCards > 4) {




boxes[4].className = "box box--hide";


}



const tmpNode = boxes[noOfCards - 1];


tmpNode.classList.remove("box--hide");


boxes[noOfCards - 1].remove();


let parentObj = document.querySelector(".cards__container");


parentObj.insertBefore(tmpNode, parentObj.firstChild);


tmpNode.className = "box move-to-position1-from-right";


boxes[0].className = "box move-to-position2-from-right";


boxes[1].className = "box move-to-position3-from-right";


boxes[2].className = "box move-to-position4-from-right";


boxes[3].className = "box move-to-position5-from-right";
}, 500);

}