スライダー(Swiper)のautoplayをPCとSPで制御したい

###前提・実現したいこと
javascriptで動くSwiperというスライダーを使っています。mediaサイズが767以上ではAutoplayを止めて、767以下で動くようにしたいです。

###該当のソースコード

html
1<div class="swiper-container">
2         <!-- Additional required wrapper -->
3            <div class="swiper-wrapper">
4            <!-- Slides -->
5               <div class="swiper-slide"><img src="./images/slider4.png" alt=""></div>
6               <div class="swiper-slide"><img src="./images/slider5.png" alt=""></div>
7               <div class="swiper-slide"><img src="./images/slider6.png" alt=""></div>
8            </div>
9</div>

javascript
1<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/js/swiper.min.js"></script>
2<script>
3    var mySwiper = new Swiper ('.swiper-container', {
4    loop: true,
5    slidesPerView: 2,
6    spaceBetween: 10,
7    centeredSlides : true,
8    autoplay: 0,
9    autoplayDisableOnInteraction: false,
10    breakpoints: {
11    767: {
12      slidesPerView: 1,
13      spaceBetween: 0,
14      
15    }
16  }
17 });
18</script>

###試したこと

javascript
1<script>
2    var mySwiper = new Swiper ('.swiper-container', {
3    loop: true,
4    slidesPerView: 2,
5    spaceBetween: 10,
6    centeredSlides : true,
7    autoplay: 0,
8    autoplayDisableOnInteraction: false,
9    breakpoints: {
10    767: {
11      slidesPerView: 1,
12      spaceBetween: 0,
13      autoplay: 4000,
14    }
15  }
16 });
17</script>

試したことの１つは、breakpointsのところにautoplay:4000を追加してみましたが機能しませんでした。

次に以下のようにも試してみましたが、javascriptの知識がなく、これもうまく動きませんでした。SwiperにはstartAutoplayとstopAutoplayの２つのオプションがあるので、それをうまく使えれば止めることができると思ったのですが・・・。

<script>
    var mySwiper = new Swiper ('.swiper-container', {
    loop: true,
    slidesPerView: 2,
    spaceBetween: 10,
    centeredSlides : true,
    autoplay: 0,
    autoplayDisableOnInteraction: false,
    breakpoints: {
    767: {
      slidesPerView: 1,
      spaceBetween: 0,
      autoplay: 4000,
    }
  }
 });
 
var $win = $(window);

$win.on('load resize', function() {
  var windowWidth = $win.width();

  if (windowWidth > 1024) {
    $(window).load(function() {
    mySwiper.stopAutoplay();
}
  } else if (windowWidth > 768) {
    // TABの処理
   $(window).load(function() {
    mySwiper.startAutoplay();
}
  } 
});
 
</script>

###補足情報(言語/FW/ツール等のバージョンなど)
どこかをクリックすればスライダーが止まる方法はわかったのですが、メディアのサイズで止める方法が見当たらたりませんでした。どなたかお分かりになる方、ご教授のほどお願い致します。

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

回答1件

ベストアンサー

イベントの中でイベントを設定している状態だったので、想定通りの挙動をしていなかったのではないでしょうか。

JavaScript
1$(window).on('load resize', function() {
2  var windowWidth = $(window).width();
3  if (windowWidth <= 500) {
4    mySwiper.startAutoplay();
5  } else {
6    mySwiper.stopAutoplay();
7  } 
8});
9```**動くサンプル：**[https://jsfiddle.net/zkLok2an/1/](https://jsfiddle.net/zkLok2an/1/)