Author: | loveneet4 |
---|---|
Views Total: | 36,314 views |
Official Page: | Go to website |
Last Update: | December 8, 2018 |
License: | MIT |
Preview:

Description:
This is a very basic 3D coverflow style carousel/rotator implemented in pure JavaScript and CSS/CSS3.
How to use it:
Place the core stylesheet in the head section of the html document.
<link rel="stylesheet" href="style.css">
Add items together with the text content next/prev arrows to the carousel.
<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>
The JavaScript to enable the next/prev arrows to switch between items.
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); }
most useful piece of text ever
where’s the css file dumbarse?
unfortunately not working with mobile devices