October 17, 2021

Layer slider bootstrap

<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> 
    </ol>
    <div class="carousel-inner">
      <div class="carousel-item active">
        <img src="https://tolmatol.com/uploads-images/layer-banner/banner-1.jpg" class="d-block w-100 img-fluid" alt="...">
        <div class="carousel-caption" class="animated fadeIn" style="animation-delay: .2s;">
            <small class="animated fadeInUp" style="animation-delay: .3s;">Welcome to Tolmatol </small>
            <h3 class="animated fadeInUp" style="animation-delay: .3s;">Beautiful House In The Best Place </h3>
            <p class="animated fadeInDown" style="animation-delay: .3s;">1234 Lorem Ave, New Delhi, INDIA</p>
          </div>
      </div>
      <div class="carousel-item">
        <img src="https://tolmatol.com/uploads-images/layer-banner/banner-2.jpg" class="d-block w-100 img-fluid" alt="...">
        <div class="carousel-caption" class="animated fadeIn" style="animation-delay: .2s;">
                <small class="animated fadeInUp" style="animation-delay: .3s;">Welcome to Tolmatol </small>
                <h3 class="animated fadeInUp" style="animation-delay: .3s;">Beautiful House In The Best Place </h3>
                <p class="animated fadeInDown" style="animation-delay: .3s;">1234 Lorem Ave, New Delhi, INDIA</p>
              </div>
      </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>

 

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css">
   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
   <link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600&display=swap" rel="stylesheet">

  <style>
      body { font-family: 'Poppins', sans-serif; } 
       .carousel-item img { height: 450px;} 
       .carousel-caption { top:35%; position: absolute;} 
       .carousel-caption small { color: rgb(31, 221, 255);} 
       .carousel-caption small { font-size: 22px; display: block;} 
       .carousel-caption h3 { font-size: 45px;   }
       .carousel-caption p { font-size: 25px;} 
       .carousel-item:before { position: absolute; left: 0px; width: 100%; height: 100%; content: '';  background: rgba(0, 0, 0, 0.37);} 
   </style>

 

 <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

 

Leave a Reply

Your email address will not be published. Required fields are marked *