title: How to animate sliding on an image slider
body: <p>I wrote this code for a image slider but i don't know how to make a sliding animation when swapping throw photos</p>
  <p>So, if anyone can help I would be grateful.</p>
  <p>html :-</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang=&quot;en&quot;&gt;
  &lt;head&gt;
  &lt;meta charset=&quot;UTF-8&quot;&gt;
  &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
  &lt;title&gt;Image Slider&lt;/title&gt;
  
  &lt;!-- CSS --&gt;
  &lt;link rel=&quot;stylesheet&quot; href=&quot;index.css&quot;&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;div id=&quot;container&quot;&gt;
      &lt;img id=&quot;first&quot; class=&quot;slide&quot; src=&quot;https://upload.wikimedia.org/wikipedia/commons/c/ca/Fiat_127_2_v_sst.jpg&quot; alt=&quot;&quot;&gt;
      &lt;img class=&quot;slide&quot; src=&quot;https://trustspringer.com/wp-content/uploads/2019/07/house-mouse-1.jpg&quot; alt=&quot;&quot;&gt;
      &lt;img class=&quot;slide&quot; src=&quot;https://www.dw.com/image/40734768_303.jpg&quot; alt=&quot;&quot;&gt;
      &lt;img class=&quot;slide&quot; src=&quot;https://icatcare.org/app/uploads/2018/07/Thinking-of-getting-a-cat.png&quot; alt=&quot;&quot;&gt;
  
      &lt;button id=&quot;prev&quot;&gt;prev&lt;/button&gt;
      &lt;button id=&quot;next&quot;&gt;next&lt;/button&gt;
  &lt;/div&gt;
  
  &lt;!-- JavaScript --&gt;
  &lt;script src=&quot;index.js&quot;&gt;&lt;/script&gt;
  </code></pre>
  
  
  <p>css :-</p>
  <pre><code>img{
  width: 60%;
  margin-left: 20%;
  height: 50vh;
  display: none;
  }
  
  #first{
  display: block;
  }
  </code></pre>
  <p>javascript :-</p>
  <pre><code>var images = document.querySelectorAll(&quot;.slide&quot;),
  prev   = document.getElementById(&quot;prev&quot;),
  next   = document.getElementById(&quot;next&quot;),
  count  = 0;
  
  next.addEventListener(&quot;click&quot;, function() {
  images[count].style.display = &quot;none&quot;;
  if(count &gt;= images.length - 1) {
      count = 0;
  } else {
      count ++;
  }
  images[count].style.display = &quot;block&quot;;
  });
  
  prev.addEventListener(&quot;click&quot;, function() {
  images[count].style.display = &quot;none&quot;;
  if(count &lt;= 0) {
      count = images.length - 1;
  } else {
      count --;
  }
  images[count].style.display = &quot;block&quot;;
  });
  </code></pre>
  <p>......................................................
  ......................................................
  ......................................................
  ......................................................
  ......................................................
  ......................................................
  ......................................................</p>
  <p>Thanks</p>