title: How to make a looping carousel/slider (with arrows)?
body: <p>I'm currently coding a website for school, and I can't seem to make my slider/carousel work.</p>
  
  <p>I'm trying to achieve this look : </p>
  
  <p><img src="https://www.zupimages.net/up/19/01/ip8x.png" alt="carousel"></p>
  
  <p>The images must slide by 1 pic when a button is clicked, and it should loop (meaning the first pic to disappear should show up on the other side)</p>
  
  <p>The fade effect is for later, don't mind it.</p>
  
  <p>I've tried many thing, some using pure CSS, others with JS... I'm open to suggestions. </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-css lang-css prettyprint-override"><code>.slideshow {
    height: 240px;
    background-color: grey;
    overflow: hidden;
    position: relative;
  }
  .slide_content {
    display: flex;
    flex-direction: row;
    overflow: hidden;
    height: 100%;
  }
  .fluidimg {
    max-width: 100%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;button class="button js-prev"&gt; &lt; &lt;/button&gt;
  
  &lt;div class="slideshow js-slide"&gt;
     &lt;ul class="slide_content"&gt;
       &lt;li class="slide_item"&gt;&lt;img src="img.png" class="fluidimg"&gt;&lt;/li&gt;
       &lt;li class="slide_item"&gt;&lt;img src="img.png" class="fluidimg"&gt;&lt;/li&gt;
       &lt;li class="slide_item"&gt;&lt;img src="img.png" class="fluidimg"&gt;&lt;/li&gt;
       &lt;li class="slide_item"&gt;&lt;img src="img.png" class="fluidimg"&gt;&lt;/li&gt;
       &lt;li class="slide_item"&gt;&lt;img src="img.png" class="fluidimg"&gt;&lt;/li&gt;
       &lt;li class="slide_item"&gt;&lt;img src="img.png" class="fluidimg"&gt;&lt;/li&gt;
     &lt;/ul&gt;
   &lt;/div&gt;
  
   &lt;button class="button js-prev"&gt; &gt; &lt;/button&gt;</code></pre>
  </div>
  </div>
  </p>