https://www.jfe-planteng.co.jp/wps/wp-content/themes/hmr_jfeplante…/js/top_slide_stretch.js?ver=20261772513549

1jQuery(document).ready(function () {
2  // ＊＊＊トップズームフェード
3  // 最初のスライドに"add-animation"のclassを付ける(data-slick-index="0"が最初のスライドを指す)
4  if (jQuery(".zoom_slider").length > 0) {
5    jQuery(".zoom_slider")
6      .on("init", function () {
7        jQuery('.slick-slide[data-slick-index="0"]').addClass("add-animation");
8      })
9      // 通常のオプション
10      .slick({
11        autoplay: true, // 自動再生ON
12        fade: true, // フェードON
13        arrows: false, // 矢印OFF
14        speed: 2000, // スライド、フェードアニメーションの速度2000ミリ秒
15        autoplaySpeed: 4000, // 自動再生速度4000ミリ秒
16        pauseOnFocus: false, // フォーカスで一時停止OFF
17        pauseOnHover: false, // マウスホバーで一時停止OFF
18      })
19      .on({
20        // スライドが移動する前に発生するイベント
21        beforeChange: function (event, slick, currentSlide, nextSlide) {
22          // 表示されているスライドに"add-animation"のclassをつける
23          jQuery(".slick-slide", this).eq(nextSlide).addClass("add-animation");
24          // あとで"add-animation"のclassを消すための"remove-animation"classを付ける
25          jQuery(".slick-slide", this).eq(currentSlide).addClass("remove-animation");
26          // 3,4枚目の画像とき、文字の色を白にする
27          if (currentSlide == 1 || currentSlide == 2) {
28            jQuery(".top_main_img_on_txt p").css("color", "#fff");
29          } else {
30            //#202020
31            jQuery(".top_main_img_on_txt p").css("color", "#202020");
32          }
33        },
34        // スライドが移動した後に発生するイベント
35        afterChange: function () {
36          // 表示していないスライドはアニメーションのclassを外す
37          jQuery(".remove-animation", this).removeClass("remove-animation add-animation");
38        },
39      });
40  }
41});
42
43jQuery(document).ready(function () {
44  // ＊＊＊トップスライダー
45  // 初期化時にプログレスバーを更新
46  jQuery(".product-slider1-1").on("init", function (event, slick) {
47    var totalSlides = slick.slideCount;
48    var percentage = (1 / totalSlides) * 100; // 最初のスライドの進捗を反映
49    jQuery(".progress-bar1-1").css("width", percentage + "%");
50  });
51
52  // スライダーの初期化
53  jQuery(document).ready(function () {
54    jQuery(".product-slider1-1").each(function (index, element) {
55      var $slider = jQuery(element);
56      var $parentSlideWrap = $slider.closest(".slide-wrap");
57      var $arrowBox = $parentSlideWrap.find(".arrow_box"); // スライダーに対応する矢印のコンテナを指定
58
59      // slick-nav をスライダーの外側に追加
60      if ($parentSlideWrap.find(".slick-nav").length === 0) {
61        var $slickNav = jQuery(
62          '<div class="slick-nav">' +
63            '<div class="slick-num"><span class="now-count"></span> / <span class="all-count"></span></div>' +
64            '<div class="arrow_box"></div>' +
65            '<div class="progress-container">' +
66            '<div class="progress-bar1-1"></div>' +
67            "</div>" +
68            "</div>",
69        );
70        $parentSlideWrap.append($slickNav); // スライダーの親要素に追加
71      }
72
73      var $slickNav = $parentSlideWrap.find(".slick-nav");
74      var $slickNum = $slickNav.find(".slick-num");
75      var $progressContainer = $slickNav.find(".progress-container");
76
77      $slider
78        .on("init", function (event, slick) {
79          // カウントの初期化
80          $slickNum.find(".now-count").text(slick.currentSlide + 1);
81          $slickNum.find(".all-count").text(slick.slideCount);
82        })
83        .slick({
84          arrows: true,
85          appendArrows: $slickNav.find(".arrow_box"), // 矢印をslick-navのarrow_boxに配置
86          prevArrow: '<div class="slide-arrow prev-arrow slick-prev"></div>',
87          nextArrow: '<div class="slide-arrow next-arrow slick-next"></div>',
88          dots: false,
89          infinite: true,
90          fade: false,
91          slidesToShow: 1,
92          slidesToScroll: 1,
93          speed: 600, // 切り替わり中のスピード
94          autoplaySpeed: 4000, // 静止中のスピード
95          autoplay: true,
96          centerPadding: "60px",
97          variableWidth: true,
98          responsive: [
99            {
100              breakpoint: 768,
101              settings: {
102                centerMode: true,
103                arrows: true,
104              },
105            },
106          ],
107        })
108        .on("beforeChange", function (event, slick, currentSlide, nextSlide) {
109          // カウントを更新
110          $slickNum.find(".now-count").text(nextSlide + 1);
111        });
112

113      // スライダーが初期化されたときのプログレスバー更新
114      $slider.on("init", function (event, slick) {
115        updateProgressBar(slick.currentSlide, slick.slideCount, $slider);
116      });
117
118      // スライドが変更されるたびのプログレスバー更新
119      $slider.on("beforeChange", function (event, slick, currentSlide, nextSlide) {
120        updateProgressBar(nextSlide, slick.slideCount, $slider);
121      });
122    });
123
124    // プログレスバー更新関数
125    function updateProgressBar(currentSlide, totalSlides, $slider) {
126      var percentage = ((currentSlide + 1) / totalSlides) * 100;
127      $slider
128        .closest(".slide-wrap")
129        .find(".progress-bar1-1")
130        .css("width", percentage + "%");
131    }
132
133    // イラストマップのmap_pinクリック → スライド切り替え
134    jQuery(".map_pin_imgs .map_pin").on("click", function (e) {
135      e.preventDefault();
136      var slideIndex = parseInt(jQuery(this).attr("data-slide-num"), 10) - 1;
137      jQuery(".product-slider1-1").slick("slickGoTo", slideIndex);
138    });
139  });
140});
141
142jQuery(document).ready(function () {
143  // ＊＊＊　トップBUSINESS　ストレッチボックス
144
145  // 【リサイズ対応の完全な実装】
146  var mediaQuery = window.matchMedia("(min-width: 769px)");
147
148  // イベントハンドラーを定義
149  function handleMouseEnter() {
150    jQuery("#busi_stretch_container .stretch_col").removeClass("is_active is_hide");
151    jQuery("#busi_stretch_container .stretch_col").addClass("is_hide");
152    jQuery(this).removeClass("is_hide").addClass("is_active");
153  }
154
155  function handleMouseLeave() {
156    jQuery("#busi_stretch_container .stretch_col").removeClass("is_active is_hide");
157  }
158
159  // イベントリスナーの追加/削除を制御
160  function handleStretchBox(mq) {
161    if (mq.matches) {
162      // 769px以上：イベントを有効化
163      jQuery("#busi_stretch_container .stretch_col").on("mouseenter", handleMouseEnter);
164      jQuery("#busi_stretch_container").on("mouseleave", handleMouseLeave);
165    } else {
166      // 768px以下：イベントを無効化し、クラスをリセット
167      jQuery("#busi_stretch_container .stretch_col").off("mouseenter", handleMouseEnter);
168      jQuery("#busi_stretch_container").off("mouseleave", handleMouseLeave);
169      jQuery("#busi_stretch_container .stretch_col").removeClass("is_active is_hide");
170    }
171  }
172
173  // 初回実行
174  handleStretchBox(mediaQuery);
175
176  // リサイズ時の監視
177  mediaQuery.addEventListener("change", handleStretchBox);
178});
179
180jQuery(document).ready(function () {
181  // ＊＊＊　クレーン　インデックス用ストレッチボックス
182
183  // 【リサイズ対応の完全な実装】
184  var mediaQuery = window.matchMedia("(min-width: 769px)");
185
186  // イベントハンドラーを定義
187  function crihandleMouseEnter() {
188    jQuery("#cri_stretch_container .stretch_col").removeClass("is_active is_hide");
189    jQuery("#cri_stretch_container .stretch_col").addClass("is_hide");
190    jQuery(this).removeClass("is_hide").addClass("is_active");
191  }
192
193  function crihandleMouseLeave() {
194    jQuery("#cri_stretch_container .stretch_col").removeClass("is_active is_hide");
195  }
196
197  // イベントリスナーの追加/削除を制御
198  function crihandleStretchBox(mq) {
199    if (mq.matches) {
200      // 769px以上：イベントを有効化
201      jQuery("#cri_stretch_container .stretch_col").on("mouseenter", crihandleMouseEnter);
202      jQuery("#cri_stretch_container").on("mouseleave", crihandleMouseLeave);
203    } else {
204      // 768px以下：イベントを無効化し、クラスをリセット
205      jQuery("#cri_stretch_container .stretch_col").off("mouseenter", crihandleMouseEnter);
206      jQuery("#cri_stretch_container").off("mouseleave", crihandleMouseLeave);
207      jQuery("#cri_stretch_container .stretch_col").removeClass("is_active is_hide");
208    }
209  }
210
211  // 初回実行
212  crihandleStretchBox(mediaQuery);
213
214  // リサイズ時の監視
215  mediaQuery.addEventListener("change", crihandleStretchBox);
216});