• RSS

[JS]jQuery不要のコンテンツスライダーSwiperの使い方(デモあり)

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

このブログでもbxsliderなど、いくつか便利なスライダープラグインを紹介させていただいておりますが、今回はjQuery不要の高機能スライダーSwiperの使い方を、デモ付きで紹介しようと思います。

SwiperはIMG画像ファイルだけでなく背景画像もスライド可能で、しかもレスポンシブ対応のスライダーなので、様々なサイトで利用することができると思います。

Swiperのダウンロード

以下のページよりSwiperのファイル一式をダウンロードします。
]jQuery不要のコンテンツスライダーSwiperの使い方(デモあり)
(ダウンロードはGitHubから行います。)

GitHubからダウンロードしたswiper-master.zipを解凍して、swiper.min.cssswiper.min.jsファイルを読み込みます。

Javascriptのオプションは色々指定できますが、上記例は個人的によく使う設定です。

●スライドのエフェクトはフェード
●ループ再生あり
●自動切り替えあり(4秒)
●画像の左右に次へ前へのナビゲーションボタン表示
以下のページでオプション一覧を確認することができますので、サイトに合わせて調整してみてください。


Swiperの基本的な使い方(画像スライド)

まずは基本的な画像のスライドからご紹介します。

スライダーを設置したい場所に以下のような記述を行います。

スライダーの高さや画像のmax-widthの値などは、サイトに応じてCSSで適宜調整してみてください。
画像ファイルのスライドデモは以下にありますので、こちらもぜひ参考にしていただければと思います。
画像スライドのデモ


背景画像をスライド

背景に写真を置いてその上にテキストを載せ、要素ごとスライドさせることもできます。

あとはCSSで以下のように指定すると良いかと思います。

背景画像のスライダーデモはこちらです。
背景画像のスライドデモ



  • このエントリーをはてなブックマークに追加
  • follow us in feedly

コメント

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください