Cara Membuat Slider Dengan Bootstrap

Hai, ketemu lagi dengan saya 🙂 apa akabarnya ? semoga baik yah ?

Pada artikel kali ini saya akan menjelaskan bagaimanaÂ Cara Membuat Slider Dengan Bootstrap, bagi kalian yang sudah biasa menggunakan framework bootstrap pasti sudah tau yah bagaimana cara membuat slider bootsrap ? Nah tapi yang masih awam atau yang baru menggunakan bootstrap pasti ada yang belum tau bagaimana cara membuat slider bootstrap, untuk itu saya akan sedikit menjelaskan nya, langsung saja simak langkah-langkah nya berikut.

1. Silahkan siapkan dulu yah file bootstrap dan beberapa buah gambar untuk slidernya, setelah itu ketikan kode berikut slider berikut ini.

<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>
    <div class="item">
      <img src="..." alt="...">
    </div>
    <div class="item">
      <img src="..." alt="...">
    </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>

2. Pada bagian kode img src=”” silahkan masukan gambar yang telah disiapkan.

3. Kalo sudah jangan lupa disimpan, kemudian coba jalankan di browsernya, dan lihat hasilnya. Selesai.

Mudah yah ? Baik sekian artikel mengenaiÂ bagaimanaÂ Cara Membuat Slider Dengan Bootstrap, semoga bermanfaat, amin

Selamat mencoba.

Kategori