Pusat Ilmu Secara Detil

Tutorial Bootstrap: Membuat List Slider

Tutorial Bootstrap: Membuat List Slider

Belajar Bootstrap
Tutorial pada edisi ini masih membahas seputaran tentang image slider. Mengapa masih membahas tentang topik tersebut. Karena ada banyak sekali model-model dari image slider. (On this bootstrap tutorial, we are still discussing about image slider.  Why we are still discuss about it. Because there is many technic and model in making image slider ).

Bagi anda yang ingin membaca topik pembahasan seputaran image slider sebelumnya, silahkan lihat ( If you want to read of bootstrap tutorial earlier, you can find it on) :


  • Bootstrap carousel multicolumn
  • Carousel Headline news where data retrieved from database
  • Simple Bootstrap Slider
  • Static Image Slider (using coin slider)

  • Pernahkan anda melihat sebuah website berita yang menyajikan berita dalam bentuk list. Bingung maksudnya atau susah membayangkannya. Silahkan lihat live demo dibawah (Have you ever seen a news website which serve a news in a list. You're confuse what i mean or it is difficult to imagine it. Please see this live demo below)

    Live Demo : List Slider

    Tentunya anda sudah memahami maksud kalimat saya diatas. Pada bootstrap agak sedikit sulit membuat jenis image slider tersebut. Untuk itu, kita akan menggunakan bantuan librari javascript Jssor. (Surely you've understood what my sentence above. On the bootstrap, it is a little bit difficult to make such image slider[list slider]. As a result, we will use javascript libary Jssor.)

    Kita dapat memasukkan libarry javascript Jssor pada Bootstrap. Disini saya tidak akan menulis scriptnya karena terlalu panjang. Tapi jangan khawatir, anda dapat mendownload source codenya secara lengkap termasuk libari Jssor pada akhir artikel. Outputnya dapat anda lihat seperti gambar berikut (We can insert libary javascript Jssor into Bootstrap. Here, i will not write the source code as it's too long. But, don't worry, you can download all source code include libary Jssor at the end of this article. The output can be seen as shown in figure below):



    Live Demo : List Slider
    Source code tersedia pada (Source code available on):



    Share this:

    You Might Also Like:

    Disqus Comments