Question

我试图将多个div标签从右向左滑动（反之亦然），但不是将它们从右向左滑动，而是一个接一个地显示。如何仅显示一个，然后从左侧（或右侧）滑动下一个，依此类推？谢谢！

HTML：

<div id="slider">
  <div class="slide1">
    <p>Lorem ipsum dolor sit amet</p><br />
    <ul class="actions">
      <li><a href="#" class="button special big">Get 
        Details</a></li>    
    </ul>
  </div>
  <div class="slide2">
    <p>Epes di ameb latota ed atem</p><br />
    <ul class="actions">
      <li><a href="#" class="button special big">More Info</a> 
      </li> 
    </ul>
  </div>
</div>

Javascript：

setInterval(function () {
  $('#slider').animate({right: "2000px"}, "slow", function () {
    $('#slider img:first-child').appendTo('#slider');
    $('#slider').css('right', '0');
  });
}, 4000);

CSS：

#slider {
  position: relative;
  overflow: hidden;
  margin: 20px auto;
  width: 500px;
  height: 180px;
}

Answer 1

这是使用Bootstrap的旋转木马的示例。将QuerySnapshot的值从4000更改为您希望转换图像的任何时间间隔（以毫秒为单位）。

data-interval

此处有更多信息和Bootstrap文档：https://getbootstrap.com/docs/4.0/components/carousel/

从左向右滑动多个div

1 个答案: