How to add a single line image list that is horizontal scrollable (in react js)-CodePudding

I would like to get some suggestions/solutions and methods on how to add in a single line image list that is horizontally scrollable. Given that you have a html page, with multiple div elements and the page is vertically scrollable. And at the last row of the page, I want to display a list of images that can be horizontally scrollable. What can be done to achieve this effect? Please refer to the following image. The red line box is the component in react js that display the list of images.

CodePudding user response：

If you want to do this in plain html and using css than you can try it out this and if you want to do this in react then Check out this.

div.scrollmenu {
  background-color: #333;
  overflow: auto;
  white-space: nowrap;
}

div.scrollmenu div {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px;
  text-decoration: none;
}

div.scrollmenu div:hover {
  background-color: #777;
}

img {
  width: 100px;
  height: 100px;
}

<div >
  <div >
    <img src="https://images.unsplash.com/photo-1615463738213-b9381d217b4e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1332&q=80">
  </div>
  <div ><img src="https://images.unsplash.com/photo-1578301978018-3005759f48f7?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1144&q=80"></div>
  <div ><img src="https://images.unsplash.com/photo-1506744038136-46273834b3fb?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80"></div>
  <div ><img src="https://images.unsplash.com/photo-1581337204873-ef36aa186caa?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1156&q=80"></div>
  <div ><img src="https://images.unsplash.com/photo-1581337204873-ef36aa186caa?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1156&q=80"></div>
  <div ><img src="https://images.unsplash.com/photo-1581337204873-ef36aa186caa?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1156&q=80"></div>
</div>

CodePudding user response：

Please try this code. This will help you to achieve your target.

.singleLineImageContainer {
  display: flex;
  width: 100%;
  background: #899;
  overflow: auto;
}
.image {
  background-color: #fff;
  border: 1px solid #000;
  margin: 10px;
  padding: 50px;
}

<div >
  <div >Image1</div>
  <div >Image2</div>
  <div >Image3</div>
  <div >Image4</div>
  <div >Image5</div>
  <div >Image6</div>
  <div >Image4</div>
  <div >Image5</div>
  <div >Image6</div>
</div>