https://uma-furusato.com/compo/js/top.js

1
2class TopCarousel {
3    constructor() {
4        this.root = document.querySelector('.js-carousel');
5        this.indWrap = document.querySelector('.js-carousel__indWrap');
6        this.ind = document.querySelector('.js-carousel_ind');
7        this.indItems = this.ind.querySelectorAll('.js-carousel__indItem');
8        this.currentIndItem = this.ind.firstElementChild.firstElementChild;
9        this.nextIndItem = null;
10        this.btn = document.querySelector('.js-carousel__btn');
11        this.btnTxt = this.btn.querySelector('.js-carousel__btnTxt');
12        this.currentItem = this.root.firstElementChild;
13        this.nextItem = null;
14        this.activeClass = 'is-current';
15        this.stopClass = 'is-stop';
16        this.stopTxt = '停止する';
17        this.startTxt = '再生する';
18        this.playId;
19        this.tm = 5000;
20    }
21
22    init() {
23        this.setCarousel();
24        this.bindShow();
25        this.indClick();
26        this.setAlly();
27
28        this.playId = setInterval(this.show.bind(this), this.tm);
29    }
30
31    //Ally設置
32    setAlly() {
33
34    }
35
36    //カルーセルの初期設置
37    setCarousel() {
38        this.btnTxt.textContent = this.stopTxt;
39        this.indWrap.style.display = 'block';
40    }
41
42
43    //次表示する要素の取得
44    setNext() {
45        const id = this.currentItem.id;
46        this.indItem = this.ind.querySelector(id);
47
48        if (this.currentItem.nextElementSibling === null) {
49            this.nextItem = this.root.firstElementChild;
50            this.nextIndItem = this.ind.firstElementChild.firstElementChild;
51            
52        } else {
53            this.nextItem = this.currentItem.nextElementSibling;
54            this.nextIndItem = this.currentIndItem.parentNode.nextElementSibling.firstElementChild;
55        }
56    }
57
58    //インジゲーターが押されたら押された番号のスライドを表示させる
59    indClick(){
60        for (const indItem of this.indItems) {
61            indItem.addEventListener('click', (e)=> {
62                const id = indItem.getAttribute('data-item');
63                const item = this.root.querySelector(`#${id}`);
64
65                this.currentIndItem.classList.remove(this.activeClass);
66                this.currentItem.classList.remove(this.activeClass);
67                indItem.classList.add(this.activeClass);
68                item.classList.add(this.activeClass);
69
70                this.currentIndItem = indItem;
71                this.currentItem = item;
72
73                // クリックされてから5秒後にスライドを変える
74                // 今まで動いていたsetIntervalを止めて
75                // 新しいsetIntervalを設置
76                clearInterval(this.playId);
77                this.playId = setInterval(this.show.bind(this), this.tm);
78
79                e.preventDefault()
80            });
81        }
82    }
83
84    //5秒後に次の画像を表示させる
85    // (5秒後に抽出された要素にクラスをつける)
86    bindShow() {
87        this.btn.addEventListener('click', () => {
88            // 停止されていたら再生させる
89            if (this.btn.classList.contains(this.stopClass)) {
90                this.playId = setInterval(this.show.bind(this), this.tm);
91                this.btn.classList.remove(this.stopClass);
92                this.btnTxt.textContent = this.stopTxt;
93
94            // 再生されていたら止める
95            } else {
96                clearInterval(this.playId);
97                this.btn.classList.add(this.stopClass);
98                this.btnTxt.textContent = this.startTxt;
99            }
100        })
101    }
102
103    //次の画像を表示させる
104    show() {
105        this.setNext();
106        this.currentItem.classList.remove(this.activeClass);
107        this.currentIndItem.classList.remove(this.activeClass);
108        this.nextItem.classList.add(this.activeClass);
109        this.nextIndItem.classList.add(this.activeClass);
110        this.currentItem = this.nextItem;
111        this.currentIndItem = this.nextIndItem;
112    }
113}
114
115(()=>{
116    const carousel = document.querySelector('.js-carousel');
117
118    if (!carousel) {
119        return
120    }
121    

122    const top_Carousel = new TopCarousel(carousel);
123    top_Carousel.init();
124
125})()
126