移动设备中div的可滑动水平滚动

Question

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. See the image below.

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.

So let's say my code is:

<div class="main-image-frame">
   <img src="img.jpg">
</div>
<div class="thumbnail-container">
  <div class="thumbnail>
    <img src="tnail.jpeg">
  </div>
  <div class="thumbnail>
    <img src="tnail.jpeg">
  </div>
  <div class="thumbnail>
    <img src="tnail.jpeg">
  </div>
  <div class="thumbnail>
    <img src="tnail.jpeg">
  </div>
  <div class="thumbnail>
    <img src="tnail.jpeg">
  </div>
  <div class="thumbnail>
    <img src="tnail.jpeg">
  </div>
</div>

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

Answer 1

No need to use JavaScript. It can be done using CSS.

Set the container to a fixed width, and give it two important properties:

overflow-x:scroll;
white-space:nowrap;

Then for each thumbnail, have the following:

display:inline-block;

 .container { background-color:red; height:100px; width:calc(100% - 40px); margin:10px; overflow-x:scroll; padding:10px; white-space: nowrap; } .thumbnail { background-color:blue; display:inline-block; height:100%; width:30%; } .thumbnail img { height:100%; width:100%; } 

 <div class="container"> <div class="thumbnail"> <img src="http://www.bobbyberberyan.com/wp-content/uploads/2012/03/HTML5CSS3Logos.svg"></img> </div> <div class="thumbnail"> <img src="http://www.bobbyberberyan.com/wp-content/uploads/2012/03/HTML5CSS3Logos.svg"></img> </div> <div class="thumbnail"> <img src="http://www.bobbyberberyan.com/wp-content/uploads/2012/03/HTML5CSS3Logos.svg"></img> </div> <div class="thumbnail"> <img src="http://www.bobbyberberyan.com/wp-content/uploads/2012/03/HTML5CSS3Logos.svg"></img> </div> <div class="thumbnail"> <img src="http://www.bobbyberberyan.com/wp-content/uploads/2012/03/HTML5CSS3Logos.svg"></img> </div> <div class="thumbnail"> <img src="http://www.bobbyberberyan.com/wp-content/uploads/2012/03/HTML5CSS3Logos.svg"></img> </div> <div class="thumbnail"> <img src="http://www.bobbyberberyan.com/wp-content/uploads/2012/03/HTML5CSS3Logos.svg"></img> </div> </div>