FlexSliderでジワーっと変わるスライダーを実装
jQueryを使って画像のスライダーを実装する方法をまとめておきます.
シュッとスライドするのではなく, ジワーっと消えていくスライダーを作っていきます.(こういうやつ→http://pas-pol.jp/)
①『FlexSlider』の導入
基本的にはこちらのサイトに従って行います.→ https://on-ze.com/archives/409
htmlの記述に関しては, 次に紹介するように変更します.
② htmlの記述
冒頭で紹介したサイトのようなスライダーを実装するためには, htmlを次のように記述します.
<div class="metaslider metaslider-flex metaslider ml-slider nav-hidden">
<div id="metaslider_container">
<div id="metaslider">
<ul class="slides">
<li><img src="image.jpg" class="slider" /></li>
<li><img src="image.jpg" class="slider" /></li>
<li><img src="image.jpg" class="slider" /></li>
<li><img src="image.jpg" class="slider" /></li>
<li><img src="image.jpg" class="slider" /></li>
</ul>
</div>
<div>
</div>
③ jQueryへの記述
最後にjQueryを記述したらおしまいです.
var metaslider = function($) {
$('#metaslider').addClass('flexslider'); // theme/plugin conflict avoidance
$('#metaslider').flexslider({
slideshowSpeed:5000,
animation:"fade",
controlNav:false,
directionNav:false,
pauseOnHover:false,
direction:"horizontal",
reverse:false,
animationSpeed:1500,
prevText:"<",
nextText:">",
slideshow:true
});
};
var timer_metaslider = function() {
var slider = !window.jQuery ? window.setTimeout(timer_metaslider, 100) : !jQuery.isReady ? window.setTimeout(timer_metaslider, 1) : metaslider(window.jQuery);
};
timer_metaslider();
この記事が気に入ったらサポートをしてみませんか?