Membuat Vertical Auto Slide jQuery

Vertical Auto Slide jQuery ini sama halnya dengan

Horizontal Auto Slide jQuery. Yang membedakannya

adalah pada posisinya. Bila pada yang lalu horizontal,

maka yang sekarang adalah vertical. Satu perbedaan-

nya lagi terletak pada penempatan kodenya. Untuk

Vertical Auto Slide jQuery ini, selain penempatan

kodenya bisa seperti pada yang Horizontal, bisa juga

langsung diletakkan pada sidebar. Previewnya dapat

anda lihat, kurang lebihnya seperti di bawah ini :

• 
• 
• 
• 
• 

Untuk membuatnya, seperti yang telah dikatakan di atas,

cukup hanya menambahkan gadget HTML/JavaScript

kemudian masukkanlah kode berikut dalam kontennya.

Copy Kode

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123

<script type="text/javascript" src="http://h1.ripway.com/syamsudin/banner-autoslide.js"></script> <script type="text/javascript"> $(document).ready(function() { //options( 1 - ON , 0 - OFF) var auto_slide = 1; var hover_pause = 1; var key_slide = 1; //speed of auto slide( var auto_slide_seconds = 5000; /* IMPORTANT: i know the variable is called ...seconds but it's in milliseconds ( multiplied with 1000) '*/ /*move he last list item before the first item. The purpose of this is if the user clicks to slide left he will be able to see the last item.*/ $('#carousel_ul li:first').before($('#carousel_ul li:last')); //check if auto sliding is enabled if(auto_slide == 1){ /*set the interval (loop) to call function slide with option 'right' and set the interval time to the variable we declared previously */ var timer = setInterval('slide("right")', auto_slide_seconds); /*and change the value of our hidden field that hold info about the interval, setting it to the number of milliseconds we declared previously*/ $('#hidden_auto_slide_seconds').val(auto_slide_seconds); } //check if hover pause is enabled if(hover_pause == 1){ //when hovered over the list $('#carousel_ul').hover(function(){ //stop the interval clearInterval(timer) },function(){ //and when mouseout start it again timer = setInterval('slide("right")', auto_slide_seconds); }); } //check if key sliding is enabled if(key_slide == 1){ //binding keypress function $(document).bind('keypress', function(e) { //keyCode for left arrow is 37 and for right it's 39 ' if(e.keyCode==37){ //initialize the slide to left function slide('left'); }else if(e.keyCode==39){ //initialize the slide to right function slide('right'); } }); } }); //FUNCTIONS BELLOW //slide function function slide(where){ //get the item width var item_width = $('#carousel_ul li').outerWidth() + 10; /* using a if statement and the where variable check we will check where the user wants to slide (left or right)*/ if(where == 'left'){ //...calculating the new left indent of the unordered list (ul) for left sliding var left_indent = parseInt($('#carousel_ul').css('left')) + item_width; }else{ //...calculating the new left indent of the unordered list (ul) for right sliding var left_indent = parseInt($('#carousel_ul').css('left')) - item_width; } //make the sliding effect using jQuery's animate function... ' $('#carousel_ul:not(:animated)').animate({'left' : left_indent},500,function(){ /* when the animation finishes use the if statement again, and make an ilussion of infinity by changing place of last or first item*/ if(where == 'left'){ //...and if it slided to left we put the last item before the first item $('#carousel_ul li:first').before($('#carousel_ul li:last')); }else{ //...and if it slided to right we put the first item after the last item $('#carousel_ul li:last').after($('#carousel_ul li:first')); } //...and then just get back the default left indent $('#carousel_ul').css({'left' : '-210px'}); }); } </script> <style type="text/css"></style> <center> <div id='carousel_container'> <ul><div id='top_scroll'><a href='javascript:slide("top");'><img src='http://i1128.photobucket.com/albums/m486/syamsudin1/top_scroll.png' /></a></div></ul> <div id='carousel_inner'> <ul id='carousel_ul'> <li><a href='#'><img src='http://web.enavu.com/demos/carousel_revisited/item1.png' /></a></li> <li><a href='#'><img src='http://web.enavu.com/demos/carousel_revisited/item2.png' /></a></li> <li><a href='#'><img src='http://web.enavu.com/demos/carousel_revisited/item3.png' /></a></li> <li><a href='#'><img src='http://web.enavu.com/demos/carousel_revisited/item4.png' /></a></li> <li><a href='#'><img src='http://web.enavu.com/demos/carousel_revisited/item5.png' /></a></li> </ul> </div> <ul><div id='bottom_scroll'><a href='javascript:slide("bottom");'><img src='http://i1128.photobucket.com/albums/m486/syamsudin1/bottom_scroll.png' /></a></div></ul> <input type='hidden' id='hidden_auto_slide_seconds' value=0 /> </div></center>

KETERANGAN :

Ganti 5 (lima) gambar contoh di atas dengan
gambar kepunyaan anda.

Ubahlah ukuran pada kode tersebut dan sesuaikan
dengan gambar slide yang anda miliki.

Agar anda tidak terlalu repot, disarankan agar anda
mengubah saja ukuran gambar anda dengan me-
nyesuaikan ukuran gambar contoh di atas.

Namun bila anda ingin mencoba untuk mengutak-atik
kodenya, maka silahkan saja dan tidak ada salahnya.

Selamat mencoba.

Semoga berhasil, good luck!