レスポンシブ対応の高機能スライダー「Swiper」

公開:2018年05月17日

最近よく見るようになった横に画像がスライドする広告。かっこいいなと思いながらも設置は難しいんだろうなと諦めている人に朗報です! 実は簡単に設定できるのです。必要なファイルもたったの二つ! やってみると簡単なので早速試していきましょう。

swiperを使うために必要なソース

必要なファイルは下の2つになっています。

swiper.cssとswiper.min.jsはダウンロードして手に入れてください。テキストをクリックすると公式サイトへ移動します。

公式サイトへ行ったら、『download』→『バージョンのテキスト』(現在はv4.2.6)をクリック→Source code (zip)でダウンロードができます。zipファイルを解凍するとたくさんのファイルが入っているので『dist』のフォルダから『css』もしくは『js』へと移動し、それぞれのファイルを獲得してください。

swiperをいざ実装!

ではファイルが揃ったら、ホームページに実装していきましょう。

script~/scriptの部分は自分で動作をさせたいようにswiperの設定を行うことが可能です。設定は細かく行えますので、後述します。とりあえず動くように最低限のオプションを設定してあります。

Swiperは設置するファイル数も少なく、書き込む要素も少ないので簡単に実装できるのが嬉しいです。

Swiperの設定について

swiperは設定項目が膨大にあって、説明をするのも覚えるのも一苦労です。というわけでswiperの設定に関しては重要度が高いものだけを紹介していきます。

この辺りを設定に入れておけば最低限まともな表示に見えるはずです。より詳細に設定したい人は専用のサイトを見に行くことをオススメします。頭が痛くなるほどたくさんのオプションがあなたを待っていますよ!

矢印の変更

矢印のスタイルは以下の部分を変更することで可能です。しかし、変更しても元々のスタイルが邪魔してうまくいかないことがあります。ベースのスタイルシートをいじっても良いのですが、それよりも『!important;』を使えば、簡単に変更することができます。

widthとheightにあわせて、background-size:を合わせればお望みのサイズで表示出来るようになります。初期のどことなくかっこ悪い矢印を変更したい場合には、ぜひご利用ください。

一緒に読まれている記事

関連する記事

  • きちんと結果を出せるホームページにしたい
  • 今のホームページを新しく作り替えたい
  • ホームページをもっと効果的に運用したい
  • ホームページの定期的アドバイザーが欲しい

こんなお悩みをお持ちではありませんか?

弊社はホームページの悩みをすべて解決します!

ご相談は下記からお気軽にご連絡ください!