title: Slide multiple divs from right to left
body: <p>I want my divs to have a sliding effect from right to left, what should I change in CSS and JS files?</p>
  
  <p>I tried this, but it doesn't work. </p>
  
  <pre><code>$('#slider-container').animate({scrollRight:"-="-slideW}, 600);
  </code></pre>
  
  <p>This is the original code with slide effect from left to right.</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>$(document).ready(function(e) {
      var slideW = $('#slider-container').width();
      $('.slide').click(function( e ){
          e.preventDefault();
          $('#slider-container').animate({scrollLeft:"+="+slideW}, 600);
          if($('#slider-container').next()==0){
              $('#slider-container').first().animate({scrollLeft:"+="+slideW}, 600);
          }
      });
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body{
      padding: 0;
      margin: 0;
  }
  
  #slider-container{
      position:relative;
      overflow:hidden;
      margin:0 auto;
      background:#cf5;
      width:100%;
      height:850px;
      white-space:nowrap;
  }
  #slider-container div{
      position:relative;
      display:inline-block;
      margin-right:-4px;
      white-space:normal;
      vertical-align:top;
      *display:inline;
      background:#eee;
      width:100%;
      height:850px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;link rel="stylesheet" href="style.css"&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="functions.js"&gt;&lt;/script&gt;
      &lt;title&gt;Title&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id="slider-container"&gt;
          &lt;div class="slide active"&gt;&lt;p&gt;This is desktop 1&lt;/p&gt;&lt;/div&gt;
          &lt;div class="slide"&gt;This is desktop 2&lt;/div&gt;
          &lt;div class="slide"&gt;This is desktop 3&lt;/div&gt;
          &lt;div class="slide"&gt;This is desktop 4&lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>