スライダー画像を動的に追加したときに下に1つ表示される画像

Question

スライダーを使用してウェブページに画像を表示しています。コードは正常に動作し、画像は適切にスライドします。しかし、jqueryを使用してイメージを動的に追加すると、イメージはスライディングではなく他のものの下に積み重なります。理由は何でしょうか？

ここでは、画像をスライダに静的にリンクするときに問題なく動作するコードを示します。

<div class="slider" data-arrows="true" > 
       <ul class="slides" id="slider" > 
        <li> <img alt="Image" src="img/work-1.jpg" /> </li> 
        <li> <img alt="Image" src="img/work-1.jpg" /> </li> 
        <li> <img alt="Image" src="img/work-1.jpg" /> </li> 
        <li> <img alt="Image" src="img/work-1.jpg" /> </li> 

       </ul> 
    </div> 

画像を追加して画像を動的に追加するときに、この画像が重なって表示されます。

for(var i=0; i<10;i++){ 

     var x = ' <li>'+ 
       '<img alt="Image" src="img/work-1.jpg" />'+ 
       '</li>'; 

    $("#slider").append(x); 

    } 

Answer 1

あなたはフレキシボックスを使用してに開放している場合は、あなたがあなたのCSSでこのような何かを行うことができます：

$(document).ready(function() { 
 
    for (var i = 0; i < 10; i++) { 
 
    var x = ' <li>' + 
 
     '<img alt="Image" src="https://placebear.com/g/100/100" />' + 
 
     '</li>'; 
 
    $("#slider").append(x); 
 
    } 
 
})

.slides { 
 
    display: flex; 
 
    padding-left: 0; 
 
    list-style: none; 
 
}

<div class="slider" data-arrows="true"> 
 
    <ul class="slides" id="slider"> 
 
    <li> <img alt="Image" src="https://placebear.com/g/100/100" /> </li> 
 
    <li> <img alt="Image" src="https://placebear.com/g/100/100" /> </li> 
 
    <li> <img alt="Image" src="https://placebear.com/g/100/100" /> </li> 
 
    <li> <img alt="Image" src="https://placebear.com/g/100/100" /> </li> 
 
    </ul> 
 
</div> 
 

 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

あなたがラップするスライドが必要な場合は、追加することができますflex-wrap: wrap;を.slidesにコピーしてください。