https://www.skylark.co.jp/site_resource/common/js/corporate/main.js

1// ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
2// スライダー
3
4var SKYLARK = SKYLARK || {};
5
6(function($){
7    "use strict";
8
9    SKYLARK.corpo_index_mv = {
10
11        emt: {
12            list: '.js-list-topKv',
13            prev: '.js-top-kv-prev',
14            next: '.js-top-kv-next',
15            dots: '.slick-dots'
16        },
17        
18        // PC とモバイルで異なるオプションを設定
19        opts: {
20            pc: {
21                autoplay: true,
22                autoplaySpeed: 4000,
23                infinite: true,
24                arrows: false,
25                dots: true,
26                speed: 1000,
27                slidesToShow: 1,
28                slidesToScroll: 1,
29                variableWidth: true,
30                centerMode: true
31            },
32            mobile: {
33                autoplay: true,
34                autoplaySpeed: 4000,
35                infinite: true,
36                arrows: false,
37                dots: true,
38                speed: 1000,
39                slidesToShow: 1,
40                slidesToScroll: 1,
41                variableWidth: false,
42                centerMode: true,
43                adaptiveHeight: false,
44                centerPadding: '0px',
45            }
46        },
47        
48
49        // 初期化関数
50        init: function() {
51            var emt = this.emt;
52            var opts = this.getCurrentOptions();
53
54            if ($(emt.list).length > 0 && !$(emt.list).hasClass('slick-initialized')) {
55                $(emt.list).slick(opts);
56                this.addNavigationEvents(); // ナビゲーションボタンとイベントを追加
57            }
58        },
59
60        // 現在の画面幅に応じたオプションを取得
61        getCurrentOptions: function() {
62            return window.matchMedia("(max-width: 767px)").matches 
63                ? this.opts.mobile 
64                : this.opts.pc;
65        },
66
67        // ナビゲーションイベントを追加
68        addNavigationEvents: function() {
69            var emt = this.emt;
70            var $slider = $(emt.list);
71
72            $slider.find("._btn-prev, ._btn-next").remove();
73            $slider.off("click", emt.next).off("click", emt.prev);
74
75            if ($slider.find(emt.dots).length > 0) {
76                $slider.find('.slick-dots').before('<p class="_btn-prev"><button type="button" class="'+emt.prev.substr(1)+'">前のスライド</button></p>');
77                $slider.find('.slick-dots').after('<p class="_btn-next"><button type="button" class="'+emt.next.substr(1)+'">次のスライド</button></p>');
78            }
79
80            $slider.find(emt.next).on('click', function(e) {
81                e.preventDefault();
82                $slider.slick('slickNext');
83            });
84            $slider.find(emt.prev).on('click', function(e) {
85                e.preventDefault();
86                $slider.slick('slickPrev');
87            });
88        },
89
90        // オプションのみを更新する関数
91        updateOptions: function() {
92            var $slider = $(this.emt.list);
93            var opts = this.getCurrentOptions();
94
95            // 動的に変更可能なオプションのみ更新
96            $slider.slick('slickSetOption', 'autoplay', opts.autoplay, true);
97            $slider.slick('slickSetOption', 'autoplaySpeed', opts.autoplaySpeed, true);
98            $slider.slick('slickSetOption', 'slidesToShow', opts.slidesToShow, true);
99            $slider.slick('slickSetOption', 'slidesToScroll', opts.slidesToScroll, true);
100            $slider.slick('slickSetOption', 'variableWidth', opts.variableWidth, true);
101            $slider.slick('slickSetOption', 'centerMode', opts.centerMode, true);
102        }
103    };
104})(jQuery);
105
106// 画面幅の監視とオプションの更新
107const breakpoint = window.matchMedia("(max-width: 767px)");
108let isMobileView = breakpoint.matches;
109
110// 初期化
111SKYLARK.corpo_index_mv.init();
112
113// 画面幅の変更イベントに応じてオプションのみを更新
114breakpoint.addEventListener("change", () => {
115    const isNowMobileView = breakpoint.matches;
116    if (isNowMobileView !== isMobileView) {
117        isMobileView = isNowMobileView;
118        SKYLARK.corpo_index_mv.updateOptions();  // オプションのみを更新
119    }
120});
121
122/* ----------------------------------------------------------
123   フローディング　バナー
124   ---------------------------------------------------------- */
125document.getElementById('close-btn').addEventListener('click', function() {
126  document.getElementById('banner').style.display = 'none';
127});
128
129// ここから＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
130// 画面幅が768pxを通過するたびにページを再読み込み
131// const breakpoint = window.matchMedia("(max-width:768px)");
132
133// breakpoint.addEventListener("change", () => {
134//     window.location.reload();
135// });
136// ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ここまで