title: Swipeable horizontal scrolling in div on mobile
body: <p>So I have a page where I have a main image frame, and below it I have thumbnails.
  When the user clicks on a thumbnail, the main image frame changes the image to the image shown in the clicked thumbnail. Like a carousel. <strong>See the image below.</strong></p>
  
  <p>Now, my problem is, if the user will add 20 thumbnails, I don't wanna show all. I want the thumbnails to always show just the 3 and be swipeable on mobile, so you can scroll horizontally and browse the thumbnails.</p>
  
  <p>So let's say my code is:</p>
  
  <pre><code>&lt;div class="main-image-frame"&gt;
     &lt;img src="img.jpg"&gt;
  &lt;/div&gt;
  &lt;div class="thumbnail-container"&gt;
    &lt;div class="thumbnail&gt;
      &lt;img src="tnail.jpeg"&gt;
    &lt;/div&gt;
    &lt;div class="thumbnail&gt;
      &lt;img src="tnail.jpeg"&gt;
    &lt;/div&gt;
    &lt;div class="thumbnail&gt;
      &lt;img src="tnail.jpeg"&gt;
    &lt;/div&gt;
    &lt;div class="thumbnail&gt;
      &lt;img src="tnail.jpeg"&gt;
    &lt;/div&gt;
    &lt;div class="thumbnail&gt;
      &lt;img src="tnail.jpeg"&gt;
    &lt;/div&gt;
    &lt;div class="thumbnail&gt;
      &lt;img src="tnail.jpeg"&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>How do I make it horizontally scrollable and swipeable in mobile? I guess a combination of CSS and js but I have no idea how to start</p>
  
  <p><a href="https://i.stack.imgur.com/5QMeW.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/5QMeW.jpg" alt="scrollable thumbnails"></a></p>