1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<!DOCTYPE html>
<html>
    <head>
        <title>Bootstrap features</title>
        <link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen" />
        <style>
            html {
                height: 100%;
            }

            body {
                height: 100%;
            }

            .carousel-size {
                width:100%;
                height:100%;
                background-color: #3cb9c6;
                border: 1px solid #32a1ac;
            }
            #carousel-inner-width
            {
                width:100%;
                height:100%;
            }

        </style>
    </head>
    <body>   
        <script src="http://code.jquery.com/jquery.js"></script>
        <script src="../bootstrap/js/bootstrap.min.js"></script>    
        <!-- Carousel:  -->            

        <div id="myCarousel" class="carousel carousel slide carousel-size">
            <div class="carousel-inner" id="carousel-inner-width">

                <div class="item active carousel-size"> <h1>TEST1</h1> </div>
                <div class="item  carousel-size"> <h2>TEST2</h3> </div>                            
                <div class="item  carousel-size"> 
                    <iframe width="100%" height="100%" src="http://www.youtube.com/embed/6J2X9ABTPyQ?rel=0&autoplay=1&showinfo=0&controls=0" autoplay="1" showinfo="0" control="0" frameborder="0" allowfullscreen autoplay="1"></iframe>   
                </div>
                <div class="item  carousel-size">  
                    <div>
                        <iframe width="100%" height="100%" src="http://www.google.com"> </iframe>    
                    </div>
                </div>
                <a class="carousel-control left" href="#myCarousel" data-slide="prev"> &lsaquo; </a> <!-- < sign in unicode -->
                <a class="carousel-control right" href="#myCarousel" data-slide="next"> &rsaquo; </a> <!-- > sign in unicode -->
            </div>
        </div>    
        <script type="text/javascript">
            $(document).ready(function()
            {
                $('.carousel').carousel(
                        {
                            interval: 3000,
                        }
                );
            }
            );
        </script>





    </body>
</html>