HackerU_2020_09_30_AngularJS-Task1.html

<!doctype html>
<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.5.2/umd/popper.min.js"></script>
    <script src="https:/maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
    <style>
        /* image will be responsive */
        .carousel-inner img {
            width: 100%;
            height: 100%;
        }

        hr.hr1 {
            height: 5px;
            border: none;
            color: rgb(90, 90, 90);
            background-color: rgb(90, 90, 90);
        }
    </style>
</head>

<body>
    <div ng-app="myApp">
        <div ng-controller="mainCtrl">
            <div id="covid" class="carousel slide" data-ride="caousel">
                <!-- Indicators -->
                <ul class="carousel-indicators">
                    <li class="" ng-class="{active:!$index}" ng-repeat="image in images" data-target="#covid"
                        data-slide-to="$index"></li>
                </ul>

                <!-- image slide show -->
                <div class="carousel-item" ng-class="{active:!$index}" ng-repeat="image in images">
                    <img ng-src="{{image}}" alt="Beware of Covid-19" width="1100" height="500">
                    <div class="carousel-caption">
                        <h2>{{image}}: Beware of Covid-19</h2>
                        <p>the dead will be rised again</p>
                    </div>
                </div>

                <!-- move next and move pervious controls -->
            <!-- move next and move pervious controls -->
            <a class="carousel-control-prev" href="#covid" data-slide="prev">
                <span class="carousel-control-prev-icon"></span>
            </a>
            <a class="carousel-control-next" href="#covid" data-slide="next">
                <span class="carousel-control-next-icon"></span>
            </a>
            </div>
        </div>
    </div>
    <script>
        var myApp = angular.module('myApp', []);
        myApp.controller('mainCtrl', function ($scope) {
            $scope.images = [
                "HackerU_2020_09_30-img01.jpg",
                "HackerU_2020_09_30-img02.jpg",
                "HackerU_2020_09_30-img03.jpg"];
        });
    </script>
</body>

</html>