Assalaikum wr wb
Apa kabar teman sekalian, kali ini kita akan membahas tentang bagaimana cara membuat Slider Bar menggunakan Bootstrap 4 yang telah disediakan. Seperti yang kalian ketahui bahwa Bootstrap 4 menyediakan beberapa fitur css yang sudah ada dan juga responsive pada smartphone, jadi kita mudah dalam pembuatan template website. Slider Bar adalah sebuah gambar yang bergerak yang berisi informasi slider bar memiliki gambar bergerak dari horizontal dan ada juga yang vertikal.
Kali ini kita akan membahas Bagaimana cara membuat Slider Bar, Slider Bar berfungsi memberi informasi dari gambar yang banyak didalam satu slide, Slider Bar dari nama bisa kita ketahui bahwa slider bar adalah sebuah fitur yang ada pada HTML 5 dan css. Pada bootstrap 4 disediakan fitur Slider bar kalau istilah Bootsrap 4 adalah carousel slide.
Jika kita membuat Slider Bar menggunakan koding css tersendiri itu agak memakan waktu. Oleh karena itu terciptalah sebuah framework font-end dimana bootstrap telah merancang sebuah koding css yang sudah responsive dan juga umum, hanya tinggal kita modif sedikit sesuai dengan selera untuk membuat sebuah template website yang keren, contoh Slider Bar yang saya buat klik gambar dibawah ini.
 |
| Mode Full |
 |
| Mode SmartPhone |
Ok langsung saja kita masuk kepembahasan tentang Bagaimana cara membuat Slider Bar menggunakan bootstrap 4. Liat langkah dibawah ini bagaimana cara Bagaimana cara membuat Slider Bar menggunakan bootrtrap 4.
- Pertama seperti tutorial sebelumnya Bagaimana cara membuat template Bootstrap 4 sendiri - Part 1 Instalasi Bootstrap kalian harus menyiapkan bahannya. Bagi teman yang belum mengikuti langkah awal silakan klik artikel ini Bagaimana cara membuat template Bootstrap 4 sendiri - Part 1 Instalasi Bootstrap.
- Langkah kedua silakan download koding yang kemarin yang membahas CARA MEMBUAT TEMPLATE BOOTSTRAP 4 SENDIRI - PART 2 NAV BAR, dibawah adalah koding Nav Bar tutorial sebelumnya silakan dicopy jika belum punya.
- Setelah itu masukan koding ini kita masukan koding Slider Bar dibawah atribut <body> seperti contoh koding dibawah ini,
- Setalah itu simpan files didalam folder yang dibuat dengan format namafile.html, kemudian jalankan file tersebut lihat hasilnya.
Ada beberapa koding yang disini akan saya jelaskan, terdapat beberapa class dari slider bar ini yang nantinya saya akan paparkan.
Pertama bagian <div class="jumbotron jumbotron-fluid"> yang ditutup dengan </div> sebuah class bootrtrap 4 yang berfungsi untuk tampilan yang luas sudut pandang sehingga produk yang dipasarkan terlihat jelas, bahkah dia akan menyesuaikan ukuran ketika diisi konten tanpa harus mengatur height, setiap spasi didalam class itu artinya memiliki beberapa koding css yang disesuaikan kebutuhan, jika kita lihat ada jumbotron-fluid itu artinya fluid membuat full lebar yang ada.
Sekian dari saya jika ada kata-kata yang salah saya mohon maaf saya akhir wasssalamulaikum wr wb, terimakasih
Comments
Post a Comment