お世話になります。jQueryでスライドを自作してみたのですが、
スライドの初めと終わりの処理部分で手が止まってしまっています。
是非皆様の知識をお借りしたいと存じます。
宜しくお願い致します。
###前提
画像ではなく、<div class="grid"></div>
を横並びにしたスライドを作成しております。
画面上には最高3つの<div class="grid"></div>
が表示され、4番目からはスライド切り替えで表示されます。
スライドは1要素ずつ左右にズレるイメージです。
また、<div class="grid"></div>
の数は決まっておりません。
スライドは「次へ」「戻る」のような切り替えボタンのみでのスライド切り替えとなります。
###実現したいこと
上記要素が3つですとスライドは行いませんので、スライド切り替えボタンは非表示となり、4つ以上からスライド切り替えボタンを表示させます。
また、始めの要素が表示されている時は「戻る」ボタン非表示、最後の要素が表示されましたら「次へ」のボタン非表示としたいです。
始めの要素と最後の要素が表示されていない時は「次へ」「戻る」ボタンは表示されます。
###出来ていない処理
要素3つまでの時の非スライドと4つ以上のスライド表示はなんとか実現する事が出来ました。
ただ、【始めの要素が表示されている時は「戻る」ボタン非表示、最後の要素が表示されましたら「次へ」のボタン非表示】
この部分がどうしてもわかりません。
ご存じの方いらしゃいましたら、宜しくお願い致します。
HTML
1<div class="mod-3-grid" id="slide-wrape"> 2<p class="slide-next"><span><b></b><b></b></span></p> 3<p class="slide-back"><span><b></b><b></b></span></p> 4 5<div class="slide-inner"> 6<!-- slide-inner --> 7<div class="grid"></div> 8<div class="grid"></div> 9<div class="grid"></div> 10<div class="grid"></div> 11<!-- /slide-inner --> 12</div> 13</div>
CSS
1#slide-wrape { 2 position: relative; 3 width: 980px; 4 box-sizing: border-box; 5 padding: 0 40px; 6 min-height: 382px; 7} 8 9.hidden-wrape { 10 overflow: hidden; 11 width: 900px; 12 min-height: 382px; 13 position: relative; 14} 15 16.slide-inner { 17 position: absolute; 18} 19 20.grid { 21 float: left; 22 width: 260px; 23 margin: 0 0 30px 60px; 24 text-align: left; 25} 26 27.grid:first-child { 28 margin: 0 0 30px; 29} 30 31.slide-next { 32 position: absolute; 33 right: 0; 34 top: 0; 35 bottom: 0; 36 margin: auto 0; 37 width: 30px; 38 height: 30px; 39 background: #333; 40 z-index: 10; 41 display: none; 42} 43 44.slide-back { 45 position: absolute; 46 left: 0; 47 top: 0; 48 bottom: 0; 49 margin: auto 0; 50 width: 30px; 51 height: 30px; 52 background: #333; 53 z-index: 10; 54 display: none; 55}
javascript
1(function() { 2 3 var slideWidth = $('#slide-wrape .grid').outerWidth() + 60; 4 var slideNum = $('#slide-wrape .grid').length; 5 6 $(function(){ 7 8 if(slideNum > 3){ 9 10 $('.slide-next, .slide-back').show(); 11 $('#slide-wrape .slide-inner').wrap('<div class="hidden-wrape">'); 12 13 var slideSetWidth = slideWidth * slideNum - 60; 14 $('#slide-wrape .slide-inner').css('width', slideSetWidth); 15 16 var slideCurrent = 0; 17 var Nslide = function(){ 18 if( slideCurrent < 0 ){ 19 slideCurrent = slideNum - 1; 20 }else if( slideCurrent > slideNum - 1){ 21 slideCurrent = 0; 22 } 23 24 $('#slide-wrape .slide-inner').stop().animate({ 25 left: slideCurrent * -slideWidth 26 }); 27 } 28 29 $('.slide-next').on("click", function(){ 30 slideCurrent++; 31 Nslide(); 32 }); 33 34 $('.slide-back').on("click", function(){ 35 slideCurrent--; 36 Nslide(); 37 }); 38 39 40 41 }else { 42 $('.slide-next, .slide-back').hide(); 43 } 44 45 }); 46}());
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/04/10 17:33
2017/04/10 17:37
2017/04/10 17:44
2017/04/11 02:09
2017/04/11 02:39