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