Widget:Carousel

<style> .item img {

 width: 100%;
 height: auto

}

.carousel {

 position: relative;
 width: 500px;
 height: 200px;

}

ol.carousel-indicators {

 position: absolute;
 bottom: 0;
 margin: 0;
 left: 0;
 right: 0;
 width: auto;

}

ol.carousel-indicators li, ol.carousel-indicators li.active {

 float: left;
 width: 33%;
 height: 10px;
 margin: 0;
 border-radius: 0;
 border: 0;
 background: transparent;

}

ol.carousel-indicators li.active {

 background: yellow;

} </style>

     <img src="http://placehold.it/500x200" alt="Slide 1">

       Slide 1

     <img src="http://placehold.it/500x200" alt="Slide 2">

       Slide 2

     <img src="http://placehold.it/500x200" alt="Slide 3">

       Slide 3

 <a class="left carousel-control" href="#carousel" role="button" data-slide="prev">
   
   Previous
 </a>
 <a class="right carousel-control" href="#carousel" role="button" data-slide="next">
   
   Next
 </a>