CODE:-
<!doctype html>
<!-- Required meta tags -->
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous" />
<h1></h1>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous">
</script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
<div class="carousel slide" data-ride="carousel" id="carouselExampleCaptions">
<ol class="carousel-indicators">
<li class="active" data-slide-to="0" data-target="#carouselExampleCaptions">
</li> <li data-slide-to="1" data-target="#carouselExampleCaptions">
</li> <li data-slide-to="2" data-target="#carouselExampleCaptions">
</li> </ol> <div class="carousel-inner">
<div class="carousel-item active">
<img alt="29 earn and learn" class="d-block w-100" src="https://play-lh.googleusercontent.com/xVL8jmXJBQjgiIGbksaqF4ETtDA-CGKuzsOw7PAIi2HoQ0-ahD6EMgmMj7bV4txohrnk=w526-h296-rw" /> <div class="carousel-caption d-none d-md-block">
<h5></h5>
<p></p>
</div>
</div>
<div class="carousel-item">
<img alt="..." class="d-block w-100" src="https://play-lh.googleusercontent.com/xOTEGAILE3DE8Ispr99reXNCiPnygzSnoVyS4cD2dyQqDk476ouKOihnee-okmmrhg=w526-h296-rw" /> <div class="carousel-caption d-none d-md-block">
<h5></h5>
<p></p>
</div>
</div>
<div class="carousel-item">
<img alt="..." class="d-block w-100" src="https://play-lh.googleusercontent.com/ACvO2lDRSpNlok5Tz-pTc0W2XYYJ3pZIN2Upom6qWm1nX2fv_VS6JsXI8V0_-RXUEA=w526-h296-rw" /> <div class="carousel-caption d-none d-md-block">
<h5></h5>
<p></p>
</div>
</div>
<div class="carousel-item">
<img alt="..." class="d-block w-100" src="https://play-lh.googleusercontent.com/Tuf7vPRQSyO-QO_iQ4rZcrQ4MzUlMXoXBBMw27gw3Ors3Y4-WbKOuSOU-oifCURnOSdx=w526-h296-rw" /> <div class="carousel-caption d-none d-md-block">
<h5></h5>
<p></p>
</div>
</div>
<div class="carousel-item">
<img alt="..." class="d-block w-100" src="https://play-lh.googleusercontent.com/R6QYmw73DGfBIn3f6iUquCLyFqUo-jqNZmkvxTfUcQRPK3iSa1vPvnUuUQ8bSA9xqdo=w526-h296-rw" /> <div class="carousel-caption d-none d-md-block">
</div>
</div>
</div> <!-- End carousel inner -->
<!-- Next and Previous Arrows -->
<a class="carousel-control-prev" href="#carouselExampleCaptions" 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="#carouselExampleCaptions" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
<script>
$(document).ready(function(){
$('#carouselExampleCaptions').on('slid.bs.carousel', function () {
var currentIndex = $('#carouselExampleCaptions .active').index() + 1;
$('#imageCounter').text(currentIndex + ' / 5');
});
});
</script>
<!-- Image Counter -->
<div class="text-center mt-2">
<span id="imageCounter">1 / 5</span>
</div>
Buttons Code:-
<div style='text-align: center;'>
<ul class='btn'>
<li><a class='gplay' href='https://draft.blogger.com/YOUR-LINK-HERE' target='_blank'>GOOGLE PLAY</a></li>
<li><a class='download' href='https://draft.blogger.com/YOUR-LINK-HERE' target='_blank'>DOWNLOAD</a></li>
</ul>
</div>