Caraousel Bootstrap - WebHozz Blog

Oke teman-teman WebHozz kali ini, kita akan mencoba membuat slider, ya kita akan membuat slider tetapi dengan Bootstrap. Oke baiklah teman-teman mari kita coba bersama-sama,…

Baiklah untuk tutorial kali ini kita aka memulai dengan membuat sebuah file misalnya index.html, nah sebelumnya kalian download dulu ya file mentah bootstrapnya, tentunya di homepage nya ya.

<!DOCTYPE html>
<html>
<head lang="en">
    <meta name="viewport" content="widht=device-widht, initial-scale=1">
    <meta charset="UTF-8">
    <title>Layout Javascript Bootstrap</title>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.css">
</head>
<body>

<div class="container">
    <div id="content">
        <div class="row">
            <div class="col-md-8">
                <div class="page-header">
                    <h3>Caraousel</h3>
                </div>
                <div id="carouselku" class="carousel slide" data-ride="carousel">
                    <ol class="carousel-indicators">
                        <li data-target="#carouselku" data-slide="0" class="active"></li>
                        <li data-target="#carouselku" data-slide="1"></li>
                        <li data-target="#carouselku" data-slide="2"></li>
                        <li data-target="#carouselku" data-slide="3"></li>
                    </ol>
                    <div class="carousel-inner" role="listbox">
                        <div class="item active">
                            <img src="image/2012_ducati_streetfighter_848-800x600.jpg" alt="gambar-ku">
                            <div class="carousel-caption">
                                <h3>Ducati Street Fighter</h3>
                                <p>WebHozz WebHozz WebHozz WebHozz WebHozz WebHozz WebHozz WebHozz WebHozz WebHozz WebHozz WebHozz WebHozz WebHozz WebHozz WebHozz WebHozz WebHozz WebHozz WebHozz WebHozz WebHozz WebHozz WebHozz</p>
                            </div>
                        </div>
                        <div class="item">
                            <img src="image/duc1.jpg" alt="gambar-ku">
                            <div class="carousel-caption">
                                <h3>Ducati Panigale</h3>
                                <p>WebHozz WebHozz WebHozz WebHozz WebHozz WebHozz WebHozz WebHozz WebHozz WebHozz WebHozz WebHozz WebHozz WebHozz WebHozz WebHozz WebHozz WebHozz WebHozz WebHozz WebHozz WebHozz WebHozz WebHozz</p>
                            </div>
                        </div>
                        <div class="item">
                            <img src="image/ducati_diavel_2014-800x600.jpg" alt="gambar-ku">
                            <div class="carousel-caption">
                                <h3>Ducati Diavel</h3>
                                <p>WebHozz WebHozz WebHozz WebHozz WebHozz WebHozz WebHozz WebHozz WebHozz WebHozz WebHozz WebHozz WebHozz WebHozz WebHozz WebHozz WebHozz WebHozz WebHozz WebHozz WebHozz WebHozz WebHozz WebHozz</p>
                            </div>
                        </div>
                        <div class="item">
                            <img src="image/ducati_1199_paginale-800x600.jpg" alt="gambar-ku">
                            <div class="carousel-caption">
                                <h3>Ducati Panigale Three Colors</h3>
                                <p>WebHozz WebHozz WebHozz WebHozz WebHozz WebHozz WebHozz WebHozz WebHozz WebHozz WebHozz WebHozz WebHozz WebHozz WebHozz WebHozz WebHozz WebHozz WebHozz WebHozz WebHozz WebHozz WebHozz WebHozz</p>
                            </div>
                        </div>
                        <a class="left carousel-control" href="#carouselku" role="button" data-slide="prev">
                            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                            <span class="sr-only">Previous</span>
                        </a>
                        <a class="right carousel-control" href="#carouselku" role="button" data-slide="next">
                            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                            <span class="sr-only">Next</span>
                        </a>
                    </div>
                </div>
            </div>
    </div><!-- end of content -->
    <div id="footer">
        <div class="row">
            <div class="col-md-12">
                <hr>
                <p align="center">Copyright &copy; 2015 | <span style="color: #4cae4c; font-weight: bold;">WebHozz Kalilamang</span></p>
            </div>
        </div>
    </div><!-- end of footer -->
</div><!-- end of container -->

<!-- javascript -->
<script type="text/javascript" src="../jquery-1.11_2.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>
</body>
</html>

Kuncinya adalah javascriptnya, yang perlu kalian lakukan dengan mendownload file library jQuery dan tentunya bootstrap.js yang sudah include satu paket di hasil download file mentah bootstrap.

Hasilnya akan seperti berikut ini:

Related posts: