swiperで２枚１組のスライダーを作りたい

slidesPerView:2で画像を2枚表示したスライダーを作成したいのですが、1枚しか表示されず困っております。

実現したいこと

slidesPerView:2で画像を2枚表示したスライダーを作成したい。

発生している問題・エラーメッセージ

スライダーの画像が1枚しか表示されない。

該当のソースコード

html

<div class="swiper  lookslide">
    <!-- Additional required wrapper -->
    <div class="swiper-wrapper">
    <!-- Slides -->
    <div class="swiper-slide"><img src="img/1.jpg"></div>
    <div class="swiper-slide"><img src="img/2.jpg"></div>
    <div class="swiper-slide"><img src="img/3.jpg"></div>
    <div class="swiper-slide"><img src="img/4.jpg"></div>
    </div>
    <!-- If we need navigation buttons -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>

    </div>

css

.swiper{
    width: 1200px;
    height: 851px;
}
.swiper .lookslide{
}
.swiper-slide{
}
.swiper-button-prev,
.swiper-button-next{
    color: #000;
}

var swiper = new Swiper('.lookslide', {
    // Optional parameters
    // direction: 'vertical',
    loop: true,
    speed: 900,
    // centeredSlides: true,
    slidesPerView: 2,
    spaceBetween: 0,
    effect: "slide",
    // fadeEffect: {
    //   crossFade: true // クロスフェードさせる
    // },
    // autoplay:{
    //   delay: 3000,
    //   disableOnInteraction: false,
    // },
  
    // If we need pagination
    // pagination: {
    //   el: '.swiper-pagination',
    //   clickable: true
    // },

      // Navigation arrows
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
  
    breakpoints: {
          767: {
              slidesPerView: 1,
              spaceBetween: 10
          }
      }
    
  });

試したこと

ここに問題に対して試したことを記載してください。

補足情報（FW/ツールのバージョンなど）

swiperV8

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

回答1件

ベストアンサー

スマホファーストの考え方なので、breakpoints: {767px: {...}}というのは、画面が767px以上の時の設定ですね。
その時slidesPerView: 1,にしていたので、PC画面で1枚しか表示されていませんでした。
逆にスマホの画面サイズの時は2枚表示されますね。
おそらく逆ではないでしょうか？

javascript
1var swiper = new Swiper('.lookslide', {
2  loop: true,
3  speed: 900,
4  slidesPerView: 1, // SPのとき1枚
5  spaceBetween: 0,
6  effect: "slide",
7  navigation: {
8    nextEl: '.swiper-button-next',
9    prevEl: '.swiper-button-prev',
10  },
11
12  breakpoints: {
13    767: {
14      slidesPerView: 2, // PCの時2枚
15      spaceBetween: 10
16    }
17  }
18});

投稿2022/10/30 15:41

編集2022/10/30 16:03

Cocode

総合スコア2314

KOI02

2022/10/30 15:51

ご連絡ありがとうございます！ img { max-width: 100%; height: auto; } 上記確認していたところcssにすでに入っておりまして。。 width:1200pxのコンテンツにwidth:600pxの画像を横並び2枚入れたいのですが、左寄りになり、右が余白。1200左右いっぱいに矢印swiper-buttonが出ています。もしお分かりでしたらご尽力いただきたいです！