GARAGENUM/ltqf
15
0
Fork 0
Code Issues 5 Pull Requests Packages Projects Releases 1 Wiki Activity

carousel in single spectacle

Browse Source
This commit is contained in:
Carmen Ngaka Iziasuma 2024-01-18 12:49:11 +01:00
parent b25cae9e76
commit de435f833f
2 changed files with 37 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
assets/css/single-spectacle.css
View File

@ -18,5 +18,7 @@
#galerie picture {
transition: all 2s ease;
}
transition:
visibility .01s,
transform 2s ease;
}

53
layouts/spectacles/single.html
View File

@ -154,37 +154,50 @@
document.addEventListener('DOMContentLoaded', function() {
var slider = document.querySelector('#galerie');
var items = slider.querySelectorAll('picture');
let itemWidth = items[0].offsetWidth;
let currentIndex = 0;
function moveItems() {
currentIndex = (currentIndex + 1);
let translationVector;
let modIndex;
if (currentIndex > items.length +1 ) {
modIndex = currentIndex % items.length;
} else {
modIndex = currentIndex;
}
modIndex = currentIndex % items.length;
// if (currentIndex > items.length +1 ) {
// modIndex = currentIndex % items.length;
// } else {
// modIndex = currentIndex;
// }
//modIndex = currentIndex;
items.forEach((item, index) => {
if (modIndex == 0) {
console.log("modulo = 0");
if (index <= items.length - 2) {
translationVector = 0;
item.style.visibility = "visible";
if (modIndex >= 3 ) {
if (index <= modIndex - 3) {
if (index == modIndex - 3) {
item.style.visibility = "hidden";
}
translationVector = (items.length - modIndex) * itemWidth;
} else {
translationVector = items.length * -600;
translationVector = itemWidth * -1 * modIndex;
}
} else if (index <= modIndex - 2) {
console.log("cas index <= modIndex - 2");
translationVector = (items.length - modIndex ) * 600;
} else {
console.log("autre cas");
translationVector = modIndex * -600;
}
} else if (modIndex < 3) {
if (index <= modIndex + (items.length - 3)) {
if ((index == modIndex + (items.length - 3)) && (currentIndex >= items.length)){
item.style.visibility = "hidden";
}
translationVector = itemWidth * -1 * modIndex;
} else {
if (currentIndex < items.length) {
translationVector = -1 * itemWidth * modIndex;
} else {
translationVector = -1 * (items.length + modIndex) * itemWidth;
}
}
};
//translationVector = itemWidth * modIndex * -1;
console.log(translationVector);
item.style.transform = `translateX(${translationVector}px)`;
//translationVector = (currentIndex % items.length) * -600;
});
}
if (items.length > 3){