contact
WA: 0822-8846-7823
SMS: 0822-8846-7823
Call: 0822-8846-7823
BBM: D7DB3491
ebsofmail@gmail.com

Membuat Carousel atau Slider dengan Bootstrap

Posted in Tutorial Bootstrap Life at 08 September 2017 With 0 Comments

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 :

carousels slider bootstrap

▼ Download Source Code Dibawah Ini ▼


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> 

2. Carousel Tanpa Caption Text :

membuat Carousel 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>
            <div class="item">
                <img src="images/slide2.jpg" alt="Second Slide">
            </div>
              <div class="item">
                <img src="images/slide3.jpg" alt="Third Slide">
            </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>                           
                         

Artikel Rekomendasi



Artikel Terkait

Diskusi