Carousel Header

Introduction:

A carousel should be used to display more than one image with in a page, and is usually used as either a header or a banner to break down the sections in a page multiple images can be used but no more than 5 and no less than 3, is the recommendation.


Usage:

This should be used where appropriate but is either recommended for the home page or to create a break in the page.


Carousel Header Component:


 <div id="header">
                    
                    <div class="container">
                          
                          <div id="myCarousel" class="carousel slide">
                            <!-- Indicators -->
                            <ol class="carousel-indicators">
                              <li class="item1 active"></li>
                              <li class="item2"></li>
                              <li class="item3"></li>
                              <li class="item4"></li>
                            </ol>

                            <!-- Wrapper for slides -->
                            <div class="carousel-inner" role="listbox">

                              <div class="item active">
                                <img src="Images/lilly-rum-251068-unsplash.jpg" alt="Chania" width="580" height="345">
                                <div class="carousel-caption">
                                </div>
                              </div>

                              <div class="item">
                                <img src="Images/arnel-hasanovic-375269-unsplash.jpg" alt="Chania" width="580" height="345">
                                <div class="carousel-caption">
                                </div>
                              </div>

                              <div class="item">
                                <img src="Images/mia-baker-322594-unsplash.jpg" alt="Flower" width="580" height="345">
                                <div class="carousel-caption">
                                </div>
                              </div>

                              <div class="item">
                                <img src="Images/sabri-tuzcu-331970-unsplash.jpg" alt="Flower" width="580" height="345">
                                <div class="carousel-caption">
                                </div>
                              </div>

                            </div>

                            <!-- Left and right controls -->
                            <a class="left carousel-control" href="#myCarousel" role="button">
                              <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                              <span class="sr-only">Previous</span>
                            </a>
                            <a class="right carousel-control" href="#myCarousel" role="button">
                              <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                              <span class="sr-only">Next</span>
                            </a>
                          </div>
                        </div>
                
                </div>
                </div> 
 .carousel-inner > .item > img,
                              .carousel-inner > .item > a > img {
                                  width: 100%;
                                  margin: auto;
                              }