やりたいこと
- MetaSlider プラグイン使ってカルーセル表示する
- カルーセルで表示するスライドは1枚ずつ動かす
- 無限ループする
説明
- MetaSlider プラグインの中身は FlexSlider ？（たぶん）
- 管理画面からカルーセル表示の設定ができるけど、「1枚ずつ動かす」「無限ループする」の細かい設定ができない
- 細かい設定をするには自分でjQuery を記述する必要がある（オプションは FlexSlider を参考）
- 管理画面にある「高度な設定」に「JSを出力」という項目があり、チェックするとソースコード上に設定した jQuery の記述が自動で挿入される。細かい設定をするのに自分で jQuery を記述するので今回はチェックを外す。（※最初はチェックしておき、一通り管理画面上で設定し、ソースコードを確認すると自動挿入された jQuery のコードがあるので、それをコピペしてベースにするのもあり。下記のようなコードが表示されてる）
下記が追記するコードです。
オプションなど適宜変更してください。
追記するjQuery（※メタスライダーの番号とオプションは適宜変更）
<script type="text/javascript">
var metaslider_1268 = function($) {
$('#metaslider_1268').flexslider({
slideshowSpeed:3000,
animation:'slide',
controlNav:false,
directionNav:true,
pauseOnHover:false,
direction:'horizontal',
reverse:false,
animationSpeed:1000,
prevText:"Previous",
nextText:"Next",
fadeFirstSlide:false,
easing:"linear",
slideshow:true,
itemWidth:180,
minItems:5,
itemMargin:30,
maxItems:5,
move:1,
end : function(slider){
jQuery('#metaslider_1268 > .flex-viewport > ul > li').each(function(){
slider.addSlide('<li>'+jQuery(this).context.innerHTML+'</li>', slider.count);
jQuery('.flexslider .slides').append('<li>'+jQuery(this).context.innerHTML+'</li>');
});
}
});
$(document).trigger('metaslider/initialized', '#metaslider_1268');
};
var timer_metaslider_1268 = function() {
var slider = !window.jQuery ? window.setTimeout(timer_metaslider_1268, 100) : !jQuery.isReady ? window.setTimeout(timer_metaslider_1268, 1) : metaslider_1268(window.jQuery);
};
timer_metaslider_1268();
</script>
スライダーのオプションは下記を参考にしてください。
デフォルトで無限ループの設定はありません。
上記の参考サイトにもありますが、end: function(){} でコールバックを記述できます。
このコールバックを使って無限ループするように記述しています。
コールバックに関しては、先述したコードにも end: function(){} を記述していますが、下記も参考になります。