0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

jQuery(Swiperプラグイン)itemの横幅調整

Posted at

jQuery(Swiperプラグイン)itemの横幅調整

詩が生れて、画が出来る。_とかくに人の世は住みにくい。.png

上記の画像のように、横幅で私はハマりました。
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時間ほどかかりました。。。。
皆さんも気をつけましょう。。

以上です。
ありがとうございました。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?