box 1
box 2
box 3
box 4
box 5
box 6
box 7
The Famous Five
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.
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);
}
