title: How do I create an infinite scrolling image gallery
body: <p>I'm trying to figure out a way to have multiple images on the same line extending past the div continue to scroll to the left until it's out of view at which point it would move to the end of the image gallery and continue to scroll again even if it's outside the view.<a href="https://i.stack.imgur.com/riMf1.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/riMf1.png" alt="The black is the web page and the blue is the div containing the images.(Coded to be pushed to the bottom of the page.) Lastly the red is said images." /></a></p>
  <p>Here is the code I have so far. I game the images a class because I feel that would help but I'm not sure how yet.</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>html, body {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    overflow: hidden;
  }
  *, *::before, *::after {
    box-sizing: border-box;
  }
  body {
  background-color: black;
  }
  #permas {
    height: 150px;
    bottom: 0;
    background: blue;
    position: absolute;
    overflow:hidden;
    overflow-y: hidden;
    white-space:nowrap;
  }
  #permas img {
    height: 100%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;Test site
  &lt;/title&gt;
  &lt;link rel="stylesheet" type="text/css" href="main.css"&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="permas"&gt;
    &lt;img class="scroller" src="https://i.imgur.com/wURYltS.jpg"&gt;
    &lt;img class="scroller" src="https://i.imgur.com/wURYltS.jpg"&gt;
    &lt;img class="scroller" src="https://i.imgur.com/wURYltS.jpg"&gt;
    &lt;img class="scroller" src="https://i.imgur.com/wURYltS.jpg"&gt;
    &lt;img class="scroller" src="https://i.imgur.com/wURYltS.jpg"&gt;
    &lt;img class="scroller" src="https://i.imgur.com/wURYltS.jpg"&gt;
    &lt;img class="scroller" src="https://i.imgur.com/wURYltS.jpg"&gt;
    &lt;img class="scroller" src="https://i.imgur.com/wURYltS.jpg"&gt;
    &lt;img class="scroller" src="https://i.imgur.com/wURYltS.jpg"&gt;
    &lt;img class="scroller" src="https://i.imgur.com/wURYltS.jpg"&gt;
  &lt;/div&gt;
  &lt;script src="main.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>