前提・実現したいこと
https://gyazo.com/b16abf6638a1b4fa691123c1860381c7
・上記キャプチャを実現したい
発生している問題・エラーメッセージ
https://gyazo.com/1238dfd8d1ac52b06a10a4b257aa9953
・上記キャプチャのように端のものが中途半端に出てしまう
(キャプチャ上は右だけはみ出ていますが、スライドすると左もはみ出たりします)
該当のソースコード
.swiper-container { margin: 0 auto; position: relative; overflow: hidden; list-style: none; padding: 0; /* Fix of Webkit flickering */ z-index: 1; max-width:1480px; width:100%; } .swiper-wrapper { position: relative; max-width:1280px; width:100%; height: 100%; z-index: 1; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-transition-property: -webkit-transform; transition-property: -webkit-transform; -o-transition-property: transform; transition-property: transform; transition-property: transform, -webkit-transform; -webkit-box-sizing: content-box; box-sizing: content-box; } .swiper-slide { -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; max-width:400px; height: 100%; position: relative; -webkit-transition-property: -webkit-transform; transition-property: -webkit-transform; -o-transition-property: transform; transition-property: transform; transition-property: transform, -webkit-transform; }
試したこと
下記スクリプトをいれています。
var swiper = new Swiper('.swiper-container', {
// オプションパラメータ(一部のみ抜粋)
loop:true,
speed: 800, // スライドが切り替わるトランジション時間(ミリ秒)。
slidesPerView: 3,
centeredSlides : true,
slideToClickedSlide: true,
spaceBetween: 40, // スライド間の余白サイズ(ピクセル)
// レスポンシブ化条件
breakpoints: {
// 980ピクセル幅以下になったら
980: {
slidesPerView: 3,
spaceBetween: 30
},
// 640ピクセル幅以下になったら
640: {
slidesPerView: 2,
spaceBetween: 20
}
},
// 前後スライドへのナビゲーションを表示する場合 navigation: { nextEl: '.swiper-button-next', // 次のスライドボタンのセレクタ prevEl: '.swiper-button-prev', // 前のスライドボタンのセレクタ },
});
補足情報(FW/ツールのバージョンなど)
全体の横幅は1480px、コンテンツの横幅(矢印抜きのところ)は1280px、各コンテンツは400px、横のコンテンツとのマージンは40pxです。
どなたかお力を貸して頂けないでしょうか?
どうぞよろしくお願いします。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。