https://matsumoto-u.ac.jp/resources/js/slider.js

1/**
2 * slider.js
3 * Splide スライダーの初期化
4 * ESモジュール形式
5 */
6
7import Splide from './splide.esm.js';
8
9// ブレークポイントの定義
10// SCSSの $mq-breakpoints の md(768px) - 1px に合わせる
11const BREAKPOINTS = {
12  md: 767, // @include mq(md, max) → max-width: 767px
13};
14
15const sliderControl = {
16  init() {
17    const splideEls = document.querySelectorAll('.js-splide');
18
19    if (splideEls.length === 0) return;
20
21    splideEls.forEach((el) => {
22      const sliderType = el.dataset.sliderType;
23
24      switch (sliderType) {
25        case 'news':
26          this.initNewsSlider(el);
27          break;
28
29        default:
30          new Splide(el).mount();
31          break;
32      }
33    });
34  },
35
36  // ニューススライダー（スマホのみ動作）
37  initNewsSlider(el) {
38    const mq = window.matchMedia(`(max-width: ${BREAKPOINTS.md}px)`);
39    let splideInstance = null;
40
41    const initSlider = () => {
42      if (splideInstance) return;
43
44      splideInstance = new Splide(el, {
45        type      : 'loop',
46        perPage   : 1,
47        arrows    : false,
48        pagination: true,
49        gap       : 0,
50      }).mount();
51    };
52
53    const destroySlider = () => {
54      if (!splideInstance) return;
55      splideInstance.destroy();
56      splideInstance = null;
57    };
58
59    const handleMq = (e) => {
60      if (e.matches) {
61        initSlider();
62      } else {
63        destroySlider();
64      }
65    };
66
67    handleMq(mq);
68    mq.addEventListener('change', handleMq);
69  },
70
71};
72
73export default sliderControl;