<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="row">
<div class="clearfix m10"></div>
<!-- SLIDER START-->
<div id="Container_Carousel">
<div class="rows">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" >
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="item active">
<img src="images/1.jpg" alt="First Slide">
</div>
<div class="item">
<img src="images/2.jpg" alt="Second Slide">
</div>
<div class="item">
<img src="images/3.jpg" alt="Third Slide">
</div>
<div class="item">
<img src="images/4.jpg" alt="Fourth Slide">
</div>
<div class="item">
<img src="images/5.jpg" alt="Fifth Slider">
</div>
</div>
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-circle-arrow-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-circle-arrow-right"></span>
</a>
</div>
</div>
</div>
</div>
<!-- SLIDER END-->
</div>
#Container_Carousel .rows .col-xs-12 {
margin: 0;
padding: 0;
}
#Container_Carousel {
margin: 0;
padding: 0;
width: 100%;
max-height: 850px;
}
.item img {
width: 100%;
max-height: 850px;
}
.carousel,
.item,
.active {
height: 100%;
}
.carousel-inner {
height: 100%;
}
.carousel-control.left,
.carousel-control.right {
background-image: none;
}
.glyphicon-circle-arrow-left {
position: absolute;
top: 50%;
font-size: 50px;
opacity: 0.5;
left: 50px;
}
.glyphicon-circle-arrow-right {
position: absolute;
top: 50%;
font-size: 50px;
opacity: 0.5;
right: 50px;
}
.m10 {
margin: 10px auto;
}
Our website is made possible by displaying ads to our visitors.
Please help us continue to provide you with free. So please disabling your ad blocker.