https://www.ccs-inc.co.jp/assets/js/page/top.js?version=202502111531

1/****************************************
2 * 
3 * Top Page Script
4 * 
5 ****************************************/
6/****************************************
7 * 
8 * Toppage Main Carousel
9 * 
10 ****************************************/
11window.addEventListener('DOMContentLoaded', () => {
12  const carousel = document.querySelector('[data-topmain-carousel]')
13  if (!carousel) return
14  
15  // プログレスバー要素を取得
16  const progressBar = document.querySelector('[data-topmain-carousel-progress]')
17  // 一時停止ボタンを取得
18  const pauseButton = document.querySelector('[data-topmain-carousel-pause]')
19  
20  const swiper = new Swiper(carousel, {
21    // Optional parameters
22    autoplay: {
23      delay: 4000,
24      disableOnInteraction: false
25    },
26    centeredSlides: true,
27    loop: true,
28    slidesPerView: 1,
29    breakpoints: {
30      550: {
31        spaceBetween: 30,
32        slidesPerView: 1.5
33      },
34      835: {
35        spaceBetween: 40,
36        slidesPerView: 'auto',
37      }
38    },
39  
40    // Navigation arrows
41    navigation: {
42      nextEl: '[data-topmain-carousel-next]',
43      prevEl: '[data-topmain-carousel-prev]',
44    },
45    
46    // Pagination
47    pagination: {
48      el: "[data-topmain-carousel-pagination]",
49      type: "fraction",
50      hiddenClass: true
51    },
52    
53    on: {
54      // 初期化時のイベント
55      init(swiper) {
56        // ページネーション要素の挿入
57        if (progressBar) {
58          for (let i = 0; i < swiper.slides.length; i++) {
59            const paginationItem = document.createElement('div')
60            if (i == 0) {
61              paginationItem.classList.add('__current')
62            }
63            progressBar.appendChild(paginationItem)
64          }
65        }
66        // 一時停止の制御
67        if (pauseButton) {
68          pauseButton.addEventListener('click', e => {
69            e.currentTarget.classList.toggle('__active')
70            if (e.currentTarget.classList.contains('__active')) {
71              swiper.autoplay.pause()
72            }
73            else {
74              swiper.autoplay.resume()
75            }
76          })
77        }
78      },
79      // スライド後のイベント
80      slideChangeTransitionStart(swiper) {
81        if (progressBar) {
82          const progressBarItems = progressBar.childNodes
83          // スライド枚数に応じたプログレスバー要素を追加
84          progressBarItems.forEach((progressBarItem, index) => {
85            // 現在のスライドより前のスライド
86            if (swiper.realIndex > index) {
87              progressBarItem.classList.add('__before')
88              progressBarItem.classList.remove('__current')
89            }
90            // 現在のスライド
91            else if (swiper.realIndex === index) {
92              progressBarItem.classList.add('__current')
93            }
94            // 現在のスライドより後のスライド
95            else {
96              progressBarItem.classList.remove('__before', '__current')
97            }
98          })
99        }
100      },
101      autoplayTimeLeft(swiper, time, progress) {
102        if (progressBar) {
103          progressBar.style.setProperty("--progress", 1 - progress)
104        }
105      }
106    }
107  });
108})
109/****************************************
110 * 
111 * Toppage Product Topics Carousel
112 * 
113 ****************************************/
114window.addEventListener('DOMContentLoaded', () => {
115  const carousel = document.querySelector('[data-top-product-topics]')
116  if (!carousel) return
117  
118  const swiper = new Swiper(carousel, {
119    // Optional parameters
120    slidesPerView: 2,
121    freeMode: true,
122    loop: true,
123    breakpoints: {
124      550: {
125        slidesPerView: 'auto',
126      },
127      835: {
128        slidesPerView: 'auto',
129      }
130    },
131  
132    // Navigation arrows
133    navigation: {
134      nextEl: '[data-top-product-topics-next]',
135      prevEl: '[data-top-product-topics-prev]',
136    },
137  });
138})