Membuat Tampilan Halaman News Slide Dengan Bootstrap Carousel

Hallo teman-teman DUMET School, pada tutorial kali ini kita akan coba membuat tampilan News Slide menggunakan Bootstrap Carousel. Carousel di dalam sebuah website berfungsi untuk membuat efek slider pada elemen HTML. Di dalam Bootstrap efek Carousel sudah tersedia, sehingga kita tinggal menggunakan nya saja. Nah kali ini kita akan coba membuat halaman news dengan menggunakan efek slide carousel yang ada di Bootstrap. Baik kita akan coba langsung membuatnya saja ya teman-teman.

Pertama-tama hal yang perlu kalian siapkan adalah kalian download terlebih dahulu file Bootstrap nya seperti CSS dan jQuerynya. Setelah kalian download maka kalian akan memiliki struktur folder Bootstrap nya seperti gambar di bawah ini.

Selanjutnya kalian bisa buka website Bootstrap dan kalian pergi ke menu Getting Started, copy seluruh baris program HTML pada bagian Basic Template dan paste kan baris program tersebut di dalam file index.html kalian.

Kemudian kalian bisa buat struktur HTML nya seperti berikut ini.

Untuk CSS tambahannya kalian bisa copy code di bawah ini.

Dan Script untuk jQuery nya seperti gambar di bawah ini.

Maka jika kalian jalankan hasilnya akan seperti gambar di bawah ini.

Nah buat teman-teman yang ingin mendownload keseluruhan baris program di atas, teman-teman bisa mendownloadnya di Button Download di bawah ini. Sekian dulu tutorial dari saya semoga tutorial ini bermanfaat ya untuk teman-teman. Terima Kasih.

Demo | Download