https://veladero.com/public/js/nuevo-carousel.js

1const slides = document.querySelectorAll('.carousel-slide')
2
3// Creación de indicadores
4// const indicadoresArr = document.querySelector('.carousel-indicadores')
5
6// function createIndicador() {
7//     let indicador = document.createElement('div')
8//     indicador.setAttribute('class', 'indicador-slider')
9
10//     indicadoresArr.appendChild(indicador)
11// }
12
13// for (let i = 0; i < slides.length; i++) {
14//     createIndicador()   
15// }
16
17// const indicadores = document.querySelectorAll('.indicador-slider')
18
19// indicadores[0].classList.add('indicador-active')
20
21const leftArrow = document.querySelector('.arrow-left')
22const rightArrow = document.querySelector('.arrow-right')
23
24let contador = 0
25let j = 0
26let i = 0
27
28
29leftArrow.addEventListener('click', () => {
30    j = contador
31    
32    slides[contador].classList.add('slide-right-out')
33
34    contador--
35
36    verificacionContador()
37    removeAddClass()
38
39    slides[contador].classList.add('slide-left-active')
40
41    setTimeout( () => {
42        slides[j].classList.remove('slide-right-out')
43    }, 900)
44
45    // indicadores[contador].classList.add('indicador-active')
46
47
48    let blackBGarr = document.querySelectorAll('.black-bg')
49    blackBGarr.forEach(black => {
50        black.classList.remove('black-bg-anim')
51    });
52    
53    let blackBG = document.querySelector('.slide-left-active .black-bg')
54    blackBG.classList.add('black-bg-anim')
55
56})
57
58rightArrow.addEventListener('click', rightFunction)
59
60
61function rightFunction() {
62    i = contador
63
64    slides[contador].classList.add('slide-left-out')
65
66    contador++
67    
68    verificacionContador()
69    removeAddClass()
70    
71    slides[contador].classList.add('slide-right-active')
72
73    
74    setTimeout( () => {
75        slides[i].classList.remove('slide-left-out')
76    }, 900)
77
78    // indicadores[contador].classList.add('indicador-active')
79
80
81    let blackBGarr = document.querySelectorAll('.black-bg')
82    blackBGarr.forEach(black => {
83        black.classList.remove('black-bg-anim')
84    });
85    
86    let blackBG = document.querySelector('.slide-right-active .black-bg')
87    blackBG.classList.add('black-bg-anim')
88}
89
90function verificacionContador() {
91    if (contador < 0) {
92        contador = slides.length-1
93        return contador
94    }
95
96    if (contador >= slides.length) {
97        contador = 0
98    }
99}
100
101function removeAddClass() {

102    slides.forEach(slide2 => {
103        slide2.classList.remove('slide-active')
104    });
105
106    slides.forEach(a => {
107        a.classList.remove('slide-left-active')
108        a.classList.remove('slide-right-active')
109    });
110}
111
112
113let intervalCarousel = setInterval(rightFunction, 5000);
114
115const carruselHome = document.querySelector('.hero-img')
116
117carruselHome.addEventListener('mouseover', () => {
118    clearInterval(intervalCarousel)
119})
120
121carruselHome.addEventListener('mouseleave', () => {
122    intervalCarousel = setInterval(rightFunction, 3000);
123})