https://criacao.co.jp/wp-content/themes/lightning-child/js/custom-slider.js?ver=1772678778

1jQuery(function($) {
2    /**
3     * Custom Slider Interaction for MetaSlider (PC/SP対応)
4     */
5    
6    // PC用とSP用の両方のスライダーを初期化
7    function initSlider(containerId) {
8        var $container = $(containerId);
9        if (!$container.length) return;
10
11        var sliderId = $container.data('slider-id');
12        var $thumbnails = $container.find('.thumbnail');
13        
14        // サムネイルクリック時の処理
15        $thumbnails.on('click keypress', function(e) {
16            // クリック または Enter/Spaceキー
17            if (e.type === 'keypress' && e.which !== 13 && e.which !== 32) return;
18            
19            e.preventDefault();
20            
21            var index = $(this).data('slide-index');
22            
23            // MetaSlider (FlexSlider) のインスタンスを取得
24            // 通常は #metaslider_{ID} 直下の .flexslider 要素にデータがある
25            // または .metaslider.flexslider 自体
26            var $sliderObj = $('#metaslider_' + sliderId).find('.flexslider');
27            if ($sliderObj.length === 0) {
28                $sliderObj = $('#metaslider_' + sliderId); // フォールバック
29            }
30            
31            var slider = $sliderObj.data('flexslider');
32            
33            if (slider) {
34                // 指定したスライドへ移動
35                slider.flexAnimate(index);
36                
37                // ユーザー操作時に一時停止させたい場合
38                if (slider.vars.pauseOnAction) {
39                    slider.pause();
40                }
41            }
42        });
43
44        // スライド変更時の連携処理
45        // MetaSlider の after コールバックで実行される想定
46        $(document).on('criacao_slide_change_' + sliderId, function(e, slideIndex) {
47            // すべてのactiveクラスを削除
48            $thumbnails.removeClass('active');
49            
50            // 現在のスライドに対応するサムネイルにactiveクラスを追加
51            var $activeThumb = $thumbnails.eq(slideIndex);
52            $activeThumb.addClass('active');
53            
54            // 必要に応じてスクロール（モバイルなどサムネイルが隠れている場合）
55            // 親要素がスクロール可能な場合のみ
56            var $thumbContainer = $container.find('.slider-thumbnails');
57            if ($thumbContainer.length && ($thumbContainer[0].scrollHeight > $thumbContainer[0].clientHeight)) {
58                var scrollTop = $activeThumb.position().top + $thumbContainer.scrollTop() - ($thumbContainer.height() / 2) + ($activeThumb.height() / 2);
59                $thumbContainer.animate({ scrollTop: scrollTop }, 300);
60            }
61        });
62        
63        // FlexSliderのafter/start イベントを監視してサムネイルを同期
64        setTimeout(function() {
65            var $sliderObj = $('#metaslider_' + sliderId).find('.flexslider');
66            if ($sliderObj.length === 0) {
67                $sliderObj = $('#metaslider_' + sliderId);
68            }
69            
70            var slider = $sliderObj.data('flexslider');
71            if (slider) {
72                // FlexSliderのafterコールバックを追加
73                var originalAfter = slider.vars.after || function() {};
74                slider.vars.after = function(s) {
75                    originalAfter(s);
76                    // サムネイルの同期
77                    $thumbnails.removeClass('active');
78                    $thumbnails.eq(s.currentSlide).addClass('active');
79                };
80            }
81        }, 500);
82    }
83    
84    // PC用スライダーを初期化
85    initSlider('#frontpage-slider-pc');
86    
87    // SP用スライダーを初期化
88    initSlider('#frontpage-slider-sp');
89    
90});