Membuat Slider Responsive dengan Bootstrap


Membuat Carousel atau Slider Dengan bootstrap sungguh mudah, karena  bootstrapsudah menyediakan nya dari awal, dan kita hanya  tinggal memanggilnya saja.. Slideshow atau Slider biyasanya dibuat untuk animasi pada artikel atau beita pada website, atau hanya sekedar untuk menampilkan banner website. Anda pasti sering menjumpai Carousel seperti ini pada website-website berita , atau website pemerintahan..

Pada tutorial kali ini saya akan mengajarkan bagaimana caranya menggunakan Carousel yang terdapat pada Bootstrap. Carousel bisa kita sebut juga slider yang terdapat didalam Bootstrap, slider tersebut sudah mempunyai sifat Responsive dan Fleksibel.

Berikut adalah contoh penggunaan Carousel yang terdapat pada Bootstrap.

Download

1. Carousel Dengan Caption Text :

Carausel Slider Bootstrap

CODE :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Example of Bootstrap 3 Carousel</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<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>
<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: 280px;
    width:100%;
}
.bs-example{
    margin: 20px;
}
</style>
</head>
<body>
<div class="bs-example">
<div class='col-md-6'>
<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="images/slide1.jpg" alt="First Slide">
                  <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="images/slide2.jpg" alt="Second Slide">
                <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">
                <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>
</body></html>  
Iklan

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s