LoginSignup
3
3

More than 3 years have passed since last update.

jQueryプラグインFlex Slider

Posted at

Flex Sliderは万能スライダー?

スライドショー用のjQueryプラグインってたくさんある〜。
Skipperなども検討したのですが、どうやらFlex Slider はカスタマイズ性に非常に優れている様??なので使ってみた :mouse: :hibiscus:

レスポンシブ対応。
タッチコントロールのフリックスライドにも反応。
画像にリンクを貼ることもオッケー。
キャプションも表示可能。
動画もスライドできる。
コントロールボタンやナヴィゲーションも細かく設定できる

など非常に使い勝手がよいプラグインの様です。

スライダープラグインをまとめている記事 :ledger:
高機能なJavaScriptの人気スライダープラグイン4つを実際に使ってレビューしてみた

導入手順

1. FlexSliderのプラグイン本体をダウンロード

FlexSlider
スクリーンショット 2019-07-05 9.43.53.png

2. <head>〜</head>内にダウンロードしたスクリプトとスタイルシートを読み込む。

ダウンロードした jquery.flexslider.js、flexslider.css のファイルを、jquery ファイルと一緒に設置。

index.html
<link rel="stylesheet" href="flexslider.css" type="text/css" />
<script src="jquery.js"></script>
<script src="jquery.flexslider.js"></script>

3. htmlファイルのマークアップはこれだけ

index.html
<div class="flexslider">
<ul class="slides">
<li><img src="slider1.jpg" /></li>
<li><img src="slider2.jpg" /></li>
<li><img src="slider3.jpg" /></li>
<li><img src="slider4.jpg" /></li>
</ul>
</div>

とてもシンプル。
次に最低限のjsの記述をしてこれで動く様になります。

index.html
<script type="text/javascript" charset="utf-8">
$(window).load(function() {
$('.flexslider').flexslider();
});
</script>

オプション

オプションの種類 :hugging: :fire:
【jQuery】超万能スライダー FlexSlider の使い方をマスターする。

3
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
3