Membuat Image Slideshow atau carousel untuk blog

Membuat Image Slideshow atau carousel untuk blog

loading....

Pada tutorial kali ini saya akan membuat tutorial tentang bagaimana cara membuat slideshow di blog. Untuk membuat image slide ini kita akan menggunakan cycle2 jquery plugin.

Image Slideshow / carousel untuk blog

Dalam pembuatan slider di blog ada beberapa langkah yang harus di lakukan, kita mulai saja langkah lankah nya

Mamasukan jquery dan cycle2 plugin beserta css nya

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script src="http://malsup.github.io/jquery.cycle2.js"></script>
<link rel=stylesheet href="http://jquery.malsup.com/cycle2/demo/demo-slideshow.css">

Masukan kode di atas pada bagian tag <head>

Memasukan Kode HTML untuk image slide

<div class="cycle-slideshow" 
    data-cycle-fx=scrollHorz
    data-cycle-timeout=3000
    data-cycle-speed=700
    data-cycle-caption-plugin=caption2
    data-cycle-overlay-fx-sel=">div"
    >
    <div class="cycle-caption"></div>
    <div class="cycle-overlay"></div>

    <a href="https://www.rumahcode.org/51/Mengirimkan-Informasi-Menggunakan-Metode-Jquey-Get-dan-Post"><img src="https://www.rumahcode.org/img/code/kjquery.jpg" data-cycle-title="jquery" data-cycle-desc="Mengirimkan Informasi Menggunakan Metode Jquey Get dan Post"></a>
    <a href="https://www.rumahcode.org/50/Perintah-dasar-Mysql"><img src="https://www.rumahcode.org/img/code/kmysql.jpg" data-cycle-title="Mysql" data-cycle-desc="Perintah dasar Mysql"></a>
    <a href="https://www.rumahcode.org/49/Cara-mengetahui-perbedaan-metode-Post-dan-get"><img src="https://www.rumahcode.org/img/code/kphp.jpg" data-cycle-title="PHP" data-cycle-desc="Cara mengetahui perbedaan metode Post dan get"></a>
    <a href="https://www.rumahcode.org/48/Membuat-Custom-Codeigniter-Error-Page"><img src="https://www.rumahcode.org/img/code/kcodeigniter.jpg" data-cycle-title="Codeigniter 4" data-cycle-desc="Membuat Custom Codeigniter Error Page"></a>
</div>

Kode html di atas adalah sebuah contho slideshow untuk artikel pada blog ini. Jumlah slideshow yang yang tidak ada batasan nya. 

Ada beberapa opsi untuk menampilkan slideshow ini. Misalkan jika ingin menambahkan imeage loader pada slideshow kamu bisa menambahkan kode ini

data-cycle-loader="wait"

Jika ingin menmbahkan tombol Prev atau tombol next kamu tinggal menambahkan kode html di bawah ini

    <div class="cycle-prev"></div>
    <div class="cycle-next"></div>

ata kamu ingin mempause slide ketika mouse berada di atas gambarnya / OnMouse hover kamu bisa menambakan property ini

data-cycle-pause-on-hover="true"

kamu juga bisa menambahkan element pager dengan cara menambahkan kode di bawah ini

<div class="cycle-pager"></div>

demikian lah contoh slider. Slider ini bisa kamu pasang di widget blog kamu atau di pasang di halaman web kamu

Artikel Menarik Lainnya
cara membuat slider otomatis di blog, cara membuat slideshow, image slide show, tutorial jquery, tutorial java script

loading...