How to Create Full width Carousel bootstrap Slider
Creating Full width Carousel bootstrap Slider is very simple one.
Just follow my steps for this work.
Step 1:
bootstrap CSS and JS must link in that page, Download the files in Bootstrap website.
Once download complete, like the files in below coding.
<link rel="stylesheet" href="css/bootstrap.min.css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
this lines are write between <head> tag only. Script tag will be write on the bottom if now working on top.
Step 2:
After the Step 1, between <body> tag copy the below coding and paste it.
<!-- Full width Carousel--->
<div id="myCarousel" class="carousel slide">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li class="" data-target="#myCarousel" data-slide-to="1"></li>
<li class="" data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img class="" src="images/bg-img1.jpg">
<div class="container">
<div class="carousel-caption">
<h2 class="">Sahin Architectural Design</h2>
<p class="">Optional</p>
</div>
</div>
</div>
<div style="" class="item">
<img class="" src="images/Interior-Design1.jpg">
<div class="container">
<div class="carousel-caption">
<h2 class="">Sahin Interior Design</h2>
<p></p>
</div>
</div>
</div>
<div style="" class="item">
<img class="" src="images/Interior-Design2.jpg">
<div class="container">
<div class="carousel-caption">
<h2 class="">Interior Design</h2>
<p class=""></p>
</div>
</div>
</div>
</div>
<!-- /.carousel-inner -->
<div class="logo">Sahin Wings <span class="sub-head">- India , by Wings Developers</span></div>
<!-- Controls --> <a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
<!-- /.carousel -->
Step 3:
Just save it as .html (Ex. Slider.html), and run it in a browser. U got the design now
Step 4:
If you want to change the styles, then copy and paste below styles,
/*Styles for slider */
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
z-index: 10;
}
/* Declare heights because of positioning of img element */
#myCarousel .item {
height: 600px;
background-color:#bbb;
}
#myCarousel img {
position: absolute;
top: 0;
left: 0;
min-width: 100%;
height: 600px;
}
If any errors, please comments below. Thank you.
0 comments: