https://www.tokyodome-hotels.co.jp/assets/common/scripts/modules/carousel.js

1/**
2 * カルーセル
3 */
4/**
5 * 汎用
6 * 画像1枚ずつ
7 */
8(() => {
9    const targets = document.querySelectorAll('.js-carousel-basic');
10    targets.forEach((el) => {
11        const splide = new Splide(el, {
12            type: 'fade',
13            rewind: true,
14            arrows: false,
15            pagination: true,
16            autoplay: true,
17            mediaQuery: 'min',
18            breakpoints: {
19                768: {
20                    arrows: true,
21                },
22            },
23        });
24        splide.on('mounted', () => {
25            el.querySelectorAll('.splide__slide').forEach((item) => {
26                item.removeAttribute('role');
27            });
28        });
29        splide.mount();
30    });
31})();
32/**
33 * 汎用
34 * 1280px未満でカルーセル
35 */
36(() => {
37    const targets = document.querySelectorAll('.js-carousel-fit');
38    targets.forEach((el) => {
39        const items = el.querySelectorAll('.splide__slide');
40        if (items.length <= 1) {
41            el.classList.add('one-item');
42            return;
43        }
44        const splide = new Splide(el, {
45            type: 'loop',
46            focus: 'center',
47            autoWidth: true,
48            arrows: false,
49            pagination: true,
50            autoplay: true,
51            mediaQuery: 'min',
52            breakpoints: {
53                768: {
54                    arrows: true,
55                },
56                1280: {
57                    focus: 0,
58                    destroy: true,
59                    arrows: false,
60                    pagination: false,
61                    autoplay: false,
62                },
63            },
64        });
65        splide.on('mounted', () => {
66            el.querySelectorAll('.splide__slide').forEach((item) => {
67                item.removeAttribute('role');
68            });
69        });
70        splide.on('destroy', () => {
71            el.querySelectorAll('.splide__slide a').forEach((item) => {
72                item.setAttribute('tabindex', '0');
73            });
74        });
75        splide.mount();
76    });
77})();
78/**
79 * 汎用
80 * アイテムがコンテンツ幅以上になったらカルーセル化
81 */
82(() => {
83    const targets = document.querySelectorAll('.js-carousel-fluid');
84    targets.forEach((el) => {
85        const splide = new Splide(el, {
86            type: 'loop',
87            focus: 'center',
88            autoplay: true,
89            autoWidth: true,
90            arrows: false,
91            pagination: false,
92            drag: false,
93        });
94        const applyOverflowState = (isOverflow) => {
95            splide.go(0);
96            splide.options = {
97                ...splide.options,
98                arrows: isOverflow,
99                pagination: isOverflow,
100                drag: isOverflow,
101                clones: isOverflow ? undefined : 0,
102                focus: isOverflow ? 'center' : 0,
103            };
104            splide.refresh();
105            const Autoplay = splide.Components?.Autoplay;
106            if (isOverflow) {
107                Autoplay?.play();
108            }
109            else {
110                Autoplay?.pause();
111            }
112        };
113        // NOTE: mounted直後に一旦止める（overflow=true のときだけ再生開始するため）
114        splide.on('mounted', () => {
115            el.querySelectorAll('.splide__slide').forEach((item) => {
116                item.removeAttribute('role');
117            });
118            requestAnimationFrame(() => {
119                const isOverflow = splide.Components?.Layout?.isOverflow?.() ?? false;
120                applyOverflowState(isOverflow);
121            });
122        });
123        splide.on('overflow', (isOverflow) => {
124            applyOverflowState(isOverflow);
125        });
126        splide.mount();
127    });
128})();
129/**
130 * トップ：TOPICS
131 * SPのみカルーセル
132 */
133(() => {
134    const targets = document.querySelectorAll('.js-carousel-topics');
135    targets.forEach((el) => {
136        const splide = new Splide(el, {
137            destroy: true,
138            mediaQuery: 'max',
139            breakpoints: {
140                1024: {
141                    destroy: false,
142                    type: 'loop',
143                    focus: 'center',
144                    autoWidth: true,
145                    gap: 24,

146                    arrows: false,
147                    pagination: true,
148                    autoplay: true,
149                },
150            },
151        });
152        splide.on('mounted', () => {
153            el.querySelectorAll('.splide__slide').forEach((item) => {
154                item.removeAttribute('role');
155            });
156        });
157        splide.on('destroy', () => {
158            el.querySelectorAll('.splide__slide a').forEach((item) => {
159                item.setAttribute('tabindex', '0');
160            });
161        });
162        splide.mount();
163    });
164})();
165/**
166 * カレンダー
167 * ウェディングのみ
168 */
169(() => {
170    const targets = document.querySelectorAll('.js-carousel-calendar');
171    targets.forEach((el) => {
172        new Splide(el, {
173            type: 'fade',
174            rewind: false,
175            arrows: true,
176            pagination: false,
177            autoplay: false,
178            mediaQuery: 'min',
179        }).mount();
180    });
181})();
182/**
183 * ウェディングのみ
184 */
185(() => {
186    const targets = document.querySelectorAll('.js-carousel-sp-only');
187    targets.forEach((el) => {
188        new Splide(el, {
189            type: 'loop',
190            perPage: 1,
191            padding: '5rem',
192            rewind: true,
193            arrows: false,
194            pagination: true,
195            autoplay: true,
196            mediaQuery: 'min',
197            gap: '16px',
198            breakpoints: {
199                768: {
200                    arrows: false,
201                    type: 'fade',
202                    perPage: 1,
203                    padding: '0',
204                    pagination: false,
205                },
206            },
207        }).mount();
208    });
209})();
210export {};