jQueryのプラグイン「slick」で矢印ボタンを表示させています。
jQuery
1$(function(){ 2 $('.main-line').slick({ 3 //自動再生を有効にするか。 4 autoplay:true, 5 //自動再生のスライド切り替えまでの時間をミリ秒で設定。 6 autoplaySpeed:5000, 7 //ドットインジケーターを表示するか。 8 dots:true, 9 //スライドの左右の矢印ボタンを表示するか。 10 arrows:true, 11 //自動再生時にスライドにフォーカスした際、自動再生をストップさせるか。 12 pauseOnFocus:false, 13 }); 14}); 15
そして画面が下記の表示です。
矢印ボタンも表示され、ドットインジケーターも表示されています。
しかし、矢印のボタンを押しても反応しません。
いろいろ調べていくと、このような方法を見つけました。
jQuery
1$(function(){ 2 $('.main-line').slick({ 3 // 自動再生を有効にするか。 4 autoplay:true, 5 //自動再生のスライド切り替えまでの時間をミリ秒で設定。 6 autoplaySpeed:5000, 7 //ドットインジケーターを表示するか。 8 dots:true, 9 //スライドの左右の矢印ボタンを表示するか。 10 arrows:true, 11 // 自動再生時にスライドにフォーカスした際、自動再生をストップさせるか。 12 pauseOnFocus:false, 13 }); 14 $('button').on('click',function(){ 15 $('.sildes').slick('slickNext'); 16 }); 17 $('button').on('click',function(){ 18 $('.sildes').slick('slickPrev'); 19 }); 20}); 21
このようにbuttonでclickを設定、画像にはsildesを設定させているので、buttonをclickすると、画像が次へ行く、戻るという意味で解釈しました。
ちなみにbuttonは、テキストエディタでは記載をしていませんが、Chromeデベロッパー・ツールには記載があります。
(slickプラグインの仕様なのかも)
HTML
1<button class="slick-prev slick-arrow" aria-label="Previous" type="button" style="">Previous</button> 2<button class="slick-next slick-arrow" aria-label="Next" type="button" style="">Next</button>
(下記のように画像それぞれにclassを付与)
HTML
1<ul class="main-line"> 2 <li><img src=https://cdn.pixabay.com/photo/2017/08/29/20/25/cosmetics-2694764_960_720.jpg class="sildes"></li> 3 <li><img src=https://cdn.pixabay.com/photo/2016/05/02/17/56/lipstick-1367773_960_720.jpg class="sildes"></li> 4 <li><img src=https://cdn.pixabay.com/photo/2017/03/04/15/53/cosmetics-2116367_960_720.jpg class="sildes"></li> 5 <li><img src=https://cdn.pixabay.com/photo/2018/03/01/14/57/portrait-3190855_960_720.jpg class="sildes"></li> 6</ul>
しかし、反応しません。
何かしらの方法があるのであれば、ご教示していただければ幸いです。
ちなみに、参考にしたサイトのURLも貼っておきます(メソッドという見出しの3番目と4番目に記載あり)
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。