Carousel HTML

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta name="viewport" content="initial-scale=1">
        <link rel="stylesheet" href="Content/metro.min.css">
        <link rel="stylesheet" href="Content/metro-icons.min.css">
        <link href="Content/metro-responsive.css" rel="stylesheet">
        <link href="Content/metro-schemes.css" rel="stylesheet">
        <script src="Scripts/jquery-3.1.1.min.js"></script>
        <script src="Scripts/MutationObserver.js"></script>
        <script src="Scripts/metro.js"></script>
        <script src="Scripts/angular/angular.min.js"></script>
        <script src="Scripts/moment.min.js"></script>
        <script src="//maps.googleapis.com/maps/api/js?sensor=false"></script>
        <title>Pivot Control</title>
    </head>
    <body>
        <div>
            <div>
                <div id="section-indexes" data-text="headings" class="padding20 bg-grayLighter align-left">
                    <span class="pivot" style="font-size:x-large; margin-right:40px;cursor:pointer;" data-index="1">Item 1</span>
                    <span class="pivot sub-leader" style="margin-right:40px;cursor:pointer;" data-index="2">Item 2</span>
                    <span class="pivot sub-leader small" style="margin-right:40px;cursor:pointer;" data-index="3">Item 3</span>
                    <span class="pivot sub-leader small" style="margin-right:40px;cursor:pointer;" data-index="4">Item 4</span>
                </div>
                <div id="section" class="carousel" data-role="carousel" data-height="200" data-controls="false" data-markers="false" data-auto="false">
                    <div class="slide">Hello I am Item 1</div>
                    <div class="slide">Hello I am Item 2</div>
                    <div class="slide">Hello I am Item 3</div>
                    <div class="slide">Hello I am Item 4</div>
                </div>
                <script>
                    $(function () {
                        var car_m_2 = $('#section').data('carousel');
                        var thumbs = $('#section-indexes > .pivot');
                        $.each(thumbs, function () {
                            var thumb = $(this), index = thumb.data('index') - 1;
                            thumb.on('click', function () {
                                car_m_2.slideTo(index);
                            });
                        });
                    });
                </script>
            </div>
        </div>
    </body>
</html>