Slide Banner Caraosel
CARA PENEMPATAN KODE UNTUK SLIDE BANNER LINKMAG 290-
1.
Taruh diatas
<head>
<title>Example of Bootstrap 3 Carousel</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"></link>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
2.
Taruh dibawah
<body> atau header..(saya saya sarankan diatas body..kadang mempengaruhi
yang lainnya.. main id='wrapper
<style type="text/css">
.carousel{
background: #2f4357;
margin-top: 20px;
}
.carousel .item{
min-height: 280px; /* Prevent carousel from being distorted if for some reason image doesn't load */
}
.carousel .item img{
margin: 0 auto; /* Align slide image horizontally center */
max-height: 300px;
width:100%;
}
.bs-example{
margin: 9000 px;
}
</style>
<div class="bs-example">
<div class='col-md-15'>
<div align='center'><h2>Carousel Bootstrap Suckittrees.Com</h2></div>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Carousel 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>
<!-- Wrapper for carousel items -->
<div class="carousel-inner">
<div class="item active">
<img src="https://blogger.googleusercontent.com/img/a/AVvXsEgWZq6v94EqQGof4yXE3OEZU6uaje8qbPdqfrjx-ZBNSrl7rNO28WHFGceVcCqWjgYWk10tAKV-IQ4zFc0Gko4uJ7T9AzXjr406a7hhbKxM0t7rU4CxH4eceZiAq07uA44bxpxlwM0dDhyqfp3ZHVoPKuw_7A5lC7XCbYMNmilQk_gqhGLIelpACxYS=w400-h195" width="400" alt="First Slide"></img>
<div class="carousel-caption">
<h3>First slide label</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div class="item">
<img src="https://blogger.googleusercontent.com/img/a/AVvXsEiOkky1yxEZXcFPzakeQEDsCtNO9xsyTC47qsxmthCobY5meE0prA9KoOCe6_MwFuxFm-xN2P1Mj4E9roH2jJJPa3hTq6uUzfuwD8T47mUNBbiKtRfDxLWvW7FRdJbI3Dh52Ui91aBWFahTEwPmc-2_4Spozva88xkPbERDn9n6hMbfAheMk4vgk69x=s400" alt="Second Slide"></img>
<div class="carousel-caption">
<h3>Second slide label</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div class="item">
<img src="images/slide3.jpg" alt="Third Slide"></img>
<div class="carousel-caption">
<h3>Third slide label</h3>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
</div>
</div>
</div>
<!-- Carousel controls -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
</div>
Posting Komentar untuk "Slide Banner Caraosel"