https://www.fujisan-kkb.jp/top/js/script.js

1// JavaScript Document
2
3// ========================
4// メインビジュアル スライド
5// ========================
6const mainSwiper = new Swiper('.slide_mainvisual', {
7  autoplay: true,
8  loop: true,
9  effect: 'fade',
10  speed: 300,
11  pagination: {
12    el: ".slide_mainvisual .swiper-pagination",
13    clickable: true,
14  },
15  navigation: {
16    nextEl: '.slide_mainvisual .swiper-button-next',
17    prevEl: '.slide_mainvisual .swiper-button-prev',
18  },
19});
20
21
22// ========================
23// イベント情報 スライド
24// ========================
25const eventSwiper = new Swiper('.slide_events', {
26  autoplay: true,
27  centeredSlides: true,
28  loop: true,
29  slidesPerView: 1.5,
30  spaceBetween: "2%",
31  grabCursor: true,
32  pagination: {
33    el: ".slide_events .swiper-pagination",
34    type: 'progressbar',
35    clickable: true,
36  },
37  navigation: {
38    nextEl: '.slide_events .swiper-button-next',
39    prevEl: '.slide_events .swiper-button-prev',
40  },
41  breakpoints: {
42    1367: {
43      slidesPerView: 5,
44    },
45    1025: {
46      slidesPerView: 4.5,
47    },
48    769: {
49      slidesPerView: 3.5,
50    },
51    494: {
52      slidesPerView: 2.5,
53    },
54  },
55});
56
57function matchHeight(targetElement) {
58  const targetElements = document.querySelectorAll(targetElement)
59
60  if (targetElements.length > 1) {
61    let heightArray = []
62    targetElements.forEach((element) => {
63      const height = element.clientHeight
64      heightArray.push(height)
65    })
66    const maxHeight = Math.max(...heightArray)
67
68    targetElements.forEach((column) => {
69      column.style.height = maxHeight + 'px'
70    })
71  }
72}
73window.addEventListener('DOMContentLoaded', () => {
74  matchHeight('.slide_events .block_txt')
75})
76window.addEventListener('resize', () => {
77  matchHeight('.slide_events .block_txt')
78})
79
80
81// ========================
82// バナー スライド
83// ========================
84const bannerSwiper = new Swiper('.slide_banner', {
85  autoplay: true,
86  loop: true,
87  slidesPerView: 2,
88  slidesPerGroup: 1,
89  spaceBetween: 10,
90  pagination: {
91    el: ".slide_banner .swiper-pagination",
92    clickable: true,
93  },
94  navigation: {
95    nextEl: '.slide_banner .swiper-button-next',
96    prevEl: '.slide_banner .swiper-button-prev',
97  },
98  breakpoints: {
99    769: {
100      slidesPerView: 5,
101      spaceBetween: 20,
102    },
103    494: {
104      slidesPerView: 3,
105    },
106  },
107});
108
109const bannerSwiper02 = new Swiper('.slide_banner02', {
110  autoplay: true,
111  loop: true,
112  slidesPerView: 2,
113  slidesPerGroup: 1,
114  spaceBetween: 10,
115  pagination: {
116    el: ".slide_banner02 .swiper-pagination",
117    clickable: true,
118  },
119  navigation: {
120    nextEl: '.slide_banner02 .swiper-button-next',
121    prevEl: '.slide_banner02 .swiper-button-prev',
122  },
123  breakpoints: {
124    769: {
125      slidesPerView: 5,
126      spaceBetween: 20,
127    },
128    494: {
129      slidesPerView: 3,
130    },
131  },
132});
133