Sliding multiple div's from left to right

I'm trying to slide multiple divs of p tags from right to left (or vice versa) but instead of sliding them from right to left they are all showing up one after the other. How do i show just one and then slide the next from the left(or right) and so on? thanks!

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

Solution

Here's an example of a carousel using Bootstrap. Change the data-interval value from 4000 to whatever time interval in milliseconds you'd like the images to transition in.

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

More information and Bootstrap documentation here: https://getbootstrap.com/docs/4.0/components/carousel/