Cara membuat slider sederhana dengan flexslider

Banyak slider java script atau jquery bertebaran di internet, tapi yang mana slider yang sederhana dan memenuhi kebutuhan? Dari sekian banyak slider, yang menurut saya mudah di-implementasikan dan di-kustomisasikan adalah flexslider.

Yah, selain mudah di pasang dan mudah di kustom / diubah, yang penting lagi flexslider ini responsive dan gratis 🙂 (yang mau bisa teleconference gratis disini)

Langsung saja, kita lanjut ke pemasangannya:

Download Flexslider disini 

Upload ke webserver kamu (atau localhost)

Masukkan kode berikut diantara tag < head >dari file HTML yang mau kamu masukkan flexslider

< script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" >< /script >
<!-- Flex Slider -->
<!-- Flex Slider CSS -->
< link rel="stylesheet" href="http://www.domainkamu.com/flexslider.css" type="text/css" media="screen" / >

<!-- Flex Slider JS -->
< script type="text/javascript" src="http://www.domainkamu.com/jquery.flexslider-min.js" ></ script >
< script type="text/javascript" >
$(window).load(function() {
$('.flexslider').flexslider({
slideshowSpeed: 1000,
animationDuration: 1000
});
});
</ scrip t>
<!-- Flex Slider -->

Sekarang masukkan ini kedalam < body >, ini yang akan menjadi item-item slider

< div class="flexslider" >
< ul class="slides" >
< li >
< iframe width="300" height="169" src="http://www.youtube.com/embed/Hv012gSnjH0?rel=0" frameborder="0" allowfullscreen ></ iframe >
< /li >
< li >
< iframe width="300" height="169" src="http://www.youtube.com/embed/KRZfl9ncNoo?rel=0" frameborder="0" allowfullscreen >< /iframe >
< /li >
< li >
< iframe width="300" height="169" src="http://www.youtube.com/embed/kkuKZ7ZGuEM?rel=0" frameborder="0" allowfullscreen >< /iframe >
< /li >
< li >
< img src="http://orangorangan.com/wp-content/uploads/2013/04/video-conference-gratis.jpg"  width="300"></li >

< /ul >
< /div >

Sudah selesai tuh, tinggal kamu save filenya dan lihat slider sederhana Flexslider beraksi! di slider sederhana diatas saya bahkan memasukkan video youtube 🙂

Tunggu, tadi saya bilang tentang kustomisasi? baiklah, slider sederhana ini sangat mudah di kustomisasi! ga usah ba bi bu lagi deh, langsung aja kesini untuk liat daftar lengkap-nya: mengkustomisasi slider sederhana flexsilder

Semoga informasi tadi membantu teman-teman yang sedang mencari slider sederhana namun mudah digunakan. Yang sudah memakai slider sederhana flexslider ini dan punya teknik keren modifikasi flexslider, silahkan dong berbagi disini, supaya kita semua bisa! Buat yang mau gabungin flexslider kedalam widget blog wordpress-nya

Makasih yang udah baca, bagi-bagi informasi yah ^^