"Carousel"
Bootstrap 3.3.0 Snippet by imsachin

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html lang="en"> <head> <title>HTML</title> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700" rel="stylesheet"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <!--[if IE]> <link href="~/Content/NewHomePage/all-ie-only.css" rel="stylesheet" /> <![endif]--> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="style.css"> </head> <body> <div class="dealAll"> <div class="container-fluid"> <div class="row"> <div class="col-xs-12"> <h2 class="headings mrT20"> Amazing Experiences </h2> <p class="text-center"> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tenetur animi, suscipit totam et porro repellat minima quibusdam optio sit incidunt rem! Necessitatibus obcaecati inventore eaque facere reiciendis ut repudiandae impedit. </p> </div> </div> <div class="row"> <div id="carousel-deal" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#carousel-deal" data-slide-to="0" class="active"></li> <li data-target="#carousel-deal" data-slide-to="1"></li> <li data-target="#carousel-deal" data-slide-to="2"></li> </ol> <!-- Wrapper for slides --> <div class="carousel-inner" role="listbox"> <div class="item active"> <img src="https://cdn.beam.usnews.com/dims4/USNEWS/59f1d50/2147483647/thumbnail/970x647/quality/90/?url=http%3A%2F%2Fcom-usnews-beam-media.s3.amazonaws.com%2F28%2F21%2F37a23a5f40048594e7e1209a842d%2F150427-networking-stock.jpg" alt="Image" title="Project" class="img-responsive width100"> <div class="carousel-caption"> <h5> WorldWide Tour from $2500 PP </h5> <p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quo nulla impedit, delectus voluptas doloribus corporis distinctio natus enim dolorem, quas odit commodi eum temporibus labore numquam nisi. Cumque, officia eaque! </p> <a href="#" class="btn mybtn"> View Trip </a> </div> </div> <div class="item"> <img src="https://cdn.beam.usnews.com/dims4/USNEWS/59f1d50/2147483647/thumbnail/970x647/quality/90/?url=http%3A%2F%2Fcom-usnews-beam-media.s3.amazonaws.com%2F28%2F21%2F37a23a5f40048594e7e1209a842d%2F150427-networking-stock.jpg" alt="Image" title="Project" class="img-responsive width100"> <div class="carousel-caption"> <h5> WorldWide Tour from $2500 PP </h5> <p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quo nulla impedit, delectus voluptas doloribus corporis distinctio natus enim dolorem, quas odit commodi eum temporibus labore numquam nisi. Cumque, officia eaque! </p> <a href="#" class="btn mybtn"> View Trip </a> </div> </div> </div> <!-- Controls --> <a class="left carousel-control" href="#carousel-deal" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#carousel-deal" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> </div> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> </body> </html>
.dealAll .headings {text-align: center;color: #ff3d00;margin-bottom: 20px;font-weight: 600;} .dealAll .carousel-caption {text-align: left; left: 15%; top: 25%;} .dealAll .carousel-caption h5 {font-size: 35px; font-weight: 700;} .dealAll .carousel-caption p {font-size: 16px; font-weight: 500;} .dealAll .carousel-caption .btn {font-size: 16px; padding: 10px 25px;margin-top: 15px;border-radius:20px; }

Related: See More

Vuetify Material Dashboard
Bootstrap 4 Carousel
Carousel with Search
Bootstrap 4 Blog Carousel

Questions / Comments: