質問編集履歴

1 修正

xyunow

xyunow score 65

2018/04/01 23:18  投稿

slick.jsのクローンスライド(.slick-cloned)を除いてループしたい
スライドの枚数が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
<!--スライドの一例です-->  
<div class="slider">
   <div class="slick-track">
       <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;">
           <div data-item="cat" data-id="cat8" class="slider-wrap">
               <div class="slider-image">
                   <img src="/images/sample.png" alt="">
               </div>
           </div>
       </div>
   </div>
</div>
```
```javascript
//スライダーの戻るボタンを押したら呼び出される関数
   var slideMove = function (move) {
       if(move==='back'){
           var slider = $('.slider-item').length;//クローン含む現在のスライド数
           var clone = $('.slider-item .slick-cloned').length;//クローンの数
           var index = $('.slider-item .slider-link[data-id="'+clickItem+'"]').parent().attr('data-slick-index');
           index = index - 1;
           if(index<=0){
               index = slider - clone;
           }
           var newIndex = $('.slider-item[data-slick-index="'+index+'"]').children().attr('data-id');
//一つ前のスライドがクリックされたことにする
           clickItem = newIndex;
       }
   };
```
  • HTML

    12225 questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • jQuery

    8556 questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • jQueryプラグイン

    634 questions

    jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る