swiper.js　幅によってエフェクトを変更したい

swiper.jsを使用しています。

レスポンシブに対応させてエフェクトを変えたいのですが出来ません。

767px以上：3枚のスライド
767px以下：1枚のフェード

3枚から1枚の変更は出来たのですが、エフェクトが効きません。

他の設定が必要なのでしょうか？

<script>
  var swiper = new Swiper('.swiper-container', {
    effect: "slide", //"slide", "fade", "cube", "coverflow" or "flip"
	loop: true,
    speed: 500,
    autoHeight: true,
	slidesPerView: 3,
	spaceBetween: 20, 
	centeredSlides : true,
	breakpoints: {
		767: {
			effect: "fade",
			slidesPerView: 1,
			spaceBetween: 0
		},
	},			
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
  },
    pagination: {
      el: '.swiper-pagination',
      dynamicBullets: true,
  },
    autoplay: {
      delay: 3000,
      disableOnInteraction: true,
  },   
  });  
</script>

yasutomi

2019/06/28 12:03

回答を得るにはHTMLとCSSの記載も必要です。

syuus

2019/06/28 14:04

直接の回答ではありませんが、公式ドキュメントに `breakpoints` では `effect` を変更できないとの説明がありました。 https://idangero.us/swiper/api/ > Such parameters like slidesPerColumn, loop, direction, effect won't work. ですので、それ以外の方法で `effect` を変更する必要があります。

行動規範の内容に同意します

回答1件

ベストアンサー

公式ドキュメントを読むと、ウィンドウサイズが変化した後に mySwiper.destroy(deleteInstance, cleanStyles); でイベントとインスタンスを削除して、パラメータを書き換えて実行しなおせば effect の書き換えが可能なようです。
あまりきれいなコードではありませんが、サンプルを置いておきます。

html
1<!DOCTYPE html>
2<html>
3<head>
4  <meta charset="UTF-8">
5  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/css/swiper.min.css">
6  <style>
7    .swiper-container {
8      width: 100%;
9    }
10    .swiper-slide {
11      background: #fff;
12    }
13  </style>
14</head>
15<body>
16  <div class="swiper-container" id="swiper">
17    <div class="swiper-wrapper">
18      <div class="swiper-slide">Slide 1</div>
19      <div class="swiper-slide">Slide 2</div>
20      <div class="swiper-slide">Slide 3</div>
21    </div>
22  </div>
23
24  <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/js/swiper.min.js"></script>
25  <script>
26    document.addEventListener('DOMContentLoaded', function () {
27      var mql = window.matchMedia('screen and (max-width: 767px)');
28      var prams = {
29        effect: 'fade',
30        loop: true,
31        speed: 500,
32        autoHeight: true,
33        slidesPerView: 1,
34        spaceBetween: 20,
35        centeredSlides: true,
36      };
37      var mySwiper = new Swiper('.swiper-container', prams);
38
39      function slider(mql) {
40        if (mql.matches) {
41          prams.effect = 'fade';
42          prams.slidesPerView = 1;
43        } else {
44          prams.effect = 'slide';
45          prams.slidesPerView = 3;
46        }
47
48        mySwiper.destroy(true, true);
49        mySwiper = new Swiper('.swiper-container', prams);
50      }
51
52      mql.addListener(slider);
53      slider(mql);
54    });
55  </script>
56</body>
57</html>