スライダー実装で困っていることがあり、教えていただきたく思います。
前提・実現したいこと
動的なサンプルコード
https://playcode.io/35162/
実現したいこと
- スライダー枚数切り替えボタンをクリックすると前後のイメージを表示
(表示を切り替えたイメージから自動再生を再開する)
前提
(済)は実装済です。
- 画面のサイズを取得して、表示されているロゴの高さの余りの高さいっぱいにイメージ表示(済)
- スライダー自動再生(済)
- スライダーの上にマウスオーバーすると、枚数切り替えボタン表示(済)
- スライダー枚数切り替えボタンをクリックすると前後のイメージを表示
(表示を切り替えたイメージから自動再生を再開する)
問題点
ボタンをクリックするとイメージは変わるが、他の処理が重なってるのか、別のイメージへ変更し続けるなど、不安定な挙動を起こします。
補足
3枚表示させたいのですが
- 1枚目のイメージを表示中にprevを押すと3枚目へ
- 3枚目のイメージを表示中にnextを押すと1枚目へ
の処理が上手くいってないかもしれません。
大変恐縮なのですが、解決策をご教示ください。
どうぞよろしくお願いいたします。
html
1 2 <h1 id="hero-logo" class="l-logo"> 3 <a href="index.html" class="logo"><img src="./img/logo.svg" alt=""></a> 4 </h1> 5 <div class="l-slider"> 6 <div id="slider" class="slider__inner"> 7 <ul> 8 <li><img src="https://placehold.jp/150x50.png" alt=""></li> 9 <li><img src="https://placehold.jp/250x150.png" alt=""></li> 10 <li><img src="https://placehold.jp/350x150.png" alt=""></li> 11 </ul> 12 <a id="prev">prev</a> 13 <a id="next">next</a> 14 </div> 15 </div> <!-- SCRIPTS --> 16<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 17 <script type="text/javascript"> 18 $(function() { 19 $('#slider ul').autoChange({ 20 effect: 'fade', 21 type: 'repeat', 22 timeout: 3000, 23 speed: 1000 24 }) 25 }); 26 </script> 27
css
1/* ===================== 2 slider 3===================== */ 4 5#slider { 6 position: relative; 7 height: auto; 8 overflow: hidden; 9 ul { 10 margin: 0; 11 padding: 0; 12 } 13 li { 14 width: 100%; 15 position: absolute; 16 margin: 0; 17 padding: 0; 18 } 19 img { 20 width: 100%; 21 height: auto; 22 } 23} 24 25.slider__inner:hover #prev, 26.slider__inner:hover #next { 27 opacity: .5; 28 transition: .35s 29} 30 31#prev, 32#next { 33 opacity: 0; 34 display: block; 35 position: absolute; 36 top: 50%; 37 z-index: 500; 38 width: 100px; 39 height: 40px; 40 transition: .25s; 41 cursor: pointer; 42 color: transparent; 43} 44#prev { 45 left: 0; 46} 47 48#next { 49 right: -18px; 50 margin-right: 20px; 51} 52 53#prev:before, 54#next:before { 55 display: block; 56 content: ""; 57 position: absolute; 58 top: 50%; 59 width: 50px; 60 height: 50px; 61 margin-top: -25px; 62 border-radius: 50%; 63 background: #000; 64} 65 66#next:before { 67 right: 50px; 68} 69 70#prev:before { 71 left: 50px; 72} 73 74#prev:after, 75#next:after { 76 display: block; 77 content: ""; 78 position: absolute; 79 top: 50%; 80 width: 0; 81 height: 0; 82 margin-top: -20px; 83 border: 20px solid transparent; 84} 85 86#next:after { 87 right: 42px; 88 margin-top: -20px; 89 border-left: 20px solid #fff; 90} 91 92#prev:after { 93 left: 38px; 94 margin-top: -20px; 95 border-right: 20px solid #fff; 96}
js
1$.fn.autoChange = function (config) { 2 var options = $.extend({ 3 effect: 'fade', 4 type: 'repaet', 5 timeout: 3000, 6 speed: 1000 7 }, config); 8 9 return this.each(function () { 10 var current = 0; 11 var next = 1; 12 var elementP = $(this); 13 var element = $(elementP).children(); 14 15 var windowH = $(window).height(); 16 var logo = $('#hero-logo').height(); 17 18 $(element).hide(); 19 $(element[0]).show(); 20 21 function elementHeight() { 22 $('#slider').css('height', windowH - logo - 60 + 'px'); 23 }; 24 elementHeight(); 25 $(window).on('resize', function () { 26 elementHight(); 27 }); 28 var change = function () { 29 $('#next').click(function () { 30 if (current == 3) { 31 current = element.length - 1; 32 next = 0; 33 } else { 34 current += 1; 35 } 36 change(); 37 return false; 38 }); 39 $('#prev').click(function () { 40 if (current == 0) { 41 current = element.length - 1; 42 next = 2; 43 } else { 44 current -= 1; 45 } 46 change(); 47 return false; 48 }); 49 if (options.effect == 'fade') { 50 $(element[current]).fadeOut(options.speed); 51 $(element[next]).fadeIn(options.speed); 52 } else if (options.effect == 'slide') { 53 $(element[current]).slideUp(options.speed); 54 $(element[next]).slideDown(options.speed); 55 } 56 57 if (options.type == 'repeat') { 58 if ((next + 1) < element.length) { 59 current = next; 60 next++; 61 } else { 62 current = element.length - 1; 63 next = 0; 64 } 65 } 66 67 if (options.type == 'stop') { 68 if ((next + 1) < element.length) { 69 current = next; 70 next++; 71 } else { 72 return; 73 } 74 } 75 }; 76 var timer = setInterval(function () { 77 change(); 78 }, options.timeout); 79 80 }); 81};
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/09/28 07:46 編集