How to make ecommerce slider design using html css and bootstrap
Ecommerce Slider Design using Bootstrap 5
In this post, you will be learning how to make customized slider design for e-commerce using HTML, CSS, and Bootstrap 5.
View:
Note: Images need to be linked correctly. and My image size is width: 1200, height: 400
Now, To achive the above design for the slider follow the below steps.
Step 1: Write basic HTML 5 template in index.html and link slider.css file to the index.html file.
index.html Page
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Ecommerce Slider Design</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="slider.css">
</head>
<body>
<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="false">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="slider-1.jpg" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<div class="custom-carousel-content">
<h1>
<span>Best Ecommerce Solutions 1 </span>
to Boost your Brand Name & Sales
</h1>
<p>
We offer an industry-driven and successful digital marketing strategy that helps our clients
in achieving a strong online presence and maximum company profit.
</p>
<div>
<a href="#" class="btn btn-slider">
Get Now
</a>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<img src="slider-2.jpg" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<div class="custom-carousel-content">
<h1>
<span>Best Ecommerce Solutions 2 </span>
to Boost your Brand Name & Sales
</h1>
<p>
We offer an industry-driven and successful digital marketing strategy that helps our clients
in achieving a strong online presence and maximum company profit.
</p>
<div>
<a href="#" class="btn btn-slider">
Get Now
</a>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<img src="slider-3.jpg" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<div class="custom-carousel-content">
<h1>
<span>Best Ecommerce Solutions 3 </span>
to Boost your Brand Name & Sales
</h1>
<p>
We offer an industry-driven and successful digital marketing strategy that helps our clients
in achieving a strong online presence and maximum company profit.
</p>
<div>
<a href="#" class="btn btn-slider">
Get Now
</a>
</div>
</div>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions"
data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions"
data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
Step 2: Create slider.css file and link to the above index.html file and paste the below CSS code in slider.css:
.carousel-item .custom-carousel-content{
width: 50%;
transform: translate(0%, -10%);
}
.custom-carousel-content{
text-align: start;
}
.custom-carousel-content h1{
font-size: 40px;
font-weight: 700;
color: #fff;
margin-bottom: 30px;
}
.custom-carousel-content h1 span{
color: #fbff00;
}
.custom-carousel-content p{
font-size: 18px;
font-weight: 400;
color: #fff;
margin-bottom: 30px;
}
.custom-carousel-content .btn-slider{
border: 1px solid #fff;
border-radius: 0px;
padding: 8px 26px;
color: #fff;
font-size: 18px;
font-weight: 600;
letter-spacing: 0.5px;
}
Thanks for reading.