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 &amp; 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 &amp; 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 &amp; 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.

© Copyright - 2018 - 2022 | All rights reserved at Funda of Web IT