I’m trying to create a image slider with name and description but when I add another image it added vertically I tried changing the display but nothing happens can you help me with this im only new to css and html
I want to create this kind of image slider
enter image description here
but instead this one occurs
enter image description here
What I have now:
.services {
position: relative;
overflow: hidden;
padding: 20px;
}
.services-container {
padding: 0 10vw;
display: flex;
overflow-x: auto;
scroll-behavior: smooth;
}
.services-container::-webkit-scrollbar {
display: none;
}
.service-card {
flex: auto;
display: inline-block;
width: 300px;
height: 450px;
text-align: center;
margin-right: 40px;
}
.service-image {
position: relative;
overflow: hidden;
height: 350px;
width: 100%;
}
.service-thumb {
width: 100%;
height: 100%;
object-fit: cover;
}<section class="services">
<button class="pre-btn"> <img src="image/arrow.png" alt=""></button>
<button class="next-btn"> <img src="image/arrow.png" alt=""></button>
<div class="service-container">
<div class="service-card">
<div class="service-image">
<img src="image/antiacne.jpg" class="service-thumb" alt="">
</div>
<div class="service-info">
<h2 class="service-name">Anti Acne</h2>
<p class="service-desc">Description</p>
</div>
<div class="service-container">
<div class="service-card">
<div class="service-image">
<img src="image/antiageing.jpg" class="service-thumb" alt="">
</div>
<div class="service-info">
<h2 class="service-name">Anti Aging</h2>
<p class="service-desc">Description</p>
</div>
</div>
</div>
</div>
</div>
</section>I’ve tried different display but nothing happens it just crops the image and it doesn’t fit the container
2
Answers
The html should be something like this
After that, you can play with your elements and adjust dimensions, colors etc the way you want.
This is a small and super quick but detailed answer. I updated the CSS to show how to lay out the visual parts.
What you describe is commonly called a "carousel" where you have move and focus – in this case on your "cards" or often a set of images or pictures.
Two primary navigation techniques are used. The left/right button navigation and the "thumbnail" or as I set up here a simple set of "titles" to click on to go directly to that "card".
This is not "production ready" with some ugly borders and other elements just to show what is where and make things somewhat more clear.
You can click either the < or > buttons (I used a bootstrap SVG for these so I could resize it and color it on hover, things like that) OR click the "titles" at the bottom – all styled with a combination of grid and flex – not fancy but more to illustrate.
Borrowed some code from https://stackoverflow.com/a/63773123/125981 for the scroll parts.
As for the index parts there are some useful nuggets of information here: Is it possible to get element's numerical index in its parent node without looping?