Membuat Website Bootstrap 100% Responsive Part 8 / 10

Slider & Carousel Responsive

0

Cuma mau ngingetin aja nih, buat kamu yang baru lihat postingan ini pastiin udah ikutin tutorial ini dari part-part sebelumnya karena tutorial ini saling terhubung sama lain.

Pada postingan kali ini kita akan membuat bagian Testimonial dibawah bagian Our Service yang sudah selesai dibuat pada part sebelumnya. Testimonial ini biasanya berupa slider yang menampilkan beberapa testimonial pelanggan dan slide secara otomatis. Awalnya pasti harus ada bungkusnya terlebih dahulu untuk membungkus bagian Testimonial ini, langsung saja buat code seperti ini tepat dibagian bawah tag penutup bagian Our Service:

<div class="container testimonial">
  <div class="row">
    <div class="col-xs-12">
    
    </div>
  </div>
</div>
<!-- akhir .testimonial -->

Seperti yang kamu lihat, code diatas menggunakan col-xs-12 yang artinya akan full width ketika dibuka di perangkat kecil dan tingginya otomatis dan didalam col-xs-12 inilah kita akan menampilkan slider Testimonial. Seperti biasa kita menggunakan nama class custom (testimonial) untuk dipanggil di CSS-nya nanti.Langsung aja masukkan kode ini didalamnya:

ads by posciety

<h2 class="text-center">Testimonial</h2>
      <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>
          <li data-target="#carousel-example-generic" data-slide-to="3"></li>
        </ol>

  <!-- Wrapper for slides -->
          <div class="carousel-inner" role="listbox">
            <div class="item active">
              <img src="media/image/bg/bg-testimonial.jpg">
              <div class="carousel-caption">
                <h1 class="hidden-xs"><span class="glyphicon glyphicon-user" aria-hidden="true"></span></h1>
                <h4>Nama Pengguna 1</h4>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type</p>
              </div>
            </div><!-- AKHIR CLASS ITEM -->
            <div class="item">
              <img src="media/image/bg/bg-testimonial.jpg">
              <div class="carousel-caption">
                <h1 class="hidden-xs"><span class="glyphicon glyphicon-user" aria-hidden="true"></span></h1>
                <h4>Nama Pengguna 2</h4>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type</p>
              </div>
            </div><!-- AKHIR CLASS ITEM -->
            <div class="item">
              <img src="media/image/bg/bg-testimonial.jpg">
              <div class="carousel-caption">
                <h1 class="hidden-xs"><span class="glyphicon glyphicon-user" aria-hidden="true"></span></h1>
                <h4>Nama Pengguna 3</h4>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type</p>
              </div>
            </div><!-- AKHIR CLASS ITEM -->
            <div class="item">
              <img src="media/image/bg/bg-testimonial.jpg">
              <div class="carousel-caption">
                <h1 class="hidden-xs"><span class="glyphicon glyphicon-user" aria-hidden="true"></span></h1>
                <h4>Nama Pengguna 4</h4>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type</p>
              </div>
            </div><!-- AKHIR CLASS ITEM -->
          </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">Sebelumnya</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">Selanjutnya</span>
          </a>
      </div>

Tag h2 diatas itu untuk judul seperti biasa pada setiap bagian sebelum-sebelumnya memang diberikan judul, tag ol diatas adalah indikator yang berfungsi untuk menggerakkan slide-slide. Pada Bootstrap kita cukup menambahkan <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">seperti yang diterapkan pada codingan diatas untuk membuat indikator bulat (radio) dibagian bawah slider.

Sedangkan <div class="carousel-inner" role="listbox">adalah list atau daftar slide yang akan digunakan, masing-masing slide dibungkus dengan div class item. Pada tutorial ini saya hanya menampilkan beberapa slide saja untuk mengurangi slide silahkan hapus bagian div class item, tambahkan jika ingin menambah slide.

Dimana saya bisa mengedit isi slide ? Kamu dapat mengatur isi slide di dalam div class item, disini saya menggunakan tag h1 untuk menampilkan icon Bootstrap (glyphicon), menggunakan h4 untuk judul slide, dan tag p untuk deskripsi slide. Kamu dapat menggantinya dengan apa saja sesuai kebutuhan, pastikan tampilannya menarik dan enak dilihat. Semua isi ini disebut slider caption dan berada didalam div class=”carousel-caption”.

Slider ini dibuat untuk menggunakan gambar, dimana letaknya ? Kamu bisa memasukkan gambar sebagai background masing-masing slide pada tag img yang berada diatas <div class="carousel-caption">silahkan ganti dengan gambar yang diinginkan, Tidak tau cara menyisipkan file gambar ? Klik disini untuk melihat tutorialnya. Setelah membaca tutorial tersebut, mungkin kamu mau mengganti background gambar dengan background video. Bisa ? Tentu bisa…

Catatan: Pastikan gambar yang digunakan memiliki ukuran yang sama supaya slide terlihat rapih dan sejajar (tidak berubah-ubah posisi ketika play)

Pada bagian bawah code terdapat tag a controls yang berfungsi sebagai controller slider, biasanya slider memiliki controller dengan tanda panah di samping kanan dan samping kirinya kan ? Nah… Tag a ini juga berfungsi seperti itu, ketika di klik yang kanan akan ke slide berikutnya dan ketika di klik yang kiri akan mengarah ke slide sebelumnya.

Santai… Kita belum atur style-nya di CSS, saat ini tampilannya mungkin masih sedikit berantakan. Saya sudah siapkan CSS untuk HTML diatas, ini dia:

.testimonial {
   margin-bottom: 3%;
}
.testimonial h2 {
   margin-bottom: 3%;
}

Gimana ? Mendingan kan ? CSS ini hanya memberi jarak margin saja supaya tidak terlalu nempel dengan bagian-bagian lain. Save dan lihat hasilnya !

Selesai, kamu sudah bisa membuat slider sendiri menggunakan framework Bootstrap. Silahkan coba juga di perangkat kecil atau perkecil ukuran jendela browsernya untuk melihat tampilan slider ini responsive.

Masih bingung ? Lihat : Video tutorial cara membuat slider & carousel Bootstrap.

Sampai sini dulu untuk part 8, jangan lupa lanjutkan ke part selanjutnya atau lihat lagi part 7.

Selamat mencoba !

Artikel Lainnya
Berikan Komentar

Website ini menggunakan cookie untuk pengalaman yang lebih baik Setuju & Tutup Selengkapnya