swiper.js スライドの自動再生について

スライドの自動再生を、swiper.jsを利用して実装しています。
レイアウトは無視してください。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/css/swiper.css">
</head>
<body>
  <!-- Slider main container -->
  <div class="swiper-container" style="width:400px;">
    <!-- Additional required wrapper -->
    <ul class="swiper-wrapper">
    <!-- Slides -->
    <li class="swiper-slide" style="text-align:center;list-style:none;">Slide 1</li>
    <li class="swiper-slide" style="text-align:center;list-style:none;">Slide 2</li>
    <li class="swiper-slide" style="text-align:center;list-style:none;">Slide 3</li>
  </ul>

    <!-- ナビゲーションボタン -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>

  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/js/swiper.min.js"></script>
  <script>
    var mySwiper = new Swiper ('.swiper-container', {
      loop: true,
      autoplay: 3000,
      slidesPerView: 2,
      slidesPerGroup: 2,
      autoplayDisableOnInteraction: false,

    // ナビゲーションボタン
    nextButton: '.swiper-button-next',
    prevButton: '.swiper-button-prev',

    });
</script>
</body>
</html>

スライドを自動再生で２枚ずつ回したいのですが、自動にするとSlide3 Slide1が繰り返し表示され、Slide2が出てきません。
ナビゲーションボタンをクリックした時と同じようにスライドさせるには、どのオプションを使えばよろしいでしょうか。

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

回答1件

slidesPerGroup: 2,
を２の場合は画像の枚数を偶数にしてください。
最後の枚数が上手く計算されないようです。というかちゃんと枚数を計算した結果とも言えますけど。
slidesPerView: 2,
slidesPerGroup: 2,
centeredSlides: false,
initialSlide: 0,

後はこんな感じで上手くいかないでしょうか

「追加」
3枚であれば一番簡単なのは下記のような感じでまとめてしまう事でしょうか

            <div class="swiper-slide">
              <img src="dummy/dummy1.png" />
              <img src="dummy/dummy2.png" />
            </div>
            <div class="swiper-slide">
              <img src="dummy/dummy3.png" />
              <img src="dummy/dummy1.png" />
            </div>
            <div class="swiper-slide">
              <img src="dummy/dummy2.png" />
              <img src="dummy/dummy3.png" />
            </div>

        slidesPerView: 1,
        slidesPerGroup: 1,

後、イベントを拾って１つ進めるとか

        onSlideChangeEnd: function(swiper){
          if(flg){
            swiper.slideNext();
            flg = false;
          }else{
            flg= true;
          }
        }

適当な場所にvar flg=false;

投稿2017/03/08 21:59

編集2017/03/09 21:15