Issue
Attempting to make a side-scroll carousel, where I wish to keep element hidden and then have them scroll into view.
In order to allow my sub-container (containing my images) to be wider than its parent, I've used position: absolute. I had hoped then adding overflow-x: hidden would allow the additional content to not be shown outside the div until I scroll across. However, this does not work.
I attempted to add position: relative to the container but this simply makes my side-scroll carousel constrained to the size of the parent.
How can I make the images that sit outside the grey area not be visible?
.carousel {
background-color: grey;
padding: 20px;
height: 100px;
width: 345px;
overflow-x: hidden;
}
.carousel-image-holder {
position: absolute;
}<div class=carousel>
<div class=carousel-image-holder>
<img src=https://placekitten.com/75/100 />
<img src=https://placekitten.com/75/100 />
<img src=https://placekitten.com/75/100 />
<img src=https://placekitten.com/75/100 />
<img src=https://placekitten.com/75/100 />
<img src=https://placekitten.com/75/100 />
<img src=https://placekitten.com/75/100 />
</div>
</div>Solution
To create a side-scroll carousel where the elements are hidden and then scroll into view, you can make use of a combination of overflow-x: hidden and white-space: nowrap properties. Here's an example of how you can modify your code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.carousel {
background-color: grey;
padding: 20px;
height: 100px;
width: 345px;
overflow-x: hidden;
}
.carousel-image-holder {
white-space: nowrap;
}
.carousel-image-holder img {
display: inline-block;
margin-right: 10px; /* Optional: Add margin between images */
}
</style>
<title>Side-Scroll Carousel</title>
</head>
<body>
<div class="carousel">
<div class="carousel-image-holder">
<img src="https://placekitten.com/75/100" alt="Kitten 1">
<img src="https://placekitten.com/75/100" alt="Kitten 2">
<img src="https://placekitten.com/75/100" alt="Kitten 3">
<img src="https://placekitten.com/75/100" alt="Kitten 4">
<img src="https://placekitten.com/75/100" alt="Kitten 5">
<img src="https://placekitten.com/75/100" alt="Kitten 6">
<img src="https://placekitten.com/75/100" alt="Kitten 7">
</div>
</div>
</body>
</html>Answered By - Numan Ul Haq
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.