Kita langsung mulai coding. Bisa dilihat dilayar, source code awal kita diambil dari video terakhir. Namun saya sudah menambahkan bagian Testimoni dengan warna latar belakang ungu. Kalau kita lihat ke kode HTML-nya, disini ada section khusus testimoni, yang isinya adalah container dan judul Testimoni. Bagi teman-teman yang ingin mengunduh source code ini bisa melihat deskripsi pada video. Gunakan source code pada folder dengan nama “sebelum”.

Cara menggunakan komponen Carousel bisa kita lihat pada situs dokumentasi Bootstrap. Kita buka tab baru dan kita ketik url getbootstrap.com. Kita pilih bagian Docs. Lalu kita pilih Komponen dan Carousel. Disini ada beberapa contoh cara penggunaan Carousel, dimulai dari yang paling simple.

Kita lihat contoh source codenya. Disini ada 3 tag pertama yang paling penting untuk menggunakan Carousel. Yang pertama adalah tag div dengan kelas carousel dan slide. Tag ini harus diberikan attribute ID yang unik, dan menggunakan attribute data-bs-ride dengan nilai carousel. Tag kedua menggunakan kelas carousel-inner. Dan tag ketiga menggunakan kelas carousel-item. Perhatikan disini bahwa kita bisa memiliki banyak carousel-item, namun hanya ada satu yang aktif, yaitu yang secara default ditampilkan di layar.

Kita kembali ke kode HTML kita. Sekarang kita tambahkan ketiga div sesuai dengan contoh. Kita mulai dari div pertama. Kita tambahkan attribute id dengan nilai carousel-testimoni. Kemudian kita berikan class carousel dan slide. Dan kemudian kita tambahkan lagi attribute data-bs-ride dengan nilai carousel.

Kemudian di dalamnya kita tambahkan div kedua dengan kelas carousel-inner. Dan yang terakhir kita tambahkan lagi div dengan kelas carousel-item dan active. Selanjutnya kita paste konten pertama dari testimoni, yang berupa judul dan gambar.

Kita tambahkan lagi div dengan kelas carousel-item kedua. Namun disini kita tidak perlu menggunakan kelas active ya. Dan kemudian kita paste lagi konten testimoni yang kedua.

Kita simpan dan refresh browser. Sekarang bagian Testimoni kita sudah memiliki 2 konten yang menggunakan komponen carousel, sehingga secara berkala kontennya berganti secara otomatis. Perhatikan disini bahwa apabila kita meletakkan mouse di atas carousel, maka konten sudah tidak berganti lagi.

Tampilan testimoni ini masih kurang begitu enak untuk dilihat ya. Agar testimoni menjadi lebih rapi, ada baiknya kita menggunakan alignment tengah. Kita tambahkan kelas text-center pada div kedua, tepatnya setelah kelas carousel-inner. Dan sekarang testimoni kita berada di bagian tengah layar.

Ada beberapa hal yang bisa kita ganti pada komponen carousel ini. Yang pertama, perhatikan kembali kelas pada div pertama ada yang bernama slide. Kelas slide ini bisa kita hapus. Apa efeknya? Nah, sekarang lihat cara browser mengganti konten testimoni pertama ke testinomi kedua, sudah tidak menggunakan efek slide lagi. Konten berganti secara langsung. Tentunya lebih menarik kalau menggunakan efek slide ya, oleh karena itu kita tambahkan kembali kelas slide.

Kemudian, kita bisa buka kembali bagian dokumentasi Bootstrap. Dan kali ini kita klik navigasi ke bagian Options. Disini ada beberapa opsi yang bisa kita atur untuk komponen Carousel kita. Perhatikan bahwa untuk menambahkan opsi ini, kita mesti menambahkan attribute yang didahului oleh data-bs-, dan setelah itu barulah diikuti oleh nama opsinya.

Sebagai contoh, kita bisa melihat bahwa dalam tag pertama kita terdapat attribute data-bs-ride, yang berarti kita menggunakan opsi ride. Kita lihat pada dokumentasinya bahwa ride mengatur opsi autoplay pada Carousel. Nilai defaultnya adalah false. Namun apabila kita memberikan nilai ‘carausel’ seperti yang tertulis pada kode HTML kita, artinya browser secara otomatis menghidupkan auto play. Kita bisa coba menghapus nilai dari attribute data-bs-ride. Dan artinya sekarang Carausel sudah tidak berubah secara otomatis lagi. Untuk merubah Carausel ke konten berikutnya, kita harus menekan tombol di keyboard, atau menekan tombol di Carausel. Kita kembalikan nilai ride ke ‘carausel’.

Opsi lain yang menarik disini adalah interval. Disini kita bisa mengatur berapa lama waktu browser menampilkan konten Carausel, sebelum secara otomatis menggantinya ke konten berikutnya. Nilai defaultnya adalah 5.000 milidetik, atau 5 detik. Sebagai contoh, kita tambahkan attribute data-bs-interval dengan nilai 1000. Artinya browser mengganti konten Carausel per satu detik.

Yang menariknya lagi, ternyata interval ini bisa kita taruh di dalam kontennya. Sebagai contoh, saya pindahkan attribute data-bs-interval ke konten pertama Carausel. Dan kita lihat hasilnya di browser. Sekarang konten pertama hanya ditampilkan dalam waktu 1 detik, sedangkan konten kedua ditampilkan 5 detik. Jadi dengan cara ini kita bisa mengatur berapa interval dari masing-masing konten.

Kita hapus attribute data-bs-interval. Selanjutnya kita hendak membahas mengenai kelas active yang berada di konten pertama. Kelas active ini menunjukkan konten yang pertama kali ditampilkan oleh browser pada saat menampilkan halaman situs kita. Apabila kelas active ini kita hapus dan kita pindahkan ke konten kedua. Maka pada saat kita melakukan refresh, browser langsung memulai dengan menampilkan konten kedua. Konten yang sedang aktif. Kita kembalikan lagi kelas active ke konten pertama.

Sekarang kita masuk ke bagian terakhir dari video ini. Kita akan belajar mengenai cara menambahkan tombol untuk memindahkan konten Carousel. Kita bisa kembali ke dokumentasi Bootstrap. Dan kita klik ke bagian Example With Controls. Dari contoh disini kita bisa melihat bahwa pada bagian kiri dan kanan Carousel terdapat tombol yang apabila kita klik akan memindahkan konten Carousel ke konten berikutnya, atau ke konten sebelumnya.

Untuk menambahkan kedua tombol ini, kita tinggal copy delapan baris kode HTML yang berupa tag button ini. Perhatikan bahwa kode ini berada setelah tag penutup div carousel-inner. Kita buka kembali kode HTML kita. Dan kita paste setelah tag penutup div carousel-inner. Kita simpan dan refresh browser. Sekarang sudah ada tombol di bagian kiri dan kanan carousel kita, namun tombol ini masih belum bisa berfungsi.

Mengapa? Kita lihat kembali ke dokumentasinya. Perhatikan pada tag button terdapat attritube data-bs-target yang isinya adalah simbol hashtag ditambah dengan nama id dari carousel. Pada contoh disini nama id-nya adalah carouselExampleControls, sedangkan pada kode kita nama id-nya adalah carousel-testimoni. Jadi kita mesti mengganti nilai attribute data-bs-target menjadi #carousel-testimoni. Dan sekarang kita sudah memiliki button yang bisa berfungsi dengan benar.

Sebagai tambahan, apabila kita mencoba untuk mengecilkan ukuran browser. Ada di lebar tertentu yang kita menemukan bahwa konten dari Carousel kita berada tepat diatas tombol Carousel. Mungkin teman-teman ada yang merasa terganggu dengan design seperti ini. Hal ini bisa kita akali dengan cara memberikan padding kiri dan kanan pada kelas carousel-inner.

Kita bisa buka kode style.css. Kita tambahkan kelas carousel-inner. Kita akan melakukan kostumisasi pada kelas ini. Kita tambahkan attribute padding dengan nilai 0 spasi 10%. Artinya kita menambahkan padding sebesar 0 pada bagian atas dan bawahnya, dan padding sebesar 10% pada bagian kiri dan kanannya. Kita simpan dan refresh browser. Dan sekarang bagian konten Carousel kita berada di tengah, sedangkan bagian kiri dan kanannya khusus hanya untuk tombol Carousel saja.

Dengan menggunakan fasilitas tanya jawab, maka Anda bisa bertanya dan akan dijawab langsung oleh instruktur kursus.

Anda belum terdaftar pada kursus ini sehingga tidak bisa mengajukan pertanyaan.