Sedikit Info Seputar
Simple Slideshow dengan sedikit Bumbu CSS & Javascript
Terbaru 2017
- Hay gaes kali ini team Free Template BLogspot.Com, kali ini akan membahas artikel dengan judul Simple Slideshow dengan sedikit Bumbu CSS & Javascript, kami selaku Team Free Template BLogspot.Com telah mempersiapkan artikel ini untuk sobat sobat yang menyukai Free Template BLogspot.Com. semoga isi postingan tentang
Artikel BLOGGER,
Artikel CSS,
Artikel Informasi,
Artikel JavaScript,
Artikel Plugin, yang saya posting kali ini dapat dipahami dengan mudah serta memberi manfa'at bagi kalian semua, walaupun tidak sempurna setidaknya artikel kami memberi sedikit informasi kepada kalian semua. ok langsung simak aja sob
Judul:
Berbagi Info Seputar
Simple Slideshow dengan sedikit Bumbu CSS & Javascript
Terbaru
link: Simple Slideshow dengan sedikit Bumbu CSS & Javascript
Berbagi Simple Slideshow dengan sedikit Bumbu CSS & Javascript Terbaru dan Terlengkap 2017
Lihat DEMO →
Cara Memasang nya :
1. Copy Code JavaScript & CSS di bawah ini , lalu simpan tepat di atas kode </head> :
<script type="text/javascript" src="http://static.tumblr.com/dxr7fsd/Wvmmpdd8c/jquery-1.2.6.min.js"></script>
<script type="text/javascript">
/***
Membuat Slideshow mudah dengan sedikit Bumbu JavaScript & CSS
By : Jon Raasch (jonraasch.com) & Modified by : Kang Rian (riandesign.web.id)
***/
function slideSwitch() {
var $active = $('#slideshow IMG.active');
if ( $active.length == 0 ) $active = $('#slideshow IMG:last');
// use this to pull the images in the order they appear in the markup
var $next = $active.next().length ? $active.next()
: $('#slideshow IMG:first');
// uncomment the 3 lines below to pull the images in random order
// var $sibs = $active.siblings();
// var rndNum = Math.floor(Math.random() * $sibs.length );
// var $next = $( $sibs[ rndNum ] );
$active.addClass('last-active');
$next.css({opacity: 0.0})
.addClass('active')
.animate({opacity: 1.0}, 1000 /* << Atur Kecepatan lebih menurun lebih cepat !*/, function() {
$active.removeClass('active last-active');
});
}
$(function() {
setInterval( "slideSwitch()", 2000 );
});
</script>
<style type="text/css">
/*** CSS nya Atur-atur sesuka hatimu yang penting cantik.. **/
#slideshow {
position:relative;
height:460px;
}
#slideshow IMG {
position:absolute;
top:0;
left:0;
z-index:8;
opacity:0.0;
}
#slideshow IMG.active {
z-index:10;
opacity:1.0;
}
#slideshow IMG.last-active {
z-index:9;
}
</style>
2. Cara Memasukan/Membuat Slideshow ke area HTML :
Sekian Tutorial tentang Cara Membuat Simple Slideshow dengan sedikit Bumbu CSS & Javascript .
<div id="slideshow">
<img src="alamat-gambar-1.jpg" alt="Keterangan Gambar" title="Judul Gambar" />
<img src="alamat-gambar-2.jpg" alt="Keterangan Gambar" title="Judul Gambar" />
<img src="alamat-gambar-3.jpg" alt="Keterangan Gambar" title="Judul Gambar" class="active" />
</div>
Selamat Mencoba , Semoga Bermanfaat ! Happy Blogging sob .. ^_^