MOHON PERHATIAN!!!........ Sehubungan sedang "ERROR"nya situs HTTP://WWW.RIPWAY.COM, maka bila Anda menemukan tutorial yang menggunakan kode dengan nama situs tersebut, sementara waktu JANGANLAH Anda gunakan. Mohon maaf, semoga anda memakluminya.............................

Mengucapkan Selamat Datang, Semoga Dapat Berkenan Di Hati Anda



SYAMSUDINNAMAKU telah hadir

KUNJUNGI CHANNEL YOUTUBE SAYA

Membuat Horizontal Auto Slide jQuery


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&#39;s
        in milliseconds ( multiplied with 1000) &#39;*/

        /*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.*/
        $(&#39;#carousel_ul li:first&#39;).before($(&#39;#carousel_ul li:last&#39;));

        //check if auto sliding is enabled
        if(auto_slide == 1){
            /*set the interval (loop) to call function slide with option &#39;right&#39;
            and set the interval time to the variable we declared previously */
            var timer = setInterval(&#39;slide(&quot;right&quot;)&#39;, 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*/
            $(&#39;#hidden_auto_slide_seconds&#39;).val(auto_slide_seconds);
        }

        //check if hover pause is enabled
        if(hover_pause == 1){
            //when hovered over the list
            $(&#39;#carousel_ul&#39;).hover(function(){
                //stop the interval
                clearInterval(timer)
            },function(){
                //and when mouseout start it again
                timer = setInterval(&#39;slide(&quot;right&quot;)&#39;, auto_slide_seconds);
            });

        }

        //check if key sliding is enabled
        if(key_slide == 1){

            //binding keypress function
            $(document).bind(&#39;keypress&#39;, function(e) {
                //keyCode for left arrow is 37 and for right it&#39;s 39 &#39;
                if(e.keyCode==37){
                        //initialize the slide to left function
                        slide(&#39;left&#39;);
                }else if(e.keyCode==39){
                        //initialize the slide to right function
                        slide(&#39;right&#39;);
                }
            });

        }

  });

//FUNCTIONS BELLOW

//slide function
function slide(where){

            //get the item width
            var item_width = $(&#39;#carousel_ul li&#39;).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 == &#39;left&#39;){
                //...calculating the new left indent of the unordered list (ul) for left sliding
                var left_indent = parseInt($(&#39;#carousel_ul&#39;).css(&#39;left&#39;)) + item_width;
            }else{
                //...calculating the new left indent of the unordered list (ul) for right sliding
                var left_indent = parseInt($(&#39;#carousel_ul&#39;).css(&#39;left&#39;)) - item_width;

            }

            //make the sliding effect using jQuery&#39;s animate function... &#39;
            $(&#39;#carousel_ul:not(:animated)&#39;).animate({&#39;left&#39; : 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 == &#39;left&#39;){
                    //...and if it slided to left we put the last item before the first item
                    $(&#39;#carousel_ul li:first&#39;).before($(&#39;#carousel_ul li:last&#39;));
                }else{
                    //...and if it slided to right we put the first item after the last item
                    $(&#39;#carousel_ul li:last&#39;).after($(&#39;#carousel_ul li:first&#39;));
                }

                //...and then just get back the default left indent
                $(&#39;#carousel_ul&#39;).css({&#39;left&#39; : &#39;-210px&#39;});
            });

}
</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(&quot;left&quot;);'/>) 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:

Dadang mengatakan...

gambarnya nggak bisa diganti om,??...

Syamsudinnamaku mengatakan...

Harusnya bisa kang, kita udah coba kok.
Untuk ngetesnya, coba ganti aja gambarnya
dgn ukuran yg sama dgn contoh yg ada.

Jefry mengatakan...

kira2 ada demonya nggak mas ?
terima kasih

Posting Komentar