slickを使用して、スライダーを設置しました。
https://github.com/kenwheeler/slick/
slick.min.jsと、slick.cssを読み込んでいます。
下記のように記述して、スライドは動いています。
dots:trueにしているので、ドットが表示され、ドットをクリックすると画像が切り替わるのですが、
ここのドットを、クリックではなく、マウスオーバーで画像が切り替わるような動きにしたいです。
オプションを見たのですが、そのような機能がなかったため、どのようにしたらいいのかわかりません。
どなたか教えていただけないでしょうか?
よろしくお願いいたします。
php
1 <ul class="top_mainimage_slide"> 2 <li>スライドの内容1</li> 3 <li>スライドの内容2</li> 4 <li>スライドの内容3</li> 5 <li>スライドの内容4</li> 6 </ul>
javascript
1 <!-- ### slick ### --> 2 <script type="text/javascript" src="/js/slick.min.js"></script> 3 <script> 4 //メインイメージスライダー 5 $(document).ready(function(){ 6 $('.top_mainimage_slide').slick({ 7 arrows: false, 8 infinite: false, 9 pauseOnHover: true, 10 dots: true, 11 swipe: false, 12 dotsClass: 'slide-dots', 13 fade: true, 14 }); 15 }); 16$( '.top_mainimage_slide' ).on( 'mouseenter', '.slide-dots > li button', function() { 17 $( this ).click(); 18} ); 19 </script> 20
回答1件
あなたの回答
tips
プレビュー