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

如果你打开使用flexbox，你可以用你的css做这样的事情：

＆＃13;

$(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);
  }
})

＆＃13;

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

＆＃13;

<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>

＆＃13;

如果您需要将幻灯片换行，可以将flex-wrap: wrap;添加到.slides css选择器。

滑块图像在动态添加时显示一个低于其他的图像

1 个答案: