testes/js/Home/Carrossel_infinito.js

29 lines
1.2 KiB
JavaScript

// Função para clonar os elementos do carrossel e ajustar a animação
function cloneCarousel() {
const carousel = document.getElementById('carousel');
const carouselItems = carousel.querySelectorAll('.carousel-item');
const numItems = carouselItems.length;
const cloneCount = 10; // Número de clones a serem adicionados
// Clone os itens do carrossel e adicione-os ao final
for (let i = 0; i < cloneCount; i++) {
carouselItems.forEach(item => {
const clone = item.cloneNode(true);
carousel.appendChild(clone);
});
}
// Calcule a porcentagem final da animação com base no número de itens e clones
const finalPercentage = ((numItems + cloneCount) / (numItems + cloneCount - 1)) * 10000;
// Aplique a porcentagem ao CSS usando uma variável customizada
document.documentElement.style.setProperty('--translatePercentage', `calc(-${finalPercentage}% * 2)`);
}
// Clonar o carrossel inicialmente
cloneCarousel();
// Clonar o carrossel inicialmente
cloneCarousel();