FlexSlider2というプラグインを利用してスライダーを作っています。
キャプションが必要なので、マークアップはこうしています。
<div class="flexslider"> <ul class="slider slides"> <li> <a href="#"> <img src="img1.jpg"> <p class="cap_box">キャプション1</p> </a> </li> <li> <a href="#"> <img src="img2.jpg"> <p class="cap_box">キャプション2</p> </a> </li> </ul> </div>
自動でまわるスライダーにしたいので、カスマイズはこうしています。
画像が1枚スライドするのにかかる時間を0.6秒に設定しています。
<script type="text/javascript" charset="utf-8"> $(window).load(function() { $('.flexslider').flexslider({ animation: "slide", //スライドの方式。"fade"か"slide" slideshow: true, //自動でスライドを進めるかどうか animationSpeed: 600 //アニメーション時の動作のスピード }); }); </script>
キャプションは、スライドがアクティブになると表示され、次のスライドに切り替わるタイミングで消えるようにしたいと思っています。
スライドがアクティブになるときに該当する<li>
要素に.flex-active-slide
というクラスが付与されるので、CSSで次のように書いて現れたり消えたりするようにしました。
.cap_box{ opacity: 0; } .flex-active-slide .cap_box{ opacity: 1; }
ここまでは問題ありません。
しかし、キャプションをふわっと表示させてたくて.cap_box
にtransition: opacity .3s ease;
のCSSを与えると、それがスクリプトのanimationSpeed: 600
と干渉するためか、
最後のスライドから1枚目のスライドに戻るときにガタッとした動きになってしまいます。
スライドのなめらかの動きを維持しつつ、キャプションもふわっと表示させるにはどのように書いたら良いのでしょうか?
よろしくお願いいたします。
あなたの回答
tips
プレビュー