https://meijinow.jp/assets_meijinow/js/swiper_setting.js

1// Mainvisual
2// --------------------------------------------------------------------------------
3const slider_mainvisual = new Swiper(".slider_mainvisual", {
4  autoplay: {
5    delay: 5000,
6    pauseOnMouseEnter: true,
7    },
8  speed: 900,
9  loop: true,
10  effect: "creative",
11  creativeEffect: {
12    prev: {
13      opacity: 0,
14      translate: ["-4%", 0, -1],
15      scale: .9,
16    },
17    next: {
18      opacity: 0,
19      translate: ["10%", 0, 0],
20    },
21  },
22  pagination: {
23    el: ".swiper-pagination",
24    type: "fraction",
25    renderFraction: function(){
26      return '<span class="swiper-pagination-current"></span>｜<span class="swiper-pagination-total"></span>';
27    },
28  },
29  navigation: {
30    nextEl: ".swiper-button-next",
31    prevEl: ".swiper-button-prev",
32  },
33});
34
35
36// Interview
37// --------------------------------------------------------------------------------
38const slider_interview = new Swiper(".slider_interview", {
39  effect: "slide",
40  speed: 500,
41  loop: true,
42  slidesPerView: 1,
43  centerMode: true,
44  spaceBetween: 20,
45  pagination: {
46    el: ".swiper-pagination",
47    type: "fraction",
48    renderFraction: function(){
49      return '<span class="swiper-pagination-current"></span>｜<span class="swiper-pagination-total"></span>';
50    },
51  },
52  navigation: {
53    nextEl: ".swiper-button-next",
54    prevEl: ".swiper-button-prev",
55  },
56});
57
58
59// Pickup
60// --------------------------------------------------------------------------------
61const slider_pickup = new Swiper(".slider_pickup", {
62  speed: 700,
63  //loop: true,
64  effect: "slide",
65  navigation: {
66    nextEl: ".swiper-button-prev",
67    prevEl: ".swiper-button-next",
68  },
69});
70
71
72// Article Footer Slider (SP)
73// --------------------------------------------------------------------------------
74$(window).on('load resize', function(){
75  var swiper; 
76  $(function(){
77    var w = $(window).width();
78    if (w <= 768) {
79      if (swiper) {
80        return;
81      } else {
82        swiper = new Swiper('.slider_article_footer', {
83          speed: 500,
84          slidesPerView: 1,
85          centerMode: true,
86          spaceBetween: 20
87        });
88      }
89    } else {
90      if (swiper) {
91        swiper.destroy();
92        swiper = undefined;
93      } 
94    } 
95  });
96});
97
98
99// Event Slider (SP)
100// --------------------------------------------------------------------------------
101$(window).on('load resize', function(){
102  var swiper; 
103  $(function(){
104    var w = $(window).width();
105    if (w <= 768) {
106      if (swiper) {
107        return;
108      } else {
109        swiper = new Swiper('.slider_event', {
110          speed: 500,
111          slidesPerView: 1,
112          centerMode: true,
113          spaceBetween: 20
114        });
115      }
116    } else {
117      if (swiper) {
118        swiper.destroy();
119        swiper = undefined;
120      } 
121    } 
122  });
123});
124
125
126// Tag Slider (SP)
127// --------------------------------------------------------------------------------
128const slider_tag_breakPoint = 768;
129let slider_tag ;
130let mySwiperBool ;
131
132window.addEventListener('load',()=>{
133  if( slider_tag_breakPoint < window.innerWidth){
134    mySwiperBool = false;
135  }else{
136    createSwiper();
137    mySwiperBool = true;
138  }
139},false);
140
141window.addEventListener('resize',()=>{
142  if( slider_tag_breakPoint < window.innerWidth && mySwiperBool){
143    slider_tag.destroy(false,true);
144    mySwiperBool = false;
145  }else if( slider_tag_breakPoint >= window.innerWidth && !(mySwiperBool)){
146    createSwiper();
147    mySwiperBool = true;
148  }
149},false);
150
151const createSwiper = () =>{
152  slider_tag = new Swiper('.slider_tag', {
153    speed: 500,
154    slidesPerView: "auto",
155    spaceBetween: 10,
156    initialSlide: 0,
157  });
158  setInitialSlideFromClass();
159}
160
161// Swiperインスタンスを更新してinitialSlideを変更
162function setInitialSlideFromClass(){
163  var slideWrapper = document.querySelector('.slider_tag');
164  var activeSlide = document.querySelector('.slider_tag .swiper-slide.current');
165  var initialSlideIndex = Array.from(activeSlide.parentNode.children).indexOf(activeSlide);
166  slider_tag.slideTo(initialSlideIndex);
167}