Widget:Carousel

<style> .carousel .carousel-inner .item img {

   width: 100%;

} .carousel .carousel-indicators li {

   border-color: rgba(255, 255, 255, 1);
   background: rgba(255, 255, 255, 0.0);

} .carousel .carousel-indicators li:hover {

   border-color: rgba(255, 255, 255, 1);
   background: rgba(255, 255, 255, 0.0);

} .carousel .carousel-indicators li.active {

   border-color: rgba(255, 255, 255, 1);
   background: rgba(255, 255, 255, 1);

} .carousel .carousel-indicators {

   width: inherit;
   margin: 0;
   left: initial;
   right: 10px;
   bottom: initial;
   top: 10px;
   z-index: 100;

} .carousel .carousel-caption {

   color: rgba(255, 255, 255, 1);
   font-size: 14px;
   font-weight: 400;
   text-align: center;
   display: block;
   z-index: 0;

} .carousel-control {

   opacity: 1;
   color: rgba(255, 255, 255, 0.6);

} .carousel-control:hover, .carousel-control:focus, .carousel-control:active {

   opacity: 1;
   color: rgba(255, 255, 255, 0.95);

} .carousel-control.left {

   background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.25) 0, rgba(0, 0, 0, 0.0001) 100%);
   background: linear-gradient(to right, rgba(0, 0, 0, 0.25) 0, rgba(0, 0, 0, 0.0001) 100%);

} .carousel-control.right {

   background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.0001) 0, rgba(0, 0, 0, 0.25) 100%);
   background: linear-gradient(to right, rgba(0, 0, 0, 0.0001) 0, rgba(0, 0, 0, 0.25) 100%);

} .carousel-control.left:hover, .carousel-control.left:focus, .carousel-control.left:active {

   background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.4) 0, rgba(0, 0, 0, 0.0001) 100%);
   background: linear-gradient(to right, rgba(0, 0, 0, 0.4) 0, rgba(0, 0, 0, 0.0001) 100%);

} .carousel-control.right:hover, .carousel-control.right:focus, .carousel-control.right:active {

   background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.0001) 0, rgba(0, 0, 0, 0.4) 100%);
   background: linear-gradient(to right, rgba(0, 0, 0, 0.0001) 0, rgba(0, 0, 0, 0.4) 100%);

} .carousel .carousel-control span {

   position: absolute;
   top: 50%;
   z-index: 5;
   display: inline-block;
   margin-top: -10px;

} .carousel .carousel-control.left span {

   margin-left: -10px;
   left: 50%;

} .carousel .carousel-control.right span {

   margin-right: -10px;
   right: 50%;

} @media (min-width: 768px) {

   .carousel-control span {
       width: 30px;
       height: 30px;
       margin-top: -10px;
       font-size: 30px;
   }

} .carousel .carousel-control {

   top: 50%;
   width: 30px;
   height: 60px;
   margin-top: -30px;

} .carousel .carousel-control.left {

   border-radius: 0 5px 5px 0;

} .carousel .carousel-control.right {

   border-radius: 5px 0 0 5px;

} .carousel .carousel-control span {

   margin-top: -10px;

} .carousel .carousel-control.left span {

   margin-left: -10px;

} .carousel .carousel-control.right span {

   margin-right: -10px;

} @media (min-width: 768px) {

   .carousel .carousel-control {
       width: 40px;
       height: 80px;
       margin-top: -40px;
   }
   .carousel .carousel-control span {
       margin-top: -14px;
   }
   .carousel .carousel-control.left span {
       margin-left: -14px;
   }
   .carousel .carousel-control.right span {
       margin-right: -14px;
   }

} .carousel .carousel-control {

   top: initial;
   height: 30px;
   border-radius: 0 0 0 0;

} .carousel .carousel-control.left {

   border-radius: 0 5px 0 0;

} .carousel .carousel-control.right {

   border-radius: 5px 0 0 0;

} @media (min-width: 768px) {

   .carousel .carousel-control {
       height: 40px;
   }

} </style>

           <img src="http://bootstrapdesigntools.com/assets/images/1024x400/1.jpg" alt="Lisbon">

The is a new first slide

           <img src="http://bootstrapdesigntools.com/assets/images/1024x400/2.jpg">

The is the second slide

           <img src="http://bootstrapdesigntools.com/assets/images/1024x400/3.jpg">

           <a href="http://google.com" target="_blank" class="carousel-link">
               <img src="/assets/images/1024x400/4.jpg">

Fourth slide

           </a>

           <a href="http://google.com" class="carousel-link">
               <img src="http://bootstrapdesigntools.com/assets/images/1024x400/5.jpg">
           </a>

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

   href="#custom-bootstrap-carousel" role="button" data-slide="next">Next</a>