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日常