carousel done
parent
de435f833f
commit
89d7d3c9fe
@ -0,0 +1,25 @@
|
|||||||
|
document.addEventListener('DOMContentLoaded', function() {
|
||||||
|
let currentIndex = 0;
|
||||||
|
const items = document.querySelectorAll('.newscarousel .newscarousel-item');
|
||||||
|
const totalItems = items.length;
|
||||||
|
|
||||||
|
function moveToNextItem() {
|
||||||
|
currentIndex = (currentIndex + 1) % totalItems;
|
||||||
|
updateCarousel();
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateCarousel() {
|
||||||
|
items.forEach((item, index) => {
|
||||||
|
item.classList.remove('is-block');
|
||||||
|
item.classList.add('is-hidden');
|
||||||
|
if (index === currentIndex) {
|
||||||
|
item.classList.remove('is-hidden')
|
||||||
|
item.classList.add('is-block');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
const interval = 5000; // 3000ms = 3 seconds
|
||||||
|
setInterval(moveToNextItem, interval);
|
||||||
|
|
||||||
|
updateCarousel();
|
||||||
|
});
|
@ -0,0 +1,39 @@
|
|||||||
|
document.addEventListener('DOMContentLoaded', function() {
|
||||||
|
let currentIndex = 0;
|
||||||
|
const items = document.querySelectorAll('.carousel-item');
|
||||||
|
const totalItems = items.length;
|
||||||
|
|
||||||
|
items.forEach((item, index) => {
|
||||||
|
if ( index !== 0 ) {
|
||||||
|
item.classList.add('is-invisible')
|
||||||
|
item.style.transform = "translateX(100%)";
|
||||||
|
} else {
|
||||||
|
item.classList.add('is-block')
|
||||||
|
};
|
||||||
|
item.style.transition = "transform 2s ease";
|
||||||
|
});
|
||||||
|
|
||||||
|
function moveToNextItem() {
|
||||||
|
currentIndex = (currentIndex + 1) % totalItems;
|
||||||
|
updateCarousel();
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateCarousel() {
|
||||||
|
items.forEach((item, index) => {
|
||||||
|
if (index === currentIndex) {
|
||||||
|
item.classList.remove('is-invisible');
|
||||||
|
item.classList.add('is-block');
|
||||||
|
item.style.transform = "translateX(0)";
|
||||||
|
} else if (currentIndex === 0 && index === totalItems - 1) {
|
||||||
|
item.style.transform = "translateX(-100%)";
|
||||||
|
} else if (index === currentIndex -1) {
|
||||||
|
item.style.transform = "translateX(-100%)";
|
||||||
|
} else {
|
||||||
|
item.classList.remove('is-block');
|
||||||
|
item.classList.add('is-invisible');
|
||||||
|
item.style.transform = "translateX(100%)";
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
setInterval(moveToNextItem, 4000);
|
||||||
|
});
|
@ -0,0 +1,66 @@
|
|||||||
|
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 transientTranslationVector;
|
||||||
|
let modIndex;
|
||||||
|
modIndex = currentIndex % items.length;
|
||||||
|
items.forEach((item, index) => {
|
||||||
|
//item.style.visibility = "visible";
|
||||||
|
if (modIndex < 2) {
|
||||||
|
if (index <= items.length + modIndex - 2) {
|
||||||
|
if ((index == items.length + modIndex - 2) && (currentIndex >= items.length)) {
|
||||||
|
console.log("hide it");
|
||||||
|
item.classList.add("goR");
|
||||||
|
//item.style.visibility = "hidden";
|
||||||
|
transientTranslationVector = (modIndex - 1) * -1 * itemWidth;
|
||||||
|
item.style.transition = 'none';
|
||||||
|
item.style.transform = `translateX(${transientTranslationVector}px)`;
|
||||||
|
item.offsetHeight;
|
||||||
|
item.style.transition = '';
|
||||||
|
item.classList.remove("goR");
|
||||||
|
// setTimeout(function() {
|
||||||
|
// item.classList.remove("goR")
|
||||||
|
// }, 100)
|
||||||
|
}
|
||||||
|
translationVector = modIndex * -1 * itemWidth;
|
||||||
|
} else {
|
||||||
|
translationVector = items.length * -1 * itemWidth;
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
if (index <= modIndex - 2){
|
||||||
|
if (index == modIndex - 2) {
|
||||||
|
item.classList.add("goR");
|
||||||
|
//item.style.visibility = "hidden"
|
||||||
|
transientTranslationVector = (items.length + 1 - modIndex) * itemWidth;
|
||||||
|
item.style.transition = 'none';
|
||||||
|
item.style.transform = `translateX(${transientTranslationVector}px)`;
|
||||||
|
item.offsetHeight;
|
||||||
|
item.style.transition = '';
|
||||||
|
item.classList.remove("goR");
|
||||||
|
// setTimeout(function() {
|
||||||
|
// item.classList.remove("goR")
|
||||||
|
// }, 100)
|
||||||
|
}
|
||||||
|
translationVector = (items.length - modIndex) * itemWidth;
|
||||||
|
} else {
|
||||||
|
translationVector = modIndex * -1 * itemWidth;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
//translationVector = itemWidth * modIndex * -1;
|
||||||
|
console.log(translationVector);
|
||||||
|
item.style.transform = `translateX(${translationVector}px)`;
|
||||||
|
// setTimeout(function() {
|
||||||
|
// item.style.transform = `translateX(${translationVector}px)`;
|
||||||
|
// }, 100)
|
||||||
|
});
|
||||||
|
}
|
||||||
|
if (items.length > 3){
|
||||||
|
setInterval(moveItems, 5000); // Move items every 5 seconds
|
||||||
|
}
|
||||||
|
});
|
@ -0,0 +1,60 @@
|
|||||||
|
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 fastTranslationVector;
|
||||||
|
let modIndex;
|
||||||
|
modIndex = currentIndex % items.length;
|
||||||
|
items.forEach((item, index) => {
|
||||||
|
|
||||||
|
//item.style.visibility = "visible";
|
||||||
|
if (modIndex >= 3 ) {
|
||||||
|
if (index <= modIndex - 3) {
|
||||||
|
if (index == modIndex - 3) {
|
||||||
|
item.classList.add("goR");
|
||||||
|
fastTranslationVector = (3 + items.length - modIndex) * itemWidth;
|
||||||
|
item.style.transform = `translateX(${fastTranslationVector}px)`;
|
||||||
|
setTimeout(function () {
|
||||||
|
item.classList.remove("goR");
|
||||||
|
}, 1000);
|
||||||
|
}
|
||||||
|
item.classList.remove("goR");
|
||||||
|
translationVector = (items.length - modIndex) * itemWidth;
|
||||||
|
} else {
|
||||||
|
translationVector = itemWidth * -1 * modIndex;
|
||||||
|
}
|
||||||
|
} else if (modIndex < 3) {
|
||||||
|
if (index <= modIndex + (items.length - 3)) {
|
||||||
|
if ((index == modIndex + (items.length - 3)) && (currentIndex >= items.length)){
|
||||||
|
item.classList.add("goR");
|
||||||
|
fastTranslationVector = (3 + items.length - modIndex) * itemWidth;
|
||||||
|
item.style.transform = `translateX(${fastTranslationVector}px)`;
|
||||||
|
setTimeout(function () {
|
||||||
|
item.classList.remove("goR");
|
||||||
|
}, 1000);
|
||||||
|
}
|
||||||
|
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)`;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
if (items.length > 3){
|
||||||
|
setInterval(moveItems, 5000); // Move items every 5 seconds
|
||||||
|
}
|
||||||
|
});
|
Loading…
Reference in New Issue