<!--Carousel Wrapper-->
		<div id="carousel-thumb" class="carousel slide carousel-fade carousel-thumbnails" data-ride="carousel">
			<!--Slides-->
			<div class="carousel-inner" role="listbox">
				<div class="carousel-item active">
					<img class="d-block w-100" src="https://placeimg.com/1900/1080/any" alt="First slide">
				</div>
				<div class="carousel-item">
					<img class="d-block w-100" src="https://placeimg.com/1900/1080/any" alt="Second slide">
				</div>
				<div class="carousel-item">
					<img class="d-block w-100" src="https://placeimg.com/1900/1080/any" alt="Third slide">
				</div>
			</div>
			<!--/.Slides-->
			<!--Controls-->
			<a class="carousel-control-prev" href="#carousel-thumb" 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="#carousel-thumb" role="button" data-slide="next">
				<span class="carousel-control-next-icon" aria-hidden="true"></span>
				<span class="sr-only">Next</span>
			</a>
			<!--/.Controls-->
			<ol class="carousel-indicators">
				<li data-target="#carousel-thumb" data-slide-to="0" class="active">
					<img class="d-block w-100" src="https://placeimg.com/1900/1080/any" class="img-fluid">
				</li>
				<li data-target="#carousel-thumb" data-slide-to="1">
					<img class="d-block w-100" src="https://placeimg.com/1900/1080/any" class="img-fluid">
				</li>
				<li data-target="#carousel-thumb" data-slide-to="2">
					<img class="d-block w-100" src="https://placeimg.com/1900/1080/any" class="img-fluid">
				</li>
			</ol>
		</div> 

<!-- Footer start -->
        <div class="codepen_profile">
            <a href="https://codepen.io/piyush-tapaniya" target="_blank">
                <img src="https://cdn2.iconfinder.com/data/icons/social-icons-33/128/Codepen-512.png" width="30px">
            </a>
        </div>
        <!-- Footer End -->
.carousel-indicators {bottom: 60px;}
			.carousel-indicators li {width: 100px; }
			.carousel-indicators li img{border: 1px solid #fff;}

/*Footer start*/
            .codepen_profile{position: fixed; right: 20px; bottom: 20px;}
            .codepen_profile a {background: rgb(245 122 32 / 53%); padding: 15px; border-radius: 50%; box-shadow: hsl(0deg 0% 80%) 0 5px 16px; height: 60px; width: 60px; display: inline-block; }
            /*Footer End*/

External CSS

  1. https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css

External JavaScript

  1. https://code.jquery.com/jquery-3.3.1.slim.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js
  3. https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js