Menu
Order Details
Free Template
Portfolio
Cv
About Us
Services
Contact
Html
Css
JavaScript
Cart
Login
Register
home page
How To Carousel Slider Bootstrap 5.3
Code Zara
2025-04-16 08:55:21
How to Carousel Slider Html Css Bootstrap
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>carousel slider</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" integrity="sha512-Evv84Mr4kqVGRNSgIGL/F/aIDqQb7xQ2vcrdIwxfjThSH8CSR7PBEakCr51Ck+w+/U6swU2Im1vVX0SVk9ABhg==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" /> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-SgOJa3DmI69IUzQ2PVdRZhwQ+dy64/BUtbMJw1MZ8t5HZApcHrRKUc4W0kG879m7" crossorigin="anonymous"> <!-- Customized Bootstrap Stylesheet --> <link href="css/bootstrap.min.css" rel="stylesheet"> <!-- Template Stylesheet --> <link href="css/style.css" rel="stylesheet"> </head> <body> <div class="container-fluid p-0"> <div id="mycarousel" class="carousel slide" data-bs-ride="carousel"> <div class="carousel-inner"> <div class="carousel-item active"> <img src="/carousel/img/carousel-bg-1.jpg" alt="" class="w-100"> <div class="carousel-caption"> <div class="container"> <div class="row"> <div class="col-xl-6 animate__animated animate__bounceInDown"> <h1 class="bold fs text-light">Image Title</h1> <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ab, provident consectetur. Eum provident repellendus porro quam amet, maxime qui aperiam sit nemo esse. Ratione eaque accusamus quod mollitia adipisci. Nemo?</p> <a href="" class="btn btn-light">ReadMore</a> </div> <div class="col-xl-6 animate__animated animate__bounceInDown"> <img src="/carousel/img/carousel-1.png" alt=""> </div> </div> </div> </div> </div> <div class="carousel-item"> <img src="/carousel/img/carousel-bg-2.jpg" alt="" class="w-100"> <div class="carousel-caption"> <div class="container"> <div class="row"> <div class="col-xl-6 animate__animated animate__bounceInDown"> <h1 class="bold fs text-light">Image Title</h1> <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ab, provident consectetur. Eum provident repellendus porro quam amet, maxime qui aperiam sit nemo esse. Ratione eaque accusamus quod mollitia adipisci. Nemo?</p> <a href="" class="btn btn-light">ReadMore</a> </div> <div class="col-xl-6 animate__animated animate__bounceInDown"> <img src="/carousel/img/carousel-2.png" alt=""> </div> </div> </div> </div> </div> <button type="button" class="carousel-control-prev" data-bs-target="#mycarousel" data-bs-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> </button> <button type="button" class="carousel-control-next" data-bs-target="#mycarousel" data-bs-slide="next"> <span class="carousel-control-next-icon"aria-hidden="true"></span> </button> </div> </div> </div> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-k6d4wzSIapyDyv1kpU366/PK5hCdSbCRGRCMv+eplOQJWyd1fbcAu9OCUj5zNLiq" crossorigin="anonymous"></script> </body> </html>
copy text
YouTube Tutorial Video
How To Carousel Slider Bootstrap 5.3
Carousel Slider
How to add to cart shopping in HTML,CSSs, JavaScript
Shoping Card
How to HTML CSS Form Design in Animation border
Responsive Website
How To Responsive Navbar HTML CSS
responsive navbar html css
JavaScript Introduction
JavaScript Introduction
How To Responsive Navbar HTML CSS and JavaScript
Responsive Navbar HTML CSS And JavaScript
How to Design Calculator with HTML CSS JavaScript
Calculator design
