I’m trying to make a product slider for smaller devices.
I want to allow the user to scroll horizontally(x) to the overflown components
What other alternative ways can I use for it?
I tried to do with flexbox.
This is my code:
Html:
// There is home container in its parent. It has no styling
<div className="featured">
<div className="vector-1">
<svg width="243" height="540" viewBox="0 0 243 540" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="-412.996" y="310.003" width="599.998" height="253.281" rx="29.5" transform="rotate(-30 -412.996 310.003)" stroke="#5A44BF" stroke-width="41"/>
</svg>
</div>
<div className="vector-2">
<svg width="464" height="540" viewBox="0 0 464 540" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="10.0035" y="310.004" width="599.998" height="253.281" rx="29.5" transform="rotate(-30 10.0035 310.004)" stroke="#5A44BF" stroke-width="41"/>
</svg>
</div>
<div className="content">
<div className="text mx-auto">
<h1>Flat 30% off</h1>
<h2>Don't Miss Our
Featured Fashion Collection.</h2>
</div>
<div className="products">
{products.map((product, index) => <div key={product._id} className="p-0 mx-4"> <Product info={product} /></div>)}
</div>
</div>
</div>
The above code is in jsx. There is not much difference
Css:
.Home .featured {
position: relative;
/* min-width: 100vw;
width: 100vw; */
min-height: 700px;
height: 100vh;
background-color: #604AC8;
overflow: hidden;
}
.Home .featured .vector-1 {
position: absolute;
bottom: 0;
transform: translate(0, 50%);
left: 0;
}
.Home .featured .vector-1 svg {
width: 50%;
height: 50%;
}
.Home .featured .vector-2 {
position: absolute;
top: 0;
right: 0;
transform: translate(50%, -50%);
}
.Home .featured .vector-2 svg {
width: 50%;
height: 50%;
}
.Home .featured .content {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.Home .featured .content .text {
height: 100%;
display: flex;
flex-direction: column;
/* justify-content: center; */
margin-top: 100px;
}
.Home .featured .content .text h1{
color: #FFFCFC;
font-family: Oswald;
font-size: 10px;
font-style: normal;
font-weight: 400;
margin-left: 20px;
line-height: normal;
letter-spacing: 1px;
text-transform: capitalize;
}
.Home .featured .content .text h2 {
color: #FFFCFC;
font-family: Hagrid;
font-size: 24px;
margin-left: 20px;
font-style: normal;
font-weight: 400;
letter-spacing: 1.8px;
text-transform: capitalize;
}
.Home .featured .content .products {
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
}
.Home .featured .container {
padding: 0;
/* min-width: 100%; */
}
@media screen and (max-width:992px){
.Home .featured {
min-height: 1100px;
}
.Home .featured .content {
flex-direction: column;
width: 100%;
justify-content: center;
align-items: center;
}
.Home .featured .content .products {
justify-content: stretch ;
overflow: auto;
/* transform: translateX(30%); */
}
}
@media screen and (max-width: 400px) {
.Home .featured .content .text h1 {
font-size: 8px;
}
.Home .featured .content .text h2 {
font-size: 18px;
}
.Home .featured .content .text {
width: 50%;
}
.Home .suggestions .content .options .offers .circle button {
font-size: 11px;
width: 60px;
margin-bottom: 10px;
margin-left: 10px;
}
}
}
Product component:
<div className="Product">
<div>
<div className="product_img">
<img src={STATIC_PATH + info.img} alt={info.name} />
</div>
<div className="product_content">
<h1> {info.name} </h1>
<h2> ₹{info.price.current} <s> ₹{info.price.original} </s> </h2>
<Link to={`/product/${info._id}`} className="btn">View Product <span>➔</span> </Link>
</div>
</div>
</div>
.Product {
overflow: hidden;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
font-size: inherit;
background-color: #FFC300;
outline: 5px solid rgba(255, 255, 255, 0.1);
border-radius: 20px;
}
.Product .product_img img{
max-width: 300px;
max-height: 300px;
border-radius: 20px;
}
.Product .product_content {
padding: 1em 0.75em;
/* text-align: center; */
}
.Product .product_content h1 {
text-overflow: ellipsis;
color: #FFF;
text-align: center;
font-family: Oswald;
font-size: 1.75em;
font-style: normal;
font-weight: 400;
line-height: normal;
}
.Product .product_content h2 {
display: flex;
justify-content: center;
align-items: center;
color: #FFF;
font-family: Oswald;
font-size: 1.5em;
font-style: normal;
font-weight: 600;
line-height: normal;
text-transform: uppercase;
margin-top: 1em;
}
.Product .product_content h2 s {
margin-left: 10px;
font-size: 0.75em ;
}
.Product .product_content .btn {
width: 100%;
margin-top: 1.5em;
color: white;
font-family: Hagrid;
padding: 0.75em;
background-color: #793eed;
display: flex;
justify-content: center;
align-items: center;
border-radius: 15px;
letter-spacing: 1.5px;
}
.Product .product_content .btn span {
margin-left: 0.5em;
position: relative;
}
.Product .product_content .btn span::after {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: rgb(255, 255, 255, 0.25);
border-radius: 100%;
transform: translate(-20%, -5%);
width: 2em;
height: 2em;
}
@media screen and (max-width: 525px){
.Product .product_content h1 {
font-size: 1.5em;
}
.Product .product_content h2 {
font-size: 1.4em;
}
.Product .product_content .btn {
font-size: 0.9em;
letter-spacing: 0;
}
}
@media screen and (max-width : 400px){
.Product .product_content h1 {
font-size: 1em;
}
.Product .product_content h2 {
font-size: 0.9em;
}
.Product .product_content .btn {
font-size: 0.5em;
letter-spacing: 0;
}
}
This is the output:
I want it such that the user can scroll through these
I tried setting overflow-x to auto, which didn’t work. What are the other ways I can use?
If you’d like to suggest other ways on how to achieve this, by using a alternative way, feel free to!
2
Answers
To enable horizontal scroll you can use some alternative ways along with your existing flexbox.
i see that you tried
overflox-x
property, try adding these lines on your.Home .featured .content .products.
:Use JS for customize scroll function using jQuery,
Scroll snapping, to make sure your products appear on your viewport during the scroll.
Using Swiper.js library. Why? because its highly customizable and can be easily installed via npm or CDN link.
Here is an example of what you want. I don’t see where you styled the element with the class called "products".
This element is very important because you need it to create the horizontal scroll. I hope the code below helps you.