Demo :
Current Panel: Total Panels:
Cara membuatnya
Dari Dashboard >> Design >> Edit HTML.
Langkah pertama > Penempatan kode CSS
dibawah <b:skin><![CDATA[
........
diatas ]]></b:skin>
.stepcarousel{
background:#000;
position: relative;
border: 10px solid black;
overflow: scroll;
width: 270px;
height: 200px;
}
.stepcarousel .belt{
position: absolute;
left: 0;
top: 0;
}
.stepcarousel .panel{
float: left;
overflow: hidden;
margin: 10px;
width: 250px;
}
Langkah kedua > Penempatan URL dan JavaScript
dibawah ]]></b:skin>
........
diatas </head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="http://pagenano.googlecode.com/files/Gambar%20Bergantian.js"></script>
<script type="text/javascript">
stepcarousel.setup({
galleryid: 'mygallery',
beltclass: 'belt',
panelclass: 'panel', //class of panel DIVs each holding content
autostep: {enable:true, moveby:1, pause:3000},
panelbehavior: {speed:500, wraparound:false, wrapbehavior:'slide', persist:true},
defaultbuttons: {enable: true, moveby: 1, leftnav: ['https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjW-JUM0CjrOd4ezu4uKHmSihXsyhPcCK8CFoX0qAH3HlqvhR5zjeIkpBFheq7xMfpbh9UOPN32dsNxS63BxDhomcdDIb_DdubNQ0_bZX8mbif2heiIyHVrPfDxIhYkOkR1dp8yNp4aeKtE/s1600/Nano+Yulianto-Left.png', -50, 80], rightnav: ['https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgo8c6HIvcaCZCUud7nQf-T5tVxBCFFnFyUxXJDpy3WaZGbSsAmbzkaGN5WKfhDErcRDdbaPa1sgB1t2jepFwkrIxWJ87NlaEkn3PsCqZRXKGpwluqKVMGUVq_WiResiheR3X1-0jt5AQlY/s1600/Nano+Yulianto-Right.png', -5, 80]},
statusvars: ['statusA', 'statusB', 'statusC'], //register 3 variables that contain current panel (start), current panel (last), and total panels
contenttype: ['inline'] //content setting ['inline'] or ['ajax', 'path_to_external_file']
})
</script>
Induk JQuery yang berwarna merah jika sudah ada, tidak perlu lagi !.
Langkah ketiga > Penempatan kode HTML
dibawah <body>
........
diatas </body>
<div id="mygallery" class="stepcarousel" style="width:530px;margin:0 auto;">
<div class="belt">
<div class="panel">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfpgw3COT2N_K71U65rKIoT9Bu1NtscA7bV-NsUEHFV-VGnanXK_pwscVjehCTndWOoXVc50yu7KXPpyH_SqxNDnBLU3HdDOtYQKbzRnd54iwMzhtQ4J9FHxELwY8bKHxil-IBLk3Q9GV_/s1600/1-Nano+Yulianto.jpg" />
</div>
<div class="panel">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeOTQBnxgZcLnV9FlNlUgdxzgXetJu5v_BTotd_wC-9l8dL3w1GnbCuf4Vp3rdrwLLkq_x013KLKG89U3DXRcLaXyHcgwvy1F8PEODZRHwAiOiUzmQUknwOLnLnWA1VebxFHJKMbm6lWJJ/s1600/2-Nano+Yulianto.jpg" />
</div>
<div class="panel">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOAKMGCQHcsz96wd2r95zBzFetwzGPjNStkid4vyCLdTjglPcmefDVu4zuBBUNBqXq6tRzUWQFbXSZBEyJgoXNQZqb4xs0H10xJ0AWcXt51T_H1ot8LRtxNoaTIlPXI5ixU5OcZ8wEfBxe/s1600/3-Nano+Yulianto.jpg" />
</div>
<div class="panel">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghLpwS21P4RKgVDdb5uLqP9sUgDify80NJb7OWCsviuWzm6bAXjpz8q26wqO44saELBBEoXZfogrIQcWOz7u_dm7fPbgUOleTyeFE0ac7yTci1uMVGhtORxD2AI9L6oqWwLKAvpOUYp8QF/s1600/4-Nano+Yulianto.jpg" />
</div>
<div class="panel">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuQMAeIupBRjdMORbP-0xJF488mADvnjTTaRd8PLYN413l1SnNtsz4edpYRD-ZeeMLIP1xlmV4W9eviH-IxfdKT09S2uKgmaRSfDlTMOInnvoZPyOvpdKK406bjD6Yp3vgXmR_Dqe2Yu-A/s1600/5-Nano+Yulianto.jpg" />
</div>
</div>
</div>
<p style="text-align:center;"><b>Current Panel:</b> <span id="statusA"></span> <b style="margin-left: 30px">Total Panels:</b> <span id="statusC"></span></p>
Credit : Dynamic Drive
Alhamdulillah
0 comments:
Posting Komentar