サイトマップ
flexslider スライドカスタム
シリウスに、flexsliderを導入する手順はやや意味合いが違い
戸惑われたかと思われますが、一度入れてしまえばカスタマイズの
基本にさほどの面倒なく容易に進められます
カスタマイズのわかりやすい手順は、まず、flexsliderサイトで
ＤＯＭＯを確認する
http://www.woothemes.com/flexslider/
もしくは
最初にダウンロードしたflexsliderファイルを開くとやはり
demoファイルがあるので開きます
各スタイルのファイルがあります
サイトから進む
ファイルを開く
どちらでもカスタマイズサイトへたどり着きます
そして、そのＤＥＭＯスタイルの下に、jsコード ＨＴＭＬコードが記載されています
jsコードは作動スタイルを指すもので、以下の箇所を入れ替えれば
ＤＥＭＯスタイルに移行することになるのです
参照
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="jquery.js"></script>
<script src="jquery.flexslider.js"></script>
<link rel="stylesheet" href="flexslider.css" type="text/css" />
ここから下を入れ替えるのです
<script type="text/javascript" charset="utf-8">
$(window).load(function() {
$('.flexslider').flexslider();
});
</script>
ｈｔｍｌコードは、シリウスでしたら記事内の画像コードを配置する記述を
指します
スライドやフェーズする親画像の下に小さな子画像などがあるｎａｖｉの場合は
画像コードが2段になりますのでコード事取り出し、記事内に張り付け
読み込みする画像コードだけを入れ替えればよいのです
この手順がカスタマイズを進めるうえで一番早いかと....
多少の調整を加えたい方は以下をご確認ください
要素確認
animationLoop
スライドを自動ループ作動させるかを指定
trueの場合は自動ループを
falseの場合はループ無
デフォルトは trueとなっています
animation スライド形
fade かslide のどちらかを指定できます
デフォルトは fade
slideshow
自動スライドか手動かの切り替え
デフォルトは true
animationSpeed
アニメーション時の動くスピード
数値が低くすると速くなり 高くすると遅くなります
デフォルトは 600
カスタム記載参考例
<script type="text/javascript">
$(window).load(function() {
$('.flexslider').flexslider({
animation: "slide"
});
});
</script>
上記の記述はダウンロードファイルのＤＥＭＯファイルを開いて
ソースを表示させればご理解いただけます
こちらは公式サイトで記されている情報です
以下の各スクリプトを入れ替えますと 作動の変化が確認できます
Basic Slider
// Can also be used with
$(document).ready()
$(window).load(function() {
$('.flexslider').flexslider({
animation: "slide"
});
});
画像導入コード
Slider w/thumbnail controlNav pattern
// Can also be used with
$(document).ready()
$(window).load(function() {
$('.flexslider').flexslider({
animation: "slide",
controlNav: "thumbnails"
});
});
画像コード
<!-- Place somewhere in the <body> of your page -->
<div class="flexslider">
<ul class="slides">
<li data-thumb="slide1-thumb.jpg">
<img src="slide1.jpg" />
</li> <li data-thumb="slide2-thumb.jpg">
<img src="slide2.jpg" />
</li> <li data-thumb="slide3-thumb.jpg">
<img src="slide3.jpg" />
</li> <li data-thumb="slide4-thumb.jpg">
<img src="slide4.jpg" />
</li>
</ul>
</div>
Basic Carousel
$(window).load(function() {
$('.flexslider').flexslider({
animation: "slide",
animationLoop: false,
itemWidth: 210,
itemMargin: 5
});
});
画像コード
<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> <!-- items mirrored twice, total of 12 -->
</ul>
</div>
画像が二つずつ移動なら枠サイズの半分の数値画像にします
Carousel with dynamic min/max ranges
(function() {
// store the slider in a local variable var $window = $(window),
flexslider;
// tiny helper function to add breakpoints function getGridSize()
{ return (window.innerWidth <600>? 2 :
(window.innerWidth < 900>? 3 : 4; } $(function()
{ SyntaxHighlighter.all(); }); $window.load(function()
{ $('.flexslider').flexslider({
animation: "slide",
animationLoop: false,
itemWidth: 210,
itemMargin: 5,
minItems: getGridSize(),
// use function to pull in initial value
maxItems: getGridSize()
// use function to pull in initial value
});
});
// check grid size on resize event $window.resize(function()
{ var gridSize = getGridSize();
flexslider.vars.minItems = gridSize;
flexslider.vars.maxItems = gridSize;
});}
());
画像コード
<!-- Place somewhere in the <body> of your page -->
<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>
<!-- items mirrored twice, total of 12 -->
</ul>
</div>
好みのスタイルへたどり着くには何度も試行することになるでしょうけれど
慣れるが大事です
スポンサーリンク
flexsliderをいろんなスタイルに変化させてみよう
シリウスに適合するflexslider フレックススライダー設置方法
シリウスカスタマイズ
