Horizontal Auto Slide jQuery ini amat anggun penam-
pilannya. Begitu manis dan enak dipandang. Sebagai-
mana efek slide pada umumnya, Horizontal Auto Slide
jQuery ini juga auto slide. Ke-anggunannya justru
terletak pada kedua scroll yang ada di sisi kiri dan
kanannya. Untuk menjalankan gambarnya secara
manual, selain dengan meng-klik scroll tersebut,
kita juga dapat menggunakan atau menekan tombol
panah kiri dan kanan pada keyboard komputer kita.
Biar anda tidak penasaran, lihat saja demonya disini.
Anda tertarik ? Inilah langkah cara membuatnya :
1. Masuk ke -> Edit HTML.
2. Carilah kode </head>.
3. Copy kode yang berikut ini
dan letakkan di atas kode </head> ini.
Setelah itu simpan template anda.
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 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 | <script src='http://h1.ripway.com/syamsudin/banner-autoslide.js' type='text/javascript'/> <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 the 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'> #carousel_inner { float:left; /* important for inline positioning */ width:630px; /* important (this width = width of list item(including margin) * items shown */ overflow: hidden; /* important (hide the items outside the div) */ /* non-important styling bellow */ background: #F0F0F0; } #carousel_ul { position:relative; left:-210px; /* important (this should be negative number of list items width(including margin) */ list-style-type: none; /* removing the default styling for unordered list items */ margin: 0px; padding: 0px; width:9999px; /* important */ /* non-important styling bellow */ padding-bottom:10px; } #carousel_ul li{ float: left; /* important for inline positioning of the list items */ width:200px; /* fixed width, important */ /* just styling bellow*/ padding:0px; height:110px; background: #000000; margin-top:10px; margin-bottom:10px; margin-left:5px; margin-right:5px; } #carousel_ul li img { .margin-bottom:-4px; /* IE is making a 4px gap bellow an image inside of an anchor (<a href='javascript:slide("left");'/>) so this is to fix that */ /* styling */ cursor:pointer; cursor: hand; border:0px; } #left_scroll, #right_scroll{ float:left; height:130px; width:15px; background: #C0C0C0; } #left_scroll img, #right_scroll img{ border:0; /* remove the default border of linked image */ /*styling*/ cursor: pointer; cursor: hand; } </style> |
KETERANGAN :
Sesuaikanlah ukuran pada kode di atas
dengan gambar slide milik anda.
Agar anda tidak repot, saya sarankan agar
anda mengubah ukuran gambar anda saja dan sesuaikan
dengan ukuran gambar yang ada pada contoh di atas.
Tapi bila anda ingin mengutak-atik kode, terutama
ukuran gambarnya, silahkan saja untuk mencobanya.
4. Setelah itu, anda ke Rancangan.
Tambahkan Gadget HTML/JavaScript.
Masukkan kodenya berikut ini :
KETERANGAN :
Gantilah ke 5 (lima) gambar yang terdapat pada kode
tersebut dengan gambar milik anda.
Bila anda ingin menambahkan jumlah gambar slidenya,
ikutilah cara peletakkan kode pada gambar sebelumnya.
Selamat bereksperimen.
Semoga berhasil, good luck!
3 comments:
gambarnya nggak bisa diganti om,??...
Harusnya bisa kang, kita udah coba kok.
Untuk ngetesnya, coba ganti aja gambarnya
dgn ukuran yg sama dgn contoh yg ada.
kira2 ada demonya nggak mas ?
terima kasih
Posting Komentar