Cara menggunakan carousel bootstrap

Carousel atau biasa sering kita kenal dengan slideshow merupakan proses untuk menampilkan gambar yang diberikan efek slideshow, sehingga gambar yang tampilan akan secara otomatis bergantian, slideshow salah satu komponen yang banyak digunakan pada website saat ini serta memiliki peran penting pada sebuah website.

Carousel atau slideshow ini biasa diletakan pada halaman depan, dengan menampilkan desain yang menarik ataupun berbagai promo sehingga menarik perhatian pengunjung website.

Untuk membuat slideshow secara manual agak sulit, maka dari itu cara mudah membuat slider adalah dengan bantuan Bootstrap, disini saya menggunakan Boostrap versi 3.4, ok langsung saja kita masuk di tutorial.

Pertama kita buat folder untuk menyimpan gambar yang akan kita tampilkan pada slider, disini gambar saya masukan pada folder img, kemudian sediakan beberapa gambar yang akan kita tampilkan pada slider masukan pada folder img, kemudian buat file index.html masukan kode berikut :

index.html

  
  
    






  
  

    

    

    

    
  

  
  

    

      

      

        Selamat datang di blog ilmuweb.net
      
    
    

      

      

        Membahas berbagai tutorial tentang pemprograman website
      
    
     

      

      

        Belajar PHP, Bootstrap, MySql
      
    
    
  

  
  
    
    Previous
  
  
    
    Next
  




 
    
    
    
    

Dari koding diatas saya memasukan tiga buah gambar dengan efek slideshow, kemudian masukan nama file beserta ekstensi gambar, dan ukuran gambar yang sama agar gambar rapi, apabila gambar dengan ukuran berbeda maka gambar slideshow akan berubah dari gambar satu ke gambar lainya.

letak gambar slide saya taruh pada folder img.

Untuk menambah keterangan slider masukan pada tag berikut :

 

        Membahas berbagai tutorial tentang pemprograman website
  

Pada script ini Carousel kita set posisi tengah dengan menggunakan 8 grid, disini teman-teman tinggal disesuaikan dengan kebutuhan tinggal rubah ukuran grid sistem sesuai kebutuhan :

Untuk memahami grid system pada bootstrap teman-teman bisa mengunjungi tutorial sebelumnya pada blog ini tentang sistem grid pada bootstrap

Koding hasil tampilan corousel/slideshow yang kita buat ini sekaligus dengan boostrapnya dan javascript librari teman-teman bisa Download file.

Terimakasih telah membaca sampai akhir tulisan, sekian tutorial Cara Membuat Carousel/Slideshow dengan Bootstrap, semoga bermanfaat, salam sukses penuh keberkahan 🙂