画像スライダー Swiper の設定・使い方 (HTML, CSS, JavaScript)
ホームページで使われる「画像スライダー」は種類が多数あり,どれを使うか迷う.
無料で商用利用可能な Swiper
少し調べてみた限り,Swiper というスライダーがとてもよく出来ていると思ったのでこのスライダ―の使い方を紹介する.
(このスライダーはMITライセンスなので,無料での商用利用が可能です.)
下のサンプルコードで作ったもの.(IE で見ると分かるが,左右の矢印が表示されない.)
スライダー Swiper の使い方・設置方法
使い方としては【実例12パターン】画像スライダーはSwiper使っておけば間違いない!実用的な使い方を紹介のページがよく説明されていると思うので,こちらを参照してください.
しかし,IE11 で表示させると右左の矢印が表示されない.
本家のページを IE11 で見てもやっぱり表示されない.
そこで,「IE11で Swiper の矢印を表示させる設定」を一番下に追加して説明します.(2020年1月現在)
まず,Swiper のgithub ページからダウンロードします.
右にある
[Clone or download]
の
[Download ZIP]
を押すと,swiper-master.zip というファイルがダウンロードされる.
以下の場所にある二つのファイルを取り出す.
以下のようにヘッダ部分にでも入れると良い.
最もよく見るのは Loop Mode かなと思うので,そこだけ抜き出すと,
スタイルシート部分
スライダー本体部分
スクリプト部分(最後の </body> の直前にでも入れておくと良い.)
IE11で Swiper の矢印を表示させる設定
IE では,矢印のフォントが表示されないので,fontawesome を使って,左右の矢印を表示する方法について説明する.
ちょうど「【SWIPER.JS】スライダーの矢印カスタム」のページで fontawesome を使った方法が見つかったので参考にさせていただいた.
fontawesome 呼び出し部分(例)
スタイルシート
下のスライダーは InternetExplorer 11 でも見えるはず.
Swiper を使っていて,IE で矢印が消えることに困っている方は一度試してみてください.
ご質問等ありましたら,下のフォームからお願いします.