ECサイトとかでよくある、「TOPの大きな画像が次々スライドされていくやつ」を実装したくて探していたところ、「FlexSlider」というプラグインがあることを発見しました
よく使われていて尚且つ簡単！みたいなので私もやってみました。
jQuery超初心者ですが、なんとか実装できたので、まとめておきます！
1.「FlexSlider」をダウンロード
まずはFlexSliderを下記よりダウンロードします。
ダウンロードできたら解凍して、
中に入っているファイルたちをボコーン！と自分の環境に入れます。
2.<head>タグ内にjQueryを読み込ませる
<head>～<head>タグ内に下記を入れます。
JQueryの読込も忘れずに！！
HTML
<link rel="stylesheet" href="flexslider.css" type="text/css" />
<script src="jquery.js"></script>
<script src="jquery.flexslider.js"></script>
ちなみに私はjQuery読込したはいいけど、自分のサイトはhttps://なのに
jQueryはhttp://で読み込んでたので、
エラーで全くスライダーが表示されず、1時間くらいをドブに捨てました
これも勉強だと思えば・・・（涙目）
3.スライダーにしたい画像を入れる
HTML
<div class="flexslider">
<ul class="slides">
<li><img src="画像1.jpg" /></li>
<li><img src="画像2.jpg" /></li>
<li><img src="画像3.jpg" /></li>
<li><img src="画像4.jpg" /></li>
</ul>
</div>
4.JSを入力
Javascript
<script type="text/javascript" charset="utf-8">
$(window).load(function() {
$('.flexslider').flexslider();
});
</script>
ここの部分については、FlexSliderのサイトに載ってるスライダーの見本から
自分が実装したいJSを引っ張ってくればOKです！！
まとめ
参考サイト様
【jQuery】超万能スライダー FlexSlider の使い方をマスターする。
こちらにカスタマイズする際のオプションがたくさん載っています
私もひとまず実装はできたので、後は自分の作ったサイト用にカスタマイズしていきますが・・・難しそう！！けど頑張る！！