从左向右滑动多个 div

Question

我试图将 p 标签的多个 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 的轮播示例。将 data-interval 值从 4000 更改为您希望图像过渡的任何时间间隔（以毫秒为单位）。

<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
</head>
<body>
  <div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel" data-interval="4000">
    <div class="carousel-inner">
      <div class="carousel-item active">
        <img class="d-block w-100" src="https://www.hdwall.xyz/wp-content/uploads/2018/04/hdwall.xyz-Pink-Lowpoly-Abstract-Samsung-Galaxy-S9-Stock931866586-1280x720.jpg" alt="First slide">
      </div>
      <div class="carousel-item">
        <img class="d-block w-100" src="https://i.vimeocdn.com/video/350636663_1280x720.jpg" alt="Second slide">
      </div>
      <div class="carousel-item">
        <img class="d-block w-100" src="https://wallpapersite.com/images/pages/pic_w/8931.jpg" alt="Third slide">
      </div>
    </div>
  </div>
</body>
</html>

更多信息和Bootstrap文档在这里：https://getbootstrap.com/docs/4.0/components/carousel/

从左向右滑动多个 div

Sliding multiple div's from left to right

html

javascript

css

elements

sliding