"image slider-6"
Bootstrap 3.3.0 Snippet by ASDAFF

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div id="myCarousel" class="carousel slide"> <div class="carousel-inner"> <article class="item active"> <img src="http://placehold.it/1200x440/4466e4/ffffff"> <div class="carousel-caption"> <h3>Headline</h3> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p> <p><a class="btn btn-info btn-sm">Read More</a></p> </div> </article> <article class="item"> <img src="http://placehold.it/1200x440/00cc00/cccccc"> <div class="carousel-caption"> <h3>Headline</h3> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p> <p><a class="btn btn-info btn-sm">Read More</a></p> </div> </article> <article class="item"> <img src="http://placehold.it/1200x440/dddddd/333333"> <div class="carousel-caption"> <h3>Headline</h3> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p> <p><a class="btn btn-info btn-sm">Read More</a></p> </div> </article> </div> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0" class="active"></li> <li data-target="#myCarousel" data-slide-to="1"></li> <li data-target="#myCarousel" data-slide-to="2"></li> </ol> <!-- Controls --> <div class="carousel-controls"> <a class="carousel-control left" href="#myCarousel" data-slide="prev"> <span class="glyphicon glyphicon-backward"></span> </a> <a class="carousel-control right" href="#myCarousel" data-slide="next"> <span class="glyphicon glyphicon-forward"></span> </a> </div> </div> </div>
.carousel-control.left, .carousel-control.right { background-image:none !important; } .carousel-inner .item img { width:100%; height:100%; } .carousel-indicators { bottom:5px; left:10px; width:auto; padding:5px 25px 5px 25px; margin-left:0; background:rgba(0,0,0,0.7); } .carousel-indicators li { border-radius:0; width:8px; height:8px; background:#fff; } .carousel-indicators .active { width:10px; height:10px; background:#39b3d7; border-color:#39b3d7; } .carousel-control { background: transparent; color:#fff; padding: 4px 0; width:26px; top:auto; left:auto; bottom:12px; opacity:0.85; } .carousel-control :hover { padding:4px; background:rgba(0,0,0,0.35); } .carousel-control.right { right:10px; } .carousel-control.left { right: 46px; } .carousel-caption { top:auto; width:auto; right:auto; bottom:60px; left:10px; padding:20px; background:rgba(0,0,0,0.70); text-align:left; height:auto; max-width:50%; }
$('#myCarousel').carousel({ interval: 4000 });

Related: See More


Questions / Comments: