Widodo

Panduan Membuat Landing Page Dengan Bootstrap 3 - Materi 2 Membuat Slider

Membuat Slider Bootstrap

Halo teman-teman kembali lagi bersama s-widodo.com dalam materi yang ke 2 ini kita akan bersama-sama membuat slider bootstrap di website kita (Landing Page Website), Sebelum kita masuk ke materi saya jelaskan sedikit tentang fungsi slider.

Apa Itu Slider Website?

Slider merupakan informasi yang berjalan (sliding) di website anda. Dengan informasi singkat dan jelas akan memudahkan calon customer untuk memahami produk atau layanan yang Anda tawarkan dalam waktu yang relatif singkat. Slider yang di design dengan baik akan meningkatkan kepercayaan calon customer dan membuat website anda terlihat lebih profesional.

Itulah sedikit penjelaskan fungsi slider pada website, sekarang kita langsung ke materi 2 (Membuat Slider dengan Bootstrap 3).

 

Siapkan Project Anda

Buat yang kemarin sudah mengkuti materi pertama yaitu membuat dan custom menu bootstrap sekarang kalian buke kembali projectnya, sekrang buka file index.html kalian masing masing.

Setelah itu buka website Bootstrap, silahkan ke menu Javascript dan kalian pilih  Carousel sample dari struktur kode slider adalah sebaga berikut:

<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>

Sekarang teman-teman copy dan simpan di bawah menu pada file index.html kalian.

Siapkan Design Slider Anda

Sekarang teman-teman harus menyiapkan design slider promosi, teman-teman bisa mendesign menggunakan Adoble Photoshop,Corel Daw Maupun yang online. didalam contoh ini saya menggunakan ukuran Lebar : 1900 dan TInggi 840 pixel silahkan simpan  folder img dalam poject Anda dengan nama slider.jpg

Jika kita sudah selesai menyiapkan Design Slidernya sekarang teman-teman panggil gambarnya dengan cara ganti code <img src="..." alt="..."> menjadi <img src="img/slider.jpg" alt="Slider 1"> untuk lebih lengkapnya akan seperti ini:

<!-- Slider Bootstrap 3 -->
<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>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="img/slider.jpg" alt="Slider 1">
    </div>
    <div class="item">
      <img src="img/slider.jpg" alt="Slider 2">
    </div>
  </div>

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

 

Sekian panduan membuat landing page materi 2, untuk tutorial selanjutnya kita akan membahas membuat konten layanan menggunakan grid bootstrap, Semoga panduan ini bermanfaat bagi teman-teman yang masih pemula untuk membuat landing page jangan lupa share ya.

#NgodingYuk



0 Komentar


Copyright © 2015 S-widodo.com Digital marketing