slider

<!-- CDN files -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
 
 <!-- UI-->
 <v-container class="mt-6">

        <div id="myCarousel" class="carousel slide" data-ride="carousel">

            <!-- Indicators -->
            <ul class="carousel-indicators">
                <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                <li data-target="#myCarousel" data-slide-to="1"></li>
                <li data-target="#myCarousel" data-slide-to="2"></li>
                <li data-target="#myCarousel" data-slide-to="3"></li>
                <li data-target="#myCarousel" data-slide-to="4"></li>


            </ul>

            <!-- The slideshow -->
            <div class="carousel-inner">
                <div class="carousel-item active">
                    <img src="https://firebasestorage.googleapis.com/v0/b/techlligent-2020.appspot.com/o/gallery%2FNIRF_Ranking.jpg?alt=media&token=5209d954-9b87-4c17-8c07-aa5af13ca13a"
                         alt="Los Angeles" width="100%" height="100%">
                </div>
                <div class="carousel-item">
                    <img src="https://firebasestorage.googleapis.com/v0/b/techlligent-2020.appspot.com/o/gallery%2FDataQuest_Survey.jpg?alt=media&token=4a1aca2a-33ea-4bd2-8f11-b33641c0427b"
                         alt="Los Angeles" width="100%" height="100%">
                </div>
                <div class="carousel-item">
                    <img src="https://firebasestorage.googleapis.com/v0/b/techlligent-2020.appspot.com/o/gallery%2FIndia_Today%20Survey.jpg?alt=media&token=108ede4c-d2bf-449a-95bc-ad574baf5f9b"
                         alt="Los Angeles" width="100%" height="100%">
                </div>
                <div class="carousel-item">
                    <img src="https://firebasestorage.googleapis.com/v0/b/techlligent-2020.appspot.com/o/gallery%2FSwachhta_Ranking_Awards.jpg?alt=media&token=6846c5c3-8180-42da-92b9-830469cea412"
                         alt="Los Angeles" width="100%" height="100%">
                </div>
                <div class="carousel-item">
                    <img src="https://firebasestorage.googleapis.com/v0/b/techlligent-2020.appspot.com/o/gallery%2FTimes_Engineering_Survey.jpg?alt=media&token=3ce8d85b-d51d-432e-b766-b54e0f5a40fd"
                         alt="Los Angeles" width="100%" height="100%">
                </div>
            </div>

            <!-- Left and right controls -->
            <a class="carousel-control-prev" href="#myCarousel" data-slide="prev">
                <span class="carousel-control-prev-icon"></span>
            </a>
            <a class="carousel-control-next" href="#myCarousel" data-slide="next">
                <span class="carousel-control-next-icon"></span>
            </a>
        </div>

    </v-container>
    
    <!-- CSS-->
    <style>
    /* Make the image fully responsive */
    .carousel-inner img {
        width: 100%;
        height: 100%;
    }
</style>