スライダーはbxsliderを使用しています。
スライダーはループautoにしています。
やりたいこと
流れるスライダーのコンテンツは4つあり、4つ目の”コンテンツD”が表示されたときに、スライダー外のあるdiv要素の”テキストテキスト”を非表示としたいです。あと、スライダーはコンテンツDで止めたいです。
javascriptの条件分岐で「〇番目のスライダーが表示されたとき、ある要素を非表示にする」なんてことができるかなと思って、
いろいろと調べていたのですが、javascript超初心者でたどり着けず、こちらに質問投稿させていただきました。
お分かりになる方いましたら教えてください。
HTML5
1 <div class="slider" style="text-align: center;"> 2 <div class="ani ani-text"> 3 <span class="text-wrapper"> 4 <span class="letter color01">コンテンツA <span>.</span></span> 5 </span> 6 </div> 7 <div class="ani ani-text"> 8 <span class="text-wrapper"> 9 <span class="letter color02">コンテンツB <span>.</span></span> 10 </span> 11 </div> 12 <div class="ani ani-text"> 13 <span class="text-wrapper"> 14 <span class="letter color03">コンテンツC <span>.</span></span> 15 </span> 16 </div> 17 <div class="ani ani-text"> 18 <span class="letter color04">コンテンツD <span>.</span></span> 19 </div> 20 </div> 21 <div class="ani">テキストテキスト</div>
bxslider
1 $(window).on('load', function(){ 2 $('.slider').bxSlider( 3 { 4 mode:"horizontal", 5 auto: true, 6 slideWidth: 440, 7 controls:false, 8 infiniteLoop: false 9 }); 10 });
以上
追記:
https://bxslider.com/install/
バージョンは4.2.12です。
追記2:
今、非表示としたい<div>要素”テキストテキスト”にid="aniLast"を付与し、いただいた情報を基に、以下の様に書いています。
javascript
1$(window).on('load', function(){ 2 $('.slider').bxSlider( 3 { 4 mode:"horizontal", 5 auto: true, 6 slideWidth: 360, 7 controls:false, 8 infiniteLoop: false, 9 onSlideAfter: function($slideElement, oldIndex, newIndex){ 10 document.getElementById("aniLast").remove(); 11 } 12 }); 13 }); 14
$slideElement, oldIndex, newIndexの使い方がわかりません><
追記3:
var nextIndex = 2; として以下を実行しましたが、2つ目のスライド”コンテンツB”の時に"テキストテキスト"が非表示となってしまう。
javascript
1 var newIndex = 2; 2 3 $(window).on('load', function(){ 4 $('.slider').bxSlider( 5 { 6 mode:"horizontal", 7 auto: true, 8 slideWidth: 360, 9 controls:false, 10 infiniteLoop: false, 11 speed:450, 12 onSlideAfter: function(newIndex){ 13 document.getElementById("aniLast").remove(); 14 } 15 }); 16 });
追記4:
したいように非表示ができました!!
javascript
1 $(window).on('load', function(){ 2 $('.slider').bxSlider( 3 { 4 mode:"horizontal", 5 auto: true, 6 slideWidth: 360, 7 controls:false, 8 infiniteLoop: false, 9 speed:450, 10 onSlideAfter: function(elem,oid,nid) { 11 console.log(oid); 12 console.log(nid); 13 if (nid == 3) { 14 document.getElementById("aniLast").remove(); 15 } 16 } 17 }); 18 });
回答2件
あなたの回答
tips
プレビュー