サイト制作メモ

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

投稿日:

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

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

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

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

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

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

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

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

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

-サイト制作メモ

執筆者:

関連記事

拡大してもボヤけない、アイコンフォントが便利すぎる

サイト作成の時にメニューアイコンを作っていたけど 3つのメニューのうち1つをアイコンフォント使ってたら表示の鮮明さに驚いた。 他のアイコンはpng形式の画像だったけど全然違う。 ぼやけないしキレイ! …

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

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

no image

WordPress と Facebookの連携が表示されない原因

dddwordpressのテーマ「xeory_extension」を使っていた時 初期設定でいくつかの項目を入力するとfacebookとの連携ができるようになってたのでテストサイトで設定項目を入力する …

簡単な背景画像のパララックス

jquaryをリンクさせる htmlファイルでsection毎に背景画像を設定 cssにて。

fix cover あとはsection …

サイトのタイトルを画像置換する方法

よくやり方忘れてしまうのでメモ。 サイトのタイトルをh1とかで記述した場合 それを画像置換するための方法は色々あって 評価が分かれるので現時点でいいなと思っているものを。 まずはhtml [crayo …