hiroeleganceのエレガンスとは呼べない日常

WEB屋hiroelegance(ヒロエレガンス)のブログhiroeleganceのエレガンスとは呼べない日常略して「エレ日」です。YouTubeで毎週火曜0時にラジオを配信しています。

軽量レスポンシブスライダーFlexSlider2

   

flexslider-2
現在フリーランスで請けているサイトリニューアルでスライダーを付けたくて
このjQueryを使ったのですが、設定にハマったのでメモです。

本家からファイルをダウンロードする。

http://flexslider.woothemes.com/

ファイルを解凍します。

スライダーを表示するサーバーにファイルをアップします。

  1. fontsフォルダ
  2. flexslider.css
  3. 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を指定しないと表示されませんので気をつけてください。

  広告

 - hiroe日常