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

Question

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.

so, are you using react? and if so, you can find some slick carousal packages of react which gives the same result you are trying to find. — user20182014
– user20182014, Commented Oct 11, 2022 at 6:14
Hi @Drystan, Yes i m using react and with MUI. Okay, thanks for the info, i will take a look at this packages then. — henrylai
– henrylai, Commented Oct 11, 2022 at 6:25

user20182014 · Accepted Answer · 2022-10-11 06:24:53Z

4

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 class="scrollmenu">
  <div class="#home">
    <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 class="#news"><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 class="#contact"><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 class="#about"><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 class="#about"><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 class="#about"><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>

answered Oct 11, 2022 at 6:24

user20182014

Sign up to request clarification or add additional context in comments.

2 Comments

henrylai Over a year ago

Hi Drystan, thank you so much for the fast response! Appreciate! That's brilliant.

user20182014 Over a year ago

no worries it's my pleasure.

Mandeep Kaur · Accepted Answer · 2022-10-11 06:37:25Z

2

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 class="singleLineImageContainer">
  <div class="image">Image1</div>
  <div class="image">Image2</div>
  <div class="image">Image3</div>
  <div class="image">Image4</div>
  <div class="image">Image5</div>
  <div class="image">Image6</div>
  <div class="image">Image4</div>
  <div class="image">Image5</div>
  <div class="image">Image6</div>
</div>

answered Oct 11, 2022 at 6:37

Mandeep Kaur

1246 bronze badges

1 Comment

henrylai Over a year ago

Hi @Mandeep Kaur, thanks for the solution! Appreciate!

Collectives™ on Stack Overflow

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

2 Answers 2

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related