Cara membuat Slider Carousel Dengan Bootstrap

Cara membuat Slider Carousel Dengan Bootstrap - Siapa sih yang gk kenal dengan framework yang satu ini pasti semua kalngan developer udah mengenal dia,ya si cantik dan menawan dia adalah bootstrap,salah satu framwwork CSS paling populer di dunia pada saat ini,karena kemudahan dan keunggulan nya banyak developer web memilih alternative untuk memakai framework ini,menurut saya sih bootstrap itu bukan sekedar framework css tapi juga framework javascript,karena kita bisa membuat Modal Box,tooltip,tabs,dropdown,dan masih buanyak lagi...nah setelah sebelumnya saya sudah menyingung Beberapa Framework CSS Selain Bootstrap Dan Kali ini saya akan membagikan tutorial kepada teman-teman semua tentang bagaimana sih cara membuat Slider Carousel Dengan Bootstrap..siapkan terlebih dahulu bahan nya bisa di download di bawah ini
master bootstrap disini
jquery disini

silahkan teman-teman download dan ekstrak file jquery dan dist bootstrap nya dalam folder project anda,,,setelah itu teman teman copy coding di bawah ini sebagai basic template nya

<!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">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>slider by Chandra Hamdani</title>

    <!-- link bootstrap teman-teman -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

  </head>
  <body>
    <!-- mulai -->
   <!-- selesai -->
<!-- link jquery teman-teman -->
    <script src="jquery/1.11.3/jquery.min.js"></script>
    <!-- link bootstrap.js teman-teman-->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

selanjutnya teman-teman copy coding di bawah ini dan paste kan di antara komentar mulai dan selesai

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    <div class="item">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    ...
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" 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="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

See the Pen Slider Carousel With Bootstrap + jquery by chandra (@chandrahamdani) on CodePen.

yang perlu di perhatikan dalam pembuatan slider dengan bootstrap dalah letak link js dan css teman-teman,contoh nya jika teman-teman meletekan file bootstrap.js di atas link jquery naka si slider nya tidak akan bekerja...So Mudah kan,sampai bertemu di artikel selanjutnya

- chandra hamdani -

Chandra Hamdani

Thursday, July 30, 2015

Cara membuat Slider Carousel Dengan Bootstrap

Chandra Hamdani

2 komentar

Chandra Hamdani

Thursday, July 30, 2015

Cara membuat Slider Carousel Dengan Bootstrap

Artikel Terkait

Chandra Hamdani

2 komentar