jQuery(Swiperプラグイン)itemの横幅調整
上記の画像のように、横幅で私はハマりました。
result-itemでmargin-rightを指定しているのですが
画像のように、下記のコードが優先さてしまいます。
element.style {
width:393.333px;
margin-right:40px;
}
ならば、これはどこで記述されているか探してその部分を変更すればよいと考えましたが、
これはプラグインで記述されているので、どうすればいいかわからなくなりました。
しかし、
横幅の調整は簡単でした。
Swiper導入する際に、オリジナルのJS(例main.jsなど)にSwiperのメソッドを入れると思います。
そこで調整可能でした。以下、例です。
// スワイパー(プラグイン)
var mySwiper = new Swiper('.swiper-container', {
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
loop: true,
pagination: {
el: '.swiper-pagination',
type: 'bullets',
clickable: true,
},
loop: true,
slidesPerView: 1,
spaceBetween: 28,
initialSlide: 1,
breakpoints: {
767: {
slidesPerView: 3,
spaceBetween: 40, //・・・・・・・・・・・・・・・この部分で横幅調整可能です。
initialSlide: 1,
},
375: {
slidesPerView: 1.1,
spaceBetween: 0,
initialSlide: 1,
}
},
});
私はここに気づくのに2時間ほどかかりました。。。。
皆さんも気をつけましょう。。
以上です。
ありがとうございました。