bxsliderを使ってスライドショーをカスタマイズしています。
現在、スライジョーの動きを再現することには成功していますが、
前後の画像を半透明にすることに苦戦しています。
[JS] $(function(){ var $slider = $('.bxslider'); var $activeClass = 'active-slide'; $slider.bxSlider({ onSlideLoad: function(){ $slider.children('li').eq(1).addClass($activeClass); }, onSlideAfter: function($slideElement, oldIndex, newIndex){ $slider.children('li').removeClass($activeClass).eq(newIndex + 1).addClass($activeClass); } }); }); [CSS] .bx-wrapper { position: relative; margin-bottom: 60px; padding: 0; -ms-touch-action: pan-y; touch-action: pan-y; margin: 0 auto; } .bx-wrapper img { display: block; max-width: 100%; } .bxslider { margin: 0; padding: 0; -webkit-perspective: 1000; } ul.bxslider { list-style: none; } .bx-viewport { -webkit-transform: translateZ(0); overflow: visible!important; } ul.bxslider li{ opacity: 0.5;/*<li>を透明度50%にしておく*/ } .active-slide{ opacity: 1; /*<li>に付与するクラス・プロパティ、不透明にする*/ } [HTML] <ul class="bxslider"> <li><img src="./washoku.jpg"></li> <li><img src="./washoku2.jpg"></li> <li><img src="./washoku3.png"></li> </ul>
コールバック関数を利用し、スライドがロードした前後にクラス付与→opacityプロパティで
画像を半透明にしたいと思っていますが、なかなか出来ません。<li>にactive-slideプロパティを上手く付与出来ていないようなので、ご助言いただければ幸いです。
参考にさせて頂いているサイトはこちらになります↓
https://www.nxworld.net/tips/jquery-plugin-bxslider-examples.html#anchor02
外部URLリンクが規則違反でしたら、削除します。
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/10/29 07:33
2018/10/29 07:49