画像スライダー Swiper の設定・使い方 (HTML, CSS, JavaScript)

最終更新日:2020年10月05日 公開日:2020年1月31日

ホームページで使われる「画像スライダー」は種類が多数あり,どれを使うか迷う.

無料で商用利用可能な Swiper

少し調べてみた限り,Swiper というスライダーがとてもよく出来ていると思ったのでこのスライダ―の使い方を紹介する.
(このスライダーはMITライセンスなので,無料での商用利用が可能です.)

下のサンプルコードで作ったもの.(IE で見ると分かるが,左右の矢印が表示されない.)

スライダー Swiper の使い方・設置方法

基本的に【実例12パターン】画像スライダーはSwiper使っておけば間違いない!実用的な使い方を紹介のページがよく説明されていると思うので,こちらを参照してください.

しかし,IE11 で表示させると右左の矢印が表示されない.
本家のページを IE11 で見てもやっぱり表示されない.
そこで,「IE11で Swiper の矢印を表示させる設定」を一番下に追加して説明します.(2020年1月現在)

まず,Swiper のgithub ページからダウンロードします.
右にある
[Clone or download]

[Download ZIP]
を押すと,swiper-master.zip というファイルがダウンロードされる.

以下の場所にある二つのファイルを取り出す.

以下のようにヘッダ部分にでも入れると良い.

Swiper のデモページ

最もよく見るのは Loop Mode かなと思うので,そこだけ抜き出すと,

スタイルシート部分

スライダー本体部分

スクリプト部分(最後の </body> の直前にでも入れておくと良い.)

 

IE11で Swiper の矢印を表示させる設定

IE では,矢印のフォントが表示されないので,fontawesome を使って,左右の矢印を表示する方法について説明する.

ちょうど「【SWIPER.JS】スライダーの矢印カスタム」のページで fontawesome を使った方法が見つかったので参考にさせていただいた.

fontawesome 呼び出し部分(例)

スタイルシート

下のスライダーは InternetExplorer 11 でも見えるはず.

Swiper を使っていて,IE で矢印が消えることに困っている方は一度試してみてください.

 

Contact

ご質問等ありましたら,下のフォームからお願いします.

 
contact
無料ダウンロード中!
大好評の書籍はこちら
Pagetop