63 lines
1.3 KiB
JavaScript
63 lines
1.3 KiB
JavaScript
|
|
const coursesNode = document.querySelector(".courses__container");
|
|
|
|
|
|
const itemArrayNode = document.querySelectorAll(".tape__item");
|
|
|
|
|
|
const tapeNode = document.querySelector(".courses__container__tape");
|
|
|
|
|
|
const resize = () => {
|
|
|
|
|
|
var coursesWidth = coursesNode.clientWidth;
|
|
|
|
|
|
|
|
var tapelength = coursesWidth * itemArrayNode.length;
|
|
|
|
|
|
|
|
tapeNode.style.width = tapelength + "px";
|
|
|
|
for (let i = 0; i < itemArrayNode.length; i++) {
|
|
|
|
itemArrayNode[i].style.width = coursesWidth + "px";
|
|
}
|
|
};
|
|
|
|
resize();
|
|
|
|
window.addEventListener("resize", function () {
|
|
resize();
|
|
tapeNode.style.transform =
|
|
"translate(-" + coursesNode.clientWidth * position + "px)";
|
|
});
|
|
|
|
|
|
const buttonLeftNode = document.querySelector(".button__left");
|
|
const buttonRightNode = document.querySelector(".button__right");
|
|
|
|
|
|
let position = 0;
|
|
|
|
buttonRightNode.addEventListener("click", () => {
|
|
position++;
|
|
if (position >= itemArrayNode.length) {
|
|
position = 0;
|
|
}
|
|
tapeNode.style.transform =
|
|
"translate(-" + coursesNode.clientWidth * position + "px)";
|
|
});
|
|
|
|
buttonLeftNode.addEventListener("click", () => {
|
|
position--;
|
|
if (position < 0) {
|
|
position = itemArrayNode.length;
|
|
position--;
|
|
}
|
|
tapeNode.style.transform =
|
|
"translate(-" + coursesNode.clientWidth * position + "px)";
|
|
});
|