www.ambanadi.com

HTML

<div class="container mt-100">
        <div class="row">
          <div class="col-md-8 mr-auto ml-auto">
            
            <div class="card card-raised card-carousel">
              <div id="carouselindicators" class="carousel slide" data-ride="carousel" data-interval="3000">
                <ol class="carousel-indicators">
                  <li data-target="#carouselindicators" data-slide-to="0" class=""></li>
                  <li data-target="#carouselindicators" data-slide-to="1" class="active"></li>
                  <li data-target="#carouselindicators" data-slide-to="2" class=""></li>
                </ol>
                <div class="carousel-inner">
                  <div class="carousel-item active carousel-item-left">
                    <img class="d-block w-100" src="https://i.imgur.com/kjR96mD.jpg" alt="First slide">
                    <div class="carousel-caption d-none d-md-block">
                      <h4>
                        <i class="fa fa-map-marker"></i>
                        Dharamshala,Himachal Pradesh, India
                      </h4>
                    </div>
                  </div>
                  <div class="carousel-item carousel-item-next carousel-item-left">
                    <img class="d-block w-100" src="https://i.imgur.com/l3iUv92.jpg" alt="Second slide">
                    <div class="carousel-caption d-none d-md-block">
                      <h4>
                        <i class="fa fa-map-marker"></i>
                       Manali,Himachal Pradesh, India
                      </h4>
                    </div>
                  </div>
                  <div class="carousel-item">
                    <img class="d-block w-100" src="https://i.imgur.com/rHCSTM1.jpg" alt="Third slide">
                    <div class="carousel-caption d-none d-md-block">
                      <h4>
                        <i class="fa fa-map-marker"></i>
                        Kerala,Kerala, India
                      </h4>
                    </div>
                  </div>
                </div>
                <a class="carousel-control-prev" href="#carouselindicators" role="button" data-slide="prev" data-abc="true">
                  <i class="fa fa-chevron-left"></i>
                  <span class="sr-only">Previous</span>
                </a>
                <a class="carousel-control-next" href="#carouselindicators" role="button" data-slide="next" data-abc="true">
                   <i class="fa fa-chevron-right"></i>
                  <span class="sr-only">Next</span>
                </a>
              </div>
            </div>
           
          </div>
        </div>
      </div>

Css

@import url(https://fonts.googleapis.com/css?family=Calibri:400,300,700);

body{
   
    
    vertical-align: middle;
    display: flex;
    font-family: 'Calibri', sans-serif !important;
	background-color:#eee;
}


.mt-100{
	
	margin-top:100px;
}

.carousel .carousel-indicators li{
	
	display:inline-block;
	width:10px;
	height:10px;
	text-indent: -99px;
	cursor:pointer;
	border:1px solid #fff;
	background:#fff;
	border-radius:2px;
	
	
}

Sources

https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css
https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js
https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js
https://use.fontawesome.com/releases/v5.7.2/css/all.css

Leave a Reply

Your email address will not be published.