スライドの枚数が1~12まであったとして、画面に表示するスライドが5枚の時、
.slick-clonedが10個作られるのですが、
.slick-clonedがついたクラス以外、つまりdata-slick-indexが0〜11の間をループさせるようにしたいです。
(data-slick-indexが-5〜-1、12〜16のスライドは通らないようにしたい)
clickItem変数には、クリックされたスライドのdata-idの値が入っています。
そのdata-idの値から、今のdata-slick-indexの値を取得して(変数index)、
-1することでクリックされたスライドの一個左のスライドのdata-idを取得、
clickItem = newIndex;で、クリックされたアイテムを一つ左のものに移しています。
data-slick-indexが0より小さくなったら、slick-clonedを除いたdata-slick-indexの最大値にもどしてまた1ずつ減らして行きたいのですが、
最大値に戻った後1減らずずっと最大値のままになってしまいます。
どうすれば解決できるか、またはほかに良い方法が有ればおしえて頂きたいです。
html
1<!--スライドの一例です--> 2<div class="slider"> 3 <div class="slick-track"> 4 <div class="slider-item slick-slide slick-active" data-slick-index="7" aria-hidden="false" tabindex="-1" role="option" aria-describedby="slick-slide07" style="width: 95px;"> 5 <div data-item="cat" data-id="cat8" class="slider-wrap"> 6 <div class="slider-image"> 7 <img src="/images/sample.png" alt=""> 8 </div> 9 </div> 10 </div> 11 </div> 12</div>
javascript
1//スライダーの戻るボタンを押したら呼び出される関数 2 var slideMove = function (move) { 3 if(move==='back'){ 4 var slider = $('.slider-item').length;//クローン含む現在のスライド数 5 var clone = $('.slider-item .slick-cloned').length;//クローンの数 6 var index = $('.slider-item .slider-link[data-id="'+clickItem+'"]').parent().attr('data-slick-index'); 7 index = index - 1; 8 if(index<=0){ 9 index = slider - clone; 10 } 11 12 var newIndex = $('.slider-item[data-slick-index="'+index+'"]').children().attr('data-id'); 13//一つ前のスライドがクリックされたことにする 14 clickItem = newIndex; 15 } 16 };
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。