SLIDE BANNER BOSTRAP

  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"></link>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

 

 

 

 

<style type="text/css">

.carousel{

    background: #2f4357;

    margin-top: 20px;

}

.carousel .item{

    min-height: 280px; /* Prevent carousel from being distorted if for some reason image doesn't load */

}

.carousel .item img{

    margin: 0 auto; /* Align slide image horizontally center */

    max-height: 300px;

    width:100%;

}

.bs-example{

    margin: 9000 px;

}

</style>

 

 

<div class="bs-example">

<div class="col-md-15">

<div align="center"><h2>Carousel Bootstrap Suckittrees.Com</h2></div>

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

        <!--Carousel indicators-->

        <ol class="carousel-indicators">

            <li class="active" data-slide-to="0" data-target="#myCarousel"></li>

            <li data-slide-to="1" data-target="#myCarousel"></li>

            <li data-slide-to="2" data-target="#myCarousel"></li>

        </ol>  

        <!--Wrapper for carousel items-->

        <div class="carousel-inner">

            <div class="item active">

                <img alt="First Slide" src="https://blogger.googleusercontent.com/img/a/AVvXsEi3zc_sJsyNmBHOAGcGZJQKI5owNVfpA4d24Ueprt3mY-uEgkgLRs1wl_CvOV2b2CL6ZnHGxqXfFVLbWc6poqG3rCMoqfcKu3SfAGLTHNHUcugdzscTkYiZmCm-5TRuYfHHJNOrEWsdwPoxGUkkEaFn9iuq1JbXoaaIYcUZjSz6JihiUsvcbwpRTKojGg=w640-h203" width="640" />

                  <div class="carousel-caption">

                  <h3>First slide label</h3>

                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

                </div>

            </div>

            <div class="item">

                <img a="" avvxsehf5qbo4cocxxtgloo3ezvim6n0oqjecx5b7jxlxgmrfifu7dwscdl66hsfiikgyf_i5kth8pmdldc0qbpxnc20ud871vyawdtb_253ptyxymcccfo1ocwik_hl1rdzxwpg_j8skco427iqkg1rykgcfz6ywr6wxtowci9mako9e9hvislimgnzjqbctw="s1170&quot;" blogger.googleusercontent.com="" https:="" img="" src="" style="margin-left: 1em; margin-right: 1em;" /><img alt="Second Slide" border="0" data-original-height="372" data-original-width="1170" height="204" src="https://blogger.googleusercontent.com/img/a/AVvXsEhF5QBO4COcxXTgloO3ezVim6n0oQJecX5b7jXlxgMrfiFU7DWScDl66HsFIiKGYf_i5Kth8PmdldC0qBPxNc20uD871vYAwDtB_253PTYXymcCcFO1ocwIK_hl1rDzxWPg_j8SKCo427IqKg1RykGcFz6yWr6WXTowcI9maKO9e9HvISLIMGNZjqbCTw=w640-h204" width="640" />

                <div class="carousel-caption">

                  <h3>Second slide label</h3>

                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

                </div>

            </div>

              <div class="item">

                <img alt="Third Slide" src="https://blogger.googleusercontent.com/img/a/AVvXsEhWz7kEA0CySKbrUfxBYZKfwiU8EEEDJYqSJpsK5aZJjSGy4n2_Nxyz07Xso08WUwq3HKysuC_T2YQIP_n1Crp3_P1cdHk2uGbG90KxuRA8h6VLLL3jZ2ml7BcYN720nrvpIJVT7bqFfwv5mnI3DTzWLbAd-3Hzmvv-8zrO1ob1ijrcSkZXgU3OP-aybw=w640-h204" width="640" />

                <div class="carousel-caption">

                  <h3>Third slide label</h3>

                  <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>

                </div>

            </div>

        </div>

        <!--Carousel controls-->

        <a class="carousel-control left" data-slide="prev" href="#myCarousel">

            <span class="glyphicon glyphicon-chevron-left"></span>

        </a>

        <a class="carousel-control right" data-slide="next" href="#myCarousel">

            <span class="glyphicon glyphicon-chevron-right"></span>

        </a>

    </div>

</div>

</div>