@xopoyoooooxoposted at 2024-02-02

swiperで偶数個（４枚）表示させ、両端を見切れさせたい

Q&A

解決したいこと

swiperでスライダーを作成しています。
スライダーの枚数を偶数個（４枚）表示させ、両端を見切れさせたいのですが中々うまくいきません。
レイアウトがうまくいってもループしてくれなくなります。

解決方法を教えて下さい。

該当するソースコード

document.addEventListener('DOMContentLoaded', function () {
  var bannerSwiper = new Swiper('.banner-swiper', {
    loop:true,
    slidesPerView: 2.2,
    spaceBetween: 25,
    speed: 600,
    autoplay: {
      delay: 3000,
  
    },
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
    pagination: {
      el: '.swiper-pagination',
      type: 'bullets',
    },

  });
});

自分で試したこと

slidesPerView: 2

に変更したところループはしてくれるのですが、レイアウトが期待通りにいきません。

0 likes

1Answer

@STSynthe posted at 2024-02-05

過去質問ですが、現象はこちらとほぼ同じでしょうか。

に変更したところループはしてくれるのですが、レイアウトが期待通りにいきません。

現行のバージョン11では少し内容が変わっていますが、要素数 が slidesPerView + α を上回らなければならない仕様は変わってません。なのでslidesPerView: 2は正しい数値です。
あと「両端を見切れさせたい」とのことですが、中央配置のパラメーターcenteredSlides: trueが無いのも原因の一つとして考えられます。この辺りは公式マニュアルなどをよく確認してください。

デモページを見ると色々ヒントがあります。

0Like

Are you sure you want to delete the question?