This is bootstrap 4 carousel text slider demo. In this text slider we are display title and description. this is automatic slider. in this slider you can see next previous button. this is simple text slider example

We allows to free snippets of bootstrap 4 text carousel , you can download full code of bootstrap 4 carousel text only layout. Here in this post i will give you example of bootstrap carousel slider responsive snippet and you will get simple code of html, css and jquery. In bootstrap 4 carousel multiple items snippet i give you three tab with html, css and js, you can easily get code of bootstrap slider bar layout.


<!doctype html> <html lang="en"> <head> <title>Text Slider | Bootstrap 4</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> <link href="https://fonts.googleapis.com/css?family=Ropa+Sans" rel="stylesheet"> <link rel="stylesheet" type="text/css" href="custom.css"> </head> <body> <div class="container"> <div class="row"> <div class="col-md-10 offset-md-1 col-12 slider-main"> <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel"> <ol class="carousel-indicators"> <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li> <li data-target="#carouselExampleIndicators" data-slide-to="1"></li> <li data-target="#carouselExampleIndicators" data-slide-to="2"></li> </ol> <div class="carousel-inner text-white m-auto"> <div class="carousel-item active"> <h3 class="text-dark bg-white mb-4 pl-3 pr-3 pt-1 pb-1 font-weight-bold">HOME</h3><br> <p class="text-justify"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> </div> <div class="carousel-item"> <h3 class="text-dark bg-white mb-4 pl-3 pr-3 pt-1 pb-1 font-weight-bold">ABOUT US</h3><br> <p class="text-justify"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> </div> <div class="carousel-item"> <h3 class="text-dark bg-white mb-4 pl-3 pr-3 pt-1 pb-1 font-weight-bold">CONTACT US</h3><br> <p class="text-justify"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> </div> </div> <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> </div> </div> </div> </body> </html>
body{ font-family: 'Ropa Sans', sans-serif; background: #E96D65; } .carousel-indicators{ top: 200px; } .slider-main{ margin-top: 220px; } .carousel-inner{ width: 70%; } .carousel-inner .carousel-item h3{ display: inline-block; opacity: 0.5; } .carousel-inner .carousel-item p{ font-size: 17px; } @media (max-width: 360px) { .carousel-indicators{ top: 320px; } }

Please Subscribe Your Email Address, We Will Notify You When Add New Snippet:





Random Post