108 lines
4.6 KiB
JavaScript
108 lines
4.6 KiB
JavaScript
// Seleciona o elemento com o id 'next'
|
|
let nextDom = document.getElementById('next');
|
|
|
|
// Seleciona o elemento com o id 'prev'
|
|
let prevDom = document.getElementById('prev');
|
|
|
|
// Seleciona o elemento com a classe 'carousel2'
|
|
let carouselDom = document.querySelector('.carousel2');
|
|
|
|
// Seleciona o elemento com a classe 'list' dentro do elemento com a classe 'carousel2'
|
|
let listItemDom = document.querySelector('.carousel2 .list');
|
|
|
|
// Seleciona o elemento com a classe 'thumbnail' dentro do elemento com a classe 'carousel2'
|
|
let thumbnailDom = document.querySelector('.carousel2 .thumbnail');
|
|
|
|
// Define a função que será chamada quando o elemento 'nextDom' for clicado
|
|
nextDom.onclick = function () {
|
|
showSlider('next');
|
|
}
|
|
|
|
// Define a função que será chamada quando o elemento 'prevDom' for clicado
|
|
prevDom.onclick = function () {
|
|
showSlider('prev');
|
|
}
|
|
|
|
// Define o tempo de execução em milissegundos para a transição dos slides
|
|
let timeRunning = 3000;
|
|
|
|
// Variável para armazenar o identificador do temporizador setTimeout
|
|
let runTimeOut;
|
|
|
|
// Define a função responsável por mostrar o próximo ou o slide anterior
|
|
function showSlider(type) {
|
|
// Seleciona todos os itens de slide dentro do elemento com a classe 'list' dentro do elemento com a classe 'carousel2'
|
|
let itemSlider = document.querySelectorAll('.carousel2 .list .item');
|
|
|
|
// Seleciona todos os itens de miniatura dentro do elemento com a classe 'thumbnail' dentro do elemento com a classe 'carousel2'
|
|
let itemThumbnail = document.querySelectorAll('.carousel2 .thumbnail .item');
|
|
|
|
// Verifica se o tipo de ação é para mostrar o próximo slide
|
|
if (type === 'next') {
|
|
// Adiciona o primeiro item de slide como o último filho do elemento com a classe 'list'
|
|
listItemDom.appendChild(itemSlider[0]);
|
|
|
|
// Adiciona o primeiro item de miniatura como o último filho do elemento com a classe 'thumbnail'
|
|
thumbnailDom.appendChild(itemThumbnail[0]);
|
|
|
|
// Adiciona a classe 'next' ao elemento com a classe 'carousel2'
|
|
carouselDom.classList.add('next');
|
|
|
|
// Adiciona a classe 'time' ao elemento com a classe 'carousel2' (possível erro de sintaxe, deve ser corrigido)
|
|
carouselDom.classList.add('.time');
|
|
} else {
|
|
// Calcula a posição do último item de slide
|
|
let postionLastItem = itemSlider.length - 1;
|
|
|
|
// Adiciona o último item de slide como o primeiro filho do elemento com a classe 'list'
|
|
listItemDom.prepend(itemSlider[postionLastItem]);
|
|
|
|
// Adiciona o último item de miniatura como o primeiro filho do elemento com a classe 'thumbnail'
|
|
thumbnailDom.prepend(itemThumbnail[postionLastItem]);
|
|
|
|
// Adiciona a classe 'prev' ao elemento com a classe 'carousel2'
|
|
carouselDom.classList.add('prev');
|
|
|
|
// Adiciona a classe 'time' ao elemento com a classe 'carousel2' (possível erro de sintaxe, deve ser corrigido)
|
|
carouselDom.classList.add('.time');
|
|
}
|
|
|
|
// Remove as classes de animação após um certo tempo
|
|
clearTimeout(runTimeOut);
|
|
runTimeOut = setTimeout(() => {
|
|
carouselDom.classList.remove('next');
|
|
carouselDom.classList.remove('prev');
|
|
}, timeRunning);
|
|
}
|
|
|
|
// Adiciona manipuladores de eventos às miniaturas
|
|
thumbnailDom.querySelectorAll('.item').forEach((thumbnail, index) => {
|
|
thumbnail.addEventListener('click', () => {
|
|
// Obtém o novo índice do item de slide a ser mostrado com base no índice da miniatura clicada
|
|
let newIndex = Array.from(thumbnail.parentNode.children).indexOf(thumbnail);
|
|
|
|
// Chama a função showSlide com o novo índice
|
|
showSlide(newIndex);
|
|
});
|
|
});
|
|
|
|
// Define a função responsável por mostrar um slide específico com base no novo índice
|
|
function showSlide(newIndex) {
|
|
// Seleciona novamente todos os itens de slide dentro do elemento com a classe 'list' dentro do elemento com a classe 'carousel2'
|
|
let itemSlider = document.querySelectorAll('.carousel2 .list .item');
|
|
|
|
// Seleciona novamente todos os itens de miniatura dentro do elemento com a classe 'thumbnail' dentro do elemento com a classe 'carousel2'
|
|
let itemThumbnail = document.querySelectorAll('.carousel2 .thumbnail .item');
|
|
|
|
// Move o item correspondente ao novo índice para a primeira posição na lista de slides
|
|
listItemDom.prepend(itemSlider[newIndex]);
|
|
|
|
// Move a miniatura correspondente ao novo índice para a primeira posição na lista de miniaturas
|
|
thumbnailDom.prepend(itemThumbnail[newIndex]);
|
|
|
|
// Atualiza os índices das miniaturas
|
|
thumbnailDom.querySelectorAll('.item').forEach((thumbnail, index) => {
|
|
thumbnail.setAttribute('data-index', index);
|
|
});
|
|
}
|