class Slider {
constructor(elementoContainer){
this.elementoContainer=elementoContainer;
this.slider=elementoContainer.querySelector(".slider");
this.navegacaoSlider=elementoContainer.querySelector(".navegacao-slider");
this.slides=this.slider.querySelectorAll(".slide");
this.totalSlides=this.slides.length;
this.indiceAtual=0;
this.idIntervalo=null;
this.touchInicioX=0;
this.touchFimX=0;
this.iniciarSlider();
}
mostrarSlide(indice){
this.indiceAtual=(indice + this.totalSlides) % this.totalSlides;
this.slider.style.transform=`translateX(-${this.indiceAtual * 100}%)`;
this.atualizarBotoesNavegacao();
}
criarBotoesNavegacao(){
for (let i=0; i < this.totalSlides; i++){
const botaoNavegacao=document.createElement("div");
botaoNavegacao.classList.add("ponto-navegacao");
botaoNavegacao.addEventListener("click", ()=> {
this.mostrarSlide(i);
this.iniciarReproducaoAutomatica();
});
this.navegacaoSlider.appendChild(botaoNavegacao);
}}
atualizarBotoesNavegacao(){
const botoesNavegacao =
this.navegacaoSlider.querySelectorAll(".ponto-navegacao");
botoesNavegacao.forEach((botao, indice)=> {
if(indice===this.indiceAtual){
botao.classList.add("ativo");
}else{
botao.classList.remove("ativo");
}});
}
proximoSlide(){
this.mostrarSlide(this.indiceAtual + 1);
this.iniciarReproducaoAutomatica();
}
slideAnterior(){
this.mostrarSlide(this.indiceAtual - 1);
this.iniciarReproducaoAutomatica();
}
iniciarReproducaoAutomatica(){
clearInterval(this.idIntervalo);
this.idIntervalo=setInterval(this.proximoSlide.bind(this), 5000);
}
pararReproducaoAutomatica(){
clearInterval(this.idIntervalo);
}
iniciarSlider(){
this.criarBotoesNavegacao();
this.mostrarSlide(this.indiceAtual);
this.iniciarReproducaoAutomatica();
this.slider.addEventListener("mouseenter",
this.pararReproducaoAutomatica.bind(this)
);
this.slider.addEventListener("mouseleave",
this.iniciarReproducaoAutomatica.bind(this)
);
this.slider.addEventListener("touchstart", (e)=> {
this.touchInicioX=e.touches[0].clientX;
});
this.slider.addEventListener("touchend", (e)=> {
this.touchFimX=e.changedTouches[0].clientX;
const diffToque=this.touchInicioX - this.touchFimX;
if(diffToque > 50){
this.proximoSlide();
}else if(diffToque < -50){
this.slideAnterior();
}});
}}
function iniciarTodosOsSliders(){
const elementosContainers=document.querySelectorAll(".slider-container");
elementosContainers.forEach((container)=> {
new Slider(container);
});
}
iniciarTodosOsSliders();