https://www.cedar-chophouse.com/refine/wp-content/themes/pdp_cd_theme/wedding2025/js/top.js

1class ResponsiveFloorMapSlider {
2    constructor() {
3        this.slider = document.querySelector('.sp-slider');
4        
5        if (this.slider) {
6            this.setupHTML();
7            this.initSwiper();
8        }
9    }
10
11    setupHTML() {
12        // Swiper用のHTMLクラスを追加
13        this.slider.classList.add('swiper');
14        
15        // swiper-wrapperを作成
16        const swiperWrapper = document.createElement('div');
17        swiperWrapper.className = 'swiper-wrapper';
18        
19        // liをswiper-slideに変更
20        const slides = Array.from(this.slider.children);
21        slides.forEach(slide => {
22            slide.classList.add('swiper-slide');
23            swiperWrapper.appendChild(slide);
24        });
25        
26        this.slider.appendChild(swiperWrapper);
27        
28        // ページネーション用のdivを.sp-sliderの外（後）に追加
29        const pagination = document.createElement('div');
30        pagination.className = 'swiper-pagination';
31        this.slider.parentNode.insertBefore(pagination, this.slider.nextSibling);
32    }
33
34    initSwiper() {
35        this.swiper = new Swiper('.sp-slider', {
36            slidesPerView: 1.5,
37            spaceBetween: 15,
38            centeredSlides: true,
39            loop: true,
40            
41            pagination: {
42                el: '.swiper-pagination',
43                clickable: true,
44            },
45            
46            autoplay: {
47                delay: 5000,
48                disableOnInteraction: false,
49            },
50            
51            breakpoints: {
52                769: {
53                    slidesPerView: 'auto',
54                    spaceBetween: 20,
55                    centeredSlides: false,
56                    autoplay: false,
57                }
58            }
59        });
60    }
61}
62
63class TopSlider {
64    constructor() {
65        this.slider = document.querySelector('.top-slider');
66        
67        if (this.slider) {
68            this.setupHTML();
69            this.initSwiper();
70        }
71    }
72
73    setupHTML() {
74        // Swiper用のHTMLクラスを追加
75        this.slider.classList.add('swiper');
76        
77        // swiper-wrapperを作成
78        const swiperWrapper = document.createElement('div');
79        swiperWrapper.className = 'swiper-wrapper';
80        
81        // liをswiper-slideに変更
82        const slides = Array.from(this.slider.children);

83        slides.forEach(slide => {
84            slide.classList.add('swiper-slide');
85            swiperWrapper.appendChild(slide);
86        });
87        
88        this.slider.appendChild(swiperWrapper);
89        
90        // ページネーション用のdivを.top-sliderの外（後）に追加
91        const pagination = document.createElement('div');
92        pagination.className = 'top-slider-pagination';
93        this.slider.parentNode.insertBefore(pagination, this.slider.nextSibling);
94    }
95
96    initSwiper() {
97        this.swiper = new Swiper('.top-slider', {
98            slidesPerView: 1,
99            spaceBetween: 0,
100            centeredSlides: true,
101            loop: true,
102                
103            autoplay: {
104                delay: 6000,
105                disableOnInteraction: false,
106            },
107            
108            effect: 'fade',
109            fadeEffect: {
110                crossFade: true
111            }
112        });
113    }
114}
115
116// DOM読み込み完了後に初期化
117document.addEventListener('DOMContentLoaded', () => {
118    new ResponsiveFloorMapSlider();
119    new TopSlider();
120});