Slider efek easing

Slider efek easing ini adalah slideshow terusan dari postingan saya yang berjudul Slider dengan 25 efek pada postingan saya yang itu Efeknya masih standar nah dengan adanya Tambahan Jquery Easing-1.3 ini maka efeknya semakin okelah pokoknya hhe.

DEMO

1. Masukan script di bawah ini di atas kode </head>

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>
<script type="text/javascript" src="http://sites.google.com/site/zyztem33/js/Cycle-all.js"></script>
<script type="text/javascript" src="http://sites.google.com/site/zyztem33/js/easing-1.3.js"></script>
<script type="text/javascript">
$(window).load(function() {
$('#content-slider').cycle({ 
    fx:     'scrollLeft,scrollDown,scrollRight,scrollUp,turnDown',
    easing: 'easeOutBounce',
    pause:  'true',
    speed:  '1000', 
    timeout: 5000, 
    next:   '#next2', 
    prev:   '#prev2' 
});
});
</script>

2. Simpan kode css di bawah ini di atas ]]></b:skin>

#konslet {
    position: relative;
    width: 440px;
    height: 200px;
    margin: 0 auto 10px;
    border: 3px solid #09F;
    overflow: hidden
    }

#konslet .nav {
    position: absolute;
    top: 5px;
    right: 5px;
    z-index: 100;
    overflow: hidden;
    padding: 5px
    }
#konslet > .nav a#prev2, #konslet > .nav a#next2 {
    background: rgba(5, 165, 255, 0.80);
    padding: 5px 20px;
    color: white;
    text-decoration: none;
    font: bold 13px/20px Arial, sans-serif;
    border: 1px solid black;
    margin: 0 0 0 5px;
    }

#content-slider {
   position: relative;
   margin:0 auto;
}
#content-slider img {
   display: block;
   max-width: 100%;
   height: 200px;
}

3. Masukan kode html di bawah ini di dalam Gadget HTML/Javascript

<div id="konslet">
<div id="content-slider">
<a href="#"><img src="url gambar 1.jpg" /></a>
<a href="#"><img src="url gambar 2.jpg" /></a>
<a href="#"><img src="url gambar 3.jpg" /></a>
<a href="#"><img src="url gambar 4.jpg" /></a>
</div>
<div class="nav">
<a id="prev2" href="#">Prev</a>
<a id="next2" href="#">Next</a>
</div>
</div>
<div style='clear: both;'></div>

Jika dalam template anda sudah ada kode jquery yang bergaris bawah tersebut gak usah lagi copy kode itu cukup kode di bawahnya saja, jangan Lupa ganti URL gambarnya dengan URL gambar punya anda, perhatikan kode seperti ini
scrollLeft,scrollDown,scrollRight,scrollUp,turnDown
itu adalah efeknya Jika anda ingin menambah efeknya anda Cukup menambahkan nama efeknya lagi di belakangnya pertama anda lihat dulu Efek - Efeknya di postingan saya ini Lalu setelah itu Pilih nama efek yang akan di tambahkan lalu beri tanda koma (,) lagi di belakang nama efek yang sudah ada misalnya ada pilih efek fade jadi seperti ini nanti kodenya.

scrollLeft,scrollDown,scrollRight,scrollUp,turnDown,fade

Nah seperti itulah caranya menambahkan efeknya lagi kalau masih kurang Modifan slidernya bisa anda modif lagi sesuai selera anda, perhatikan lagi kode easeOutBounce itu adalah efek Mental - Mental kalau kita klik Next atau Prev nah efek Easing itu ada berbagai macam di bawah ini List nya.

1. linear
2. swing
3. easeInQuad
4. easeOutQuad
5. easeInOutQuad
6. easeInCubic
7. easeOutCubic
8. easeInOutCubic
9. easeInQuart
10. easeOutQuart
11. easeInOutQuart
12. easeInQuint
13. easeOutQuint
14. easeInOutQuint
15. easeInSine
16. easeOutSine
17. easeInOutSine
18. easeInExpo
19. easeOutExpo
20. easeInOutExpo
21. easeInCirc
22. easeOutCirc
23. easeInOutCirc
24. easeInElastic
25. easeOutElastic
26. easeInOutElastic
27. easeInBack
28. easeOutBack
29. easeInOutBack
30. easeInBounce
31. easeOutBounce
32. easeInOutBounce

Anda bisa ganti Efek Mental - Mental itu dengan beberapa List di atas jadi jika efek easeOutBounce kurang cocok silahkan ganti dengan salah satu list di atas. jika anda pusing mending gak usah baca lanjutan dari langkah 3 ini mending anda Cukupkan sampai Langkah 3 saja ok selamat mencoba.