title: How to make slideshow with divs inside, not images?
body: <p>I want to make a slideshow with javascript, but I only know how to do that with few images inside, but for my web I need to do slideshow in which I can put divs?</p>
  
  <p>I only need two slides, in every slide are 3 divs, and that two slides change in left.</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div id="container" class="cont2"&gt;
  
          &lt;div id="box1" class="box"&gt;Div #1&lt;div class="kkc"&gt;&lt;p&gt;Div Caption1&lt;/p&gt;&lt;/div&gt;&lt;/div&gt;
          &lt;div id="box2" class="box"&gt;Div #2&lt;div class="kkc"&gt;&lt;p&gt;Div Caption2&lt;/p&gt;&lt;/div&gt;&lt;/div&gt;
          &lt;div id="box3" class="box"&gt;Div #3&lt;div class="kkc"&gt;&lt;p&gt;Div Caption3&lt;/p&gt;&lt;/div&gt;&lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>#container {
  position: absolute;
  margin: 0px;
  padding: 0px;
  height: 304px;
  width: 500px;
  overflow: hidden; 
  background-color:  white;
  margin-top: 78px;
  margin-left: 124px;
  z-index: -1;
  }
  
  .box {
  position: absolute;
  width: 50%;
  height: 300px;
  line-height: 300px;
  font-size: 50px;
  text-align: center;
  border: 2px solid black;
  left: 50%;   
  top: 0px;
  margin-left: -25%;
  z-index: -1;
  cursor: pointer;
  }
  
   #box1 {
  background-color: green;
  left: -150%;
  
  }
  
  
  #box2 {
  background-color: yellow;
  left:50%;
   }
  
   #box3 {
  background-color: red;
  left: 150%;
  
  
  }
  </code></pre>
  
  <p>Javascript</p>
  
  <pre><code>$(document).ready(function(){
  var refreshId;
  var restartAnimation = function() {
      clearInterval(refreshId);
      refreshId = setInterval( function() 
      {    
          $('.box').each(function() {
              if ($(this).offset().left &lt; 0) {
                  $(this).css("left", "150%");
              } else if ($(this).offset().left &gt; $('#container').width()) {
                  $(this).animate({
                      left: '50%'
                  }, 500 );
              } else {
                  $(this).animate({
                      left: '-150%'
                  }, 500 );
              }
          });
      },1000);
  }
  
  restartAnimation()
  
  
  });
  </code></pre>
  
  <p>I've try this but its not working.</p>