サイト制作メモ

“Swiper”を使ったスライドで左右に画像を表示する

投稿日:2017年9月8日 更新日:

JQueryなしで動く”Swiper”という便利なプラグインを使ってのスライドショー。
左右に画像を表示したい時の注意点をメモ。

ダウンロードはこちらから
swiper公式サイト

使う中ですごく分かりやすかったのがswiperオプションを日本語に訳してくれたサイト。
swiperオプション(日本語)

まずはhtml。
スライドに使用する画像のパスを任意のパスに変えて下さい。

こちらがjsファイル。
左右の画像を表示するにはこのslidesPerViewの値を’auto’にします。

スタイルの指定もしてください
margin:0 auto;でメイン画像を中央に。
max-width: 1000px;で幅の指定をします。

ただ、この指定だと画像の横幅が1000pxを超えていた場合
オプションで指定したspaceBetweenがききません。

画像にmarginやpaddingを指定しても矢印の位置がずれてしまうので
containerのmax-widthに対して
画像を少し小さく指定します。
(多分もっとスマートな指定があるんだと思うけど)

オプションのslidesPerView: ‘auto’,を指定しただけでは左右画像の表示がされないので
スタイルも一緒に指定しましょう。

- サイト制作メモ
-,

関連記事

ページ読み込み時にフェードインのエフェクト【超簡単!】

jQueryの取扱が苦手な私でもすぐに実装することができたフェードインエフェクト。 トップのイメージ画像の上にテキストをふわっと表示させたいなーと思い調べてたら、かなりシンプルな記述でフェードインエフ …

cssでlistのborderを斜め線にする

このサイトのメニューでも使ってますが、やってみたかったけどなかなか方法が見つけられなかったリストの区切り(border)を直線でなく斜め線にする方法。 まずはHTMLでメニュー作成 普通にリストで作成 …

背景画像を複数指定する方法(css)

背景画像を複数指定したい時があり調べてたところ 順番にcssを指定するところまでは分かったけど書き方がよく分からない・・・ 複数背景の使用はよく使いそうなのでメモ。 基本的には,(カンマ)区切りで続け …

webサイト制作時に役立つ!メインカラーを元にカラーを選べるサイト

web制作する時にカラーの組み合わせを調べたい時、色々なジェネレーターはあるけど たとえば メインカラーがすでに決まっていて それに合うカラーが知りたい時 ってないですか? 私は結構あります。 で、ジ …

cssだけでドロップダウンメニューを実装(軽い!)

ドロップダウンメニューをcssだけで実装できる方法があるらしい。 jsファイルの読み込みがないなら軽くていいなぁと思いやってみた。 cssでドロップダウンメニューサンプル まずはhtml 一般的な入れ …

翻訳する