軽量レスポンシブスライダーFlexSlider2
現在フリーランスで請けているサイトリニューアルでスライダーを付けたくて
このjQueryを使ったのですが、設定にハマったのでメモです。
本家からファイルをダウンロードする。
http://flexslider.woothemes.com/
ファイルを解凍します。
スライダーを表示するサーバーにファイルをアップします。
- fontsフォルダ
- flexslider.css
- jquery.flexslider-min.js
CSS読み込み（head内）
<link rel="stylesheet" href="/css/flexslider.css" type="text/css" media="screen" />
jquery読み込み・スライド用設定スクリプト（/body手前）
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="/js/flexslider2/jquery.flexslider-min.js"></script>
<script>
$(window).load(function() {
$('.flexslider').flexslider({
animation: "slide",
pauseOnAction: false,
slideshowSpeed: 3000
});
});
</script>
html
<div class="flexslider">
<ul class="slides">
<li><img src="slide1.jpg" /></li>
<li><img src="slide2.jpg" /></li>
<li><img src="slide3.jpg" /></li>
<li><img src="slide4.jpg" /></li>
</ul>
</div>
今回、スライドの左右に表示されるWEBフォントの矢印が表示されなかったのですが、
WEBフォントのファイル（fonts）をアップすることで解決しました。
あと、WordPressの場合相対パスではなく絶対パスでファイルのURLを指定しないと表示されませんので気をつけてください。