title: I can't find out how to make my slideshow transition in the way I made it
body: <p>So I made a slideshow using HTML, CSS and Javascript. 
  The things is, the way I made it, I can't figure out how to actually make it <em>slide,</em> with a transition. 
  I made it so that the picture are defined as a style background, not just an image. Now I need to know how I can transition between the containers...</p>
  
  <p>Unfortunately I can't just use bootstrap, but I'm trying to make something like the carousel here: <a href="http://www.rpgmakerweb.com/" rel="nofollow">http://www.rpgmakerweb.com/</a></p>
  
  <p>What I have now.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var slideIndex = 1;
  showSlides(slideIndex);
  
  function plusSlides(n) {
    showSlides(slideIndex += n);
  }
  
  function currentSlide(n) {
    showSlides(slideIndex = n);
  }
  
  function showSlides(n) {
    var i;
    var slides = document.getElementsByClassName("carouselbackground");
    if (n &gt; slides.length) {
      slideIndex = 1
    }
    if (n &lt; 1) {
      slideIndex = slides.length
    }
    for (i = 0; i &lt; slides.length; i++) {
      slides[i].style.display = "none";
    }
    slides[slideIndex - 1].style.display = "block";
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.carouselholder {
    width: 100%;
    height: 500px;
    padding: 0px;
    margin: 0px;
    overflow: hidden;
  }
  .carouselbackground {
    width: 100%;
    height: 500px;
    padding: 0px;
    margin: 0px;
  }
  .carouselcontent {
    width: 100%;
    max-width: 1024px;
    height: 500px;
    margin: 0 auto;
    background-color: rgba(0, 0, 0, 0.8);
    float: center;
    color: white;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="carouselholder"&gt;
    &lt;div class="carouselbackground" style="background-image: url('pics/nightview.jpg');"&gt;
      &lt;div class="carouselcontent"&gt;
        Text here
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div class="carouselbackground" style="background-image: url('pics/Lake-pond.jpg');"&gt;
      &lt;div class="carouselcontent"&gt;
        Text 2
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div class="carouselbackground" style="background-image: url('pics/animeik.jpg');"&gt;
      &lt;div class="carouselcontent"&gt;
        Text 3.
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;a class="prev" onclick="plusSlides(-1)"&gt; &amp;#10094; &lt;/a&gt;
    &lt;a class="next" onclick="plusSlides(1)"&gt; &amp;#10095; &lt;/a&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>