Array.from()の中をリセットして更新したい…??
下記のようなスライダーを自作してみたのですが、ul.slide_container
を複数設置してしまうとArray.from()
のli
の数が2乗づつ増えていってしまいます。
ul.slide_container
が複数設置されることを想定して、ul.slide_container
毎に正しくli
の数が取得できるようにしたいのですが、どうすれば良いのでしょうか…??
ご教授いただけますと幸いです。
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);
});
});
* {
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); }
}
<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>