jQueryで画像のスライドショーを実装できるプラグインは色々ありますが、
今回「FlexSlider 2」を使用してみたので、設定方法をメモします。
スライドショーさせる画像を用意し、jQueryで指定すれば
簡単に画像のスライドショーを実現することができます
下記にjQueryのプラグイン「FlexSlider 2」を使用して、
複数の画像をスライドショーさせた時の方法をメモします。
■ 「FlexSlider 2」を使用したスライドショーの使用方法
※下記、基本的な設定方法です。
下記URLより、「FlexSlider 2」をダウンロードします。
http://flexslider.woothemes.com/
【読み込むファイル】
jQueryと各ファイルを読み込みます。
<link rel="stylesheet" type="text/css" href="./flexslider.css" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> <script type="text/javascript" src="./jquery.flexslider.js"></script>
【JS】
クラスを指定し「flexslider」を使用します。
<script type="text/javascript">
$(function() {
$('.flexslider').flexslider({
animation: "slide",
slideshowSpeed: 5000
});
});
</script>
画像をスライドさせる為に「animation: “slide”」を指定します。
animationは「slide」と「fade」で設定することが可能です。
スライドショーのスピード（間隔）を「slideshowSpeed: 5000」で設定しています。
他にも設定は色々あります。
ページ下部に一部記載します。
【HTML】
スライドショーをさせる要素に「class=”flexslider”」を記述します。
<div class="flexslider"> <ul class="slides"> <li> <a href="https://www.google.co.jp/"><img src="./img/sample1.jpg" /></a> </li> <li> <img src="./img/sample2.jpg" /> <p>キャプション</p> </li> <li> <img src="./img/sample3.jpg" /> </li> <li> <img src="./img/sample4.jpg" /> </li> </ul> </div>
画像にリンクを貼る場合は、画像にaタグを指定すればリンクを貼ることが可能です。
また、キャプションを付ける場合はimgタグの箇所にpタグで指定します。
上記の設定をするだけでスライドショーを行えます。
スタイルがデフォルトの状態なので、デザインを変更する場合はCSSで調整します。
他にも色々なカスタマイズをすることが可能です。
| オプション | 内容 |
|---|---|
| animation | スライドの種類を設定します。「fade」か「slide」で指定します。 |
| direction | スライドの方向を設定します。横の場合「horizontal」、縦の場合「vertical」で指定します。 |
| reverse | 逆方向にスライドさせる場合は「true」を指定します。 |
| animationLoop | スライドをループさせるかを設定します。ループさせない場合は「false」を指定します。 |
| slideshow | 自動でスライドショーを行うかを設定します。手動にする場合は「false」を指定します。 |
| slideshowSpeed | スライドショーのスピード（間隔）を設定します。 |
| animationSpeed | アニメーションのスピードを設定します。 |
| randomize | ランダムでスライドショーをさせる場合は「true」で設定します。 |
| controlNav | ページャーを表示するかを設定します。表示しない場合は「false」を指定します。 |
| directionNav | 次へと前へのナビゲーションを表示するかを設定します。表示しない場合は「false」を指定します。 |
| prevText | 前へナビゲーションのテキストを指定します。 |
| nextText | 次へナビゲーションのテキストを指定します。 |
※上記は一部のオプションです。
他にも色々なオプションがあるので、様々なカスタマイズができそうです。
ぜひ、試してみてください。
お世話になります。今、FlexSlider2の導入を行っています。
上記の記事により導入したのですが、動作しませんでした。
そこで、ご多忙中恐れ入りますが、質問いたしますので、宜しくお願い申し上げます。
まず、
jQueryと各ファイルを読み込みます。に於いて
の部分ですが、index.html のと
の間に挿入しました。これで良いでしょうか？
【JS】
クラスを指定し「flexslider」を使用します。
$(function() {
$(‘.flexslider’).flexslider({
animation: “slide”,
slideshowSpeed: 5000
});
});
は、テキストエディタで、上記テキストを打ち込み、
名称を、tetudoumokei.js とし、index.html と同じ
フォルダ中に置きました。これでよろしいでしょうか？
【HTML】は、index.html のとの間に置きました。
JQueryは、上記で読み込んでいるので、載せていません。
ダウンロードして準備はしてあります。
何かが間違っているので動作しないと思われます。
ご教授を宜しくお願い申し上げます。
関根さん、コメントありがとうございます。
内容を確認しました。間違って解釈していたら、すいません。
ダウンロードしたファイル「jquery.flexslider.js」「flexslider.css」とjQueryはindex.htmlで読み込んでおりますでしょうか？
こちらを読み込んでいないと正常に動作しません。
おそらくですが、下記の構造になっていると思います。
index.html
jquery.flexslider.js
flexslider.css
tetudoumokei.js
後はHTMLをindex.htmlのbodyタグ内に記載し画像を用意すれば動作するはずです。
> ＜と＞で打った部分が無くなっております。
> 最初は、＜head＞と＜/head＞の間です。
> HTMLは、＜body＞と＜/body＞の間です。
上記の設定で問題無いと思います。
もし解決しない場合は、連絡ください。
はじめまして。こちらの導入を現在しているのですが、
動くところまでは完了しました。
が、画像にカーソルを当てた際左右に表示される「＜＞」の画像（アイコン？）が表示されません。×と言う風に、リンク切れかなにかのようになってしまいます。
この場合どのようにすればよろしいのでしょうか？
ダウンロードデータの中にはこちらの画像は入っていないので文字なのか、どこからか引っ張っているということでしょうか？
分かり辛い説明で申し訳ありません。
よろしくおねがい致します
mmさん、コメントありがとうございます。
返信が遅くなりました。
左右のアイコンについてですが、記載漏れをしておりました。すいません。
ダウンロードしたファイルの中にfontsというフォルダがあります。こちらが左右に表示されるアイコンになります。flexslider.cssでfonts内のファイルを読み込んでいます。
flexslider.cssと同じ階層にfontsフォルダをアップすれば表示されるかと思います。
確認してみてください！
お返事どうもありがとうございます！！
ご報告が遅れました。申し訳ございません。
上記のやり方で解決しました！
ありがとうございます！！
解決してよかったです！
コメントいただき、ありがとうございました！
現在参考にさせていただいてページを作成しています。
内の宣言との宣言は表記通りに、jquery.flexslider.jsとindex.htmlとflexslider.cssとjsを新たに作成したもの（上記されているものです）を同じ階層に入れているのですが、ブラウザ上でindex.htmlを実行すると表示されません。どのようにすればよいか教えていただけますでしょうか。
抜けている部分があったので補足です。
head内とbody内の宣言です。
fujisakiさん、コメントありがとうございます。
jqueryは読み込んでますか？
jqueryを読み込まないと動かないので、確認してみてください！