https://track15.jp/js/common.js

1$('body').on('click', '.nav-btn', function () {
2    $("nav").toggleClass("open");
3    $(".nav-btn").toggleClass("close");
4
5});
6
7$(function(){
8  $('nav a[href^="#"]').click(function(){
9    let speed = 500;
10    let href= $(this).attr("href");
11    let target = $(href == "#" || href == "" ? 'html' : href);
12    let position = target.offset().top;
13    $("html, body").animate({scrollTop:position}, speed, "swing");
14      $("nav").removeClass("open");
15    $(".nav-btn").removeClass("close");
16    return false;
17  });
18});
19
20
21$('body').on('click', '.slide-list h3', function () {
22    $(this).toggleClass("open");
23    $(this).next().slideToggle();
24
25});
26
27
28const $slider = $('.slider');
29
30// 左右の透過の2周目ががたつく対応
31$slider.on("beforeChange", (event, slick, currentSlide, nextSlide) => {
32
33  $slider.find(".slick-slide").each((index, el) => {
34    const $this = $(el),
35      slickindex = $this.attr("data-slick-index");
36    if (nextSlide == slick.slideCount - 1 && currentSlide == 0) {
37      // 現在のスライドが最初のスライドでそこから最後のスライドに戻る場合
38      if (slickindex == "-1") {
39        // 最後のスライドに対してクラスを付与
40        $this.addClass("is-active-next");
41      } else {
42        // それ以外は削除
43        $this.removeClass("is-active-next");
44      }
45    } else if (nextSlide == 0) {
46      // 次のスライドが最初のスライドの場合
47      if (slickindex == slick.slideCount) {
48        // 最初のスライドに対してクラスを付与
49        $this.addClass("is-active-next");
50      } else {
51        // それ以外は削除
52        $this.removeClass("is-active-next");
53      }
54    } else {
55      // それ以外は削除
56      $this.removeClass("is-active-next");
57    }
58  });
59});
60
61$slider.on("afterChange", (event, slick, currentSlide, nextSlide) => {
62    $(".slider iframe").hide();
63    $(".slider iframe").attr("src", "");
64    
65});
66
67$('body').on('click', '.slick-active', function () {
68   var movieurl = $(this).data('target');
69    $(this).find("iframe").show();
70    $(this).find("iframe").attr("src", movieurl);
71
72});
73// スライダー
74$slider.slick({
75  dots: false,
76      infinite: true,
77      slidesToShow: 1,
78      autoplay: false,
79      autoplaySpeed: 5000,
80     centerMode:true,
81    centerPadding:'24%',
82     responsive: [{
83      breakpoint: 896,  //ブレイクポイントを指定
84      settings: {
85        centerPadding:'20%',
86          arrows:true, 
87      }
88    }]
89});
90
91const $slider2 = $('.bnr-area');
92let lastWidth = window.innerWidth;
93
94function slider2Init() {
95  const slideCount = $slider2.children().length; // バナー枚数
96
97  // 1枚以下なら常に slick しない
98  if (slideCount <= 1) {
99    if ($slider2.hasClass('slick-initialized')) {
100      $slider2.slick('unslick');
101    }
102    return;
103  }
104
105  if (window.matchMedia('(max-width: 895px)').matches) {
106    // 895px以下 かつ 2枚以上のときのみ slick
107    if (!$slider2.hasClass('slick-initialized')) {
108      $slider2.slick({
109        slidesToShow: 1,
110        centerMode: true,
111        centerPadding: '20%', // 見切れ幅
112        arrows: false,
113        autoplay: true,
114        autoplaySpeed: 3000
115      });
116    }
117  } else {
118    // 896px以上は slick 解除
119    if ($slider2.hasClass('slick-initialized')) {
120      $slider2.slick('unslick');
121    }
122  }
123}
124
125// 初期表示
126slider2Init();
127
128// リサイズ時（横幅が変わったときのみ）
129$(window).on('resize', function () {
130  const currentWidth = window.innerWidth;
131
132  if (currentWidth !== lastWidth) {
133    lastWidth = currentWidth;
134    slider2Init();
135  }
136});