54467


下記のようなスライダーを自作してみたのですが、`ul.slide_container`を複数設置してしまうと`Array.from()`の`li`の数が２乗づつ増えていってしまいます。

`ul.slide_container`が複数設置されることを想定して、`ul.slide_container`毎に正しく`li`の数が取得できるようにしたいのですが、どうすれば良いのでしょうか…？？

ご教授いただけますと幸いです。

* * *
[code]

    addEventListener('load',function(){
    
      $('.slide_container').each(function() {
    
        var container = $(this),
            slide_items = Array.from(container.find('li')),
            li_width = container.find('li').width(),
            translate = 0 - (slide_items.length * li_width),
            duration = parseInt(container.css('animation-duration')) * 1000;
     
        function clone_items() {
          for (var i = 0, len = slide_items.length; i < len; i++) {
            $(slide_items[i]).clone(true).appendTo('.slide_container');
          };
        }
    
        clone_items();
    
        container.css('transform','translateX('+ translate +'px)');
    
        loop = setInterval( function(){
    
          clone_items();
    
          var li_slice7 = container.find('li').slice(0,slide_items.length);
    
          li_slice7.remove();
    
        },duration);
    
      });
    
    });
[/code]

[code]

    * {
      margin: 0;
      padding: 0;
    }
    
    .slide_container {
      width: 100%;
      font-size: 0;
      white-space: nowrap;
      animation: slide infinite linear;
    }
    
    .slide_container:hover {
      animation-play-state: paused;
    }
    
    .slide_container li {
      display: inline-block;
      height: 300px;
      width: 400px;
      list-style-type: none;
    }
    
    @keyframes slide {
      0% { transform: translateX(0px); }
    }
[/code]

[code]

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <div class="container_wrapper">
      <ul class="slide_container" style="animation-duration: 20s; transform: translateX(-2800px);">
        <li style="background-color: red;"></li>
        <li style="background-color: orange;"></li>
        <li style="background-color: yellow;"></li>
        <li style="background-color: green;"></li>
        <li style="background-color: aqua;"></li>
        <li style="background-color: blue;"></li>
        <li style="background-color: purple;"></li>
      </ul>
    </div>
[/code]


CC BY-SA 4.0
2019-04-25T01:33:31.760
54460
2019-04-25T03:12:31.890
2019-04-25T01:44:39.617
3060
34063
question
javascript jquery
Array.from()の中をリセットして更新したい…？？


`appendTo`メソッドは、 **引数に指定した値に該当する要素すべての末尾** に、`appendTo`メソッドの前に置かれたコンテンツを挿入します。

質問文のコードでは、`clone_items`関数内の`appendTo`メソッドの引数に対して、`slide_container`クラスを指定しています。この場合、`clone_items`関数を実行する度に、「`slide_container`クラスを持つ
**すべての** 要素内にある
**すべての**`li`要素を足し合わせたもの」をそれぞれの`slide_container`クラスを持つ要素の末尾に追加してゆきます。

すると、次第に`setInterval`メソッド内に記述されている要素の削除が追いつかなくなり、結果として`li`要素の数は増え続けることになります。

これを防ぐためには、 **`appendTo`メソッドに各スライダーを識別出来る値を渡せば良い**です。今回の場合は、コードで使用している
container 変数を使用出来ます。

[code]

    addEventListener('load', function() {
    
      $('.slide_container').each(function() {
    
    
        var container = $(this),
          slide_items = Array.from(container.find('li')),
          li_width = container.find('li').width(),
          translate = 0 - (slide_items.length * li_width),
          duration = parseInt(container.css('animation-duration')) * 1000;
    
        function clone_items() {
          for (var i = 0, len = slide_items.length; i < len; i++) {
            $(slide_items[i]).clone(true).appendTo(container);
          };
        }
    
        clone_items();
    
        container.css('transform', 'translateX(' + translate + 'px)');
    
        loop = setInterval(function() {
    
          clone_items();
          var li_slice7 = container.find('li').slice(0, slide_items.length);
    
          li_slice7.remove();
    
        }, duration);
    
      });
    
    });
[/code]

[code]

    * {
      margin: 0;
      padding: 0;
    }
    
    .slide_container {
      width: 100%;
      font-size: 0;
      white-space: nowrap;
      animation: slide infinite linear;
    }
    
    .slide_container:hover {
      animation-play-state: paused;
    }
    
    .slide_container li {
      display: inline-block;
      height: 300px;
      width: 400px;
      list-style-type: none;
    }
    
    @keyframes slide {
      0% {
        transform: translateX(0px);
      }
    }
[/code]

[code]

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <div class="container_wrapper">
      <ul class="slide_container" style="animation-duration: 3s; transform: translateX(-2800px);">
        <li style="background-color: red;"></li>
        <li style="background-color: orange;"></li>
        <li style="background-color: yellow;"></li>
        <li style="background-color: green;"></li>
        <li style="background-color: aqua;"></li>
        <li style="background-color: blue;"></li>
        <li style="background-color: purple;"></li>
      </ul>
      <ul class="slide_container" style="animation-duration: 3s; transform: translateX(-2800px);">
        <li style="background-color: red;"></li>
        <li style="background-color: orange;"></li>
        <li style="background-color: yellow;"></li>
        <li style="background-color: green;"></li>
        <li style="background-color: aqua;"></li>
        <li style="background-color: blue;"></li>
        <li style="background-color: purple;"></li>
      </ul>
      <ul class="slide_container" style="animation-duration: 3s; transform: translateX(-2800px);">
        <li style="background-color: red;"></li>
        <li style="background-color: orange;"></li>
        <li style="background-color: yellow;"></li>
        <li style="background-color: green;"></li>
        <li style="background-color: aqua;"></li>
        <li style="background-color: blue;"></li>
        <li style="background-color: purple;"></li>
      </ul>
    </div>
[/code]


CC BY-SA 4.0
2019-04-25T03:12:31.890
54467
2019-04-25T03:12:31.890
32986
54460
answer