slider/script.js at main · erockLev/slider · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
// Slider
const slider = function() {
    const slides = document.querySelectorAll('.slide');
    // const btnLeft = document.querySelector('.slider__btn--left');
    // const btnRight = document.querySelector('.slider__btn--right');
    // const dotContainer = document.querySelector('.dots');

    let curSlide = 0;
    const maxSlide = slides.length;

    // Functions
    // const createDots = function() {
    //   slides.forEach(function(_, i) {
    //     dotContainer.insertAdjacentHTML('beforeend', `<button class="dots__dot" data-slide="${i}"></button>`)
    //   });
    // };

    // const activateDot = function(slide) {
    //   document.querySelectorAll('.dots__dot').
    //   forEach(dot => dot.classList.remove('dots__dot--active'));

    //   document.querySelector(`.dots__dot[data-slide="${slide}"]`).classList.add('dots__dot--active');
    // }

    const goToSlide = function(slide) {
      slides.forEach((s, i) => s.style.transform = `translateX(${100 * (i - slide)}%)`);
    };


    // Next Slide
    const nextSlide = function() {
      if(curSlide === maxSlide - 1) {
        curSlide = 0;
      } else {
        curSlide++
      }
      goToSlide(curSlide);
    //   activateDot(curSlide);
    };
    setInterval(nextSlide, 2000);

    // const prevSlide = function() {
    //   if(curSlide === 0) {
    //     curSlide = maxSlide -1;
    //   } else {
    //     curSlide--;
    //   }
    //   goToSlide(curSlide);
    // //   activateDot(curSlide);
    // };

    // Initialization
    const init = function(){
    //   createDots();
    //   activateDot(0);
      goToSlide(0);
    };
    // init();

    // Event Handlers
    // btnRight.addEventListener('click', nextSlide);
    // btnLeft.addEventListener('click', prevSlide);

    // document.addEventListener('keydown', function(e) {
    //   if(e.key === 'ArrowLeft') prevSlide();
    //   e.key === 'ArrowRight' && nextSlide();
    // });

    // dotContainer.addEventListener('click', function(e) {
    //   if(e.target.classList.contains('dots__dot')) {
    //     const {slide} = e.target.dataset;
    //     goToSlide(slide);
    //     activateDot(slide);
    //   }
    // });
    };
    slider();