www.ambanadi.com

HTML

<div class="container"> <div class="row d-flex justify-content-center mt-5"> <div class="col-md-6"> <div id="myCarousel" class="carousel slide" data-ride="carousel" align="center"> <div class="carousel-inner"> <div class="carousel-item active"> <img src="https://i.imgur.com/bV1xmG5.jpg" class="rounded"> </div> <div class="carousel-item"> <img src="https://i.imgur.com/vgMi4nw.jpg" class="rounded"> </div> <div class="carousel-item"> <img src="https://i.imgur.com/hRlGe10.jpg" class="rounded"> </div> </div> <ol class="carousel-indicators list-inline"> <li class="list-inline-item active"> <a id="carousel-selector-0" class="selected" data-slide-to="0" data-target="#myCarousel"> <img src="https://i.imgur.com/bV1xmG5.jpg" class="img-fluid rounded"> </a> </li> <li class="list-inline-item"> <a id="carousel-selector-1" data-slide-to="1" data-target="#myCarousel"> <img src="https://i.imgur.com/vgMi4nw.jpg" class="img-fluid rounded"> </a> </li> <li class="list-inline-item"> <a id="carousel-selector-2" data-slide-to="2" data-target="#myCarousel"> <img src="https://i.imgur.com/hRlGe10.jpg" class="img-fluid rounded"> </a> </li> </ol> </div> </div> </div>
</div>

Css

body {
    background-color: #eee
}

.carousel-inner img {
    width: 100%
}

.carousel-item img {
    width: 320px;
    height: 240px !important
}

#myCarousel .carousel-indicators {
    position: static;
    margin-top: 0px
}

#myCarousel .carousel-indicators>li {
    width: 100px
}

#myCarousel .carousel-indicators li img {
    display: block;
    opacity: 0.5
}

#myCarousel .carousel-indicators li.active img {
    opacity: 1
}

#myCarousel .carousel-indicators li:hover img {
    opacity: 0.75
}

Source

https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css
https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js
https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js

Leave a Reply

Your email address will not be published.