Membuat Slide Show dengan jQuery

Pada kesempatan kali ini ana mau berbagi tips atau cara membuat slide show sederhana menggunakan jQuery. Hal ini merupakan hal yang biasa bagi yang sudah ahli pada bidang pemrograman hal ini tidaklah aneh dan tidak terlalu silit untuk melakukan berbagai manuver kode yang mereka mau.

Namun pada kesempatan kali ini ana mau berbagi pengalaman buat para pemula seperti saya yang sifatnya ingin tahu. pada materi kali ini kita tidak wajib harus pandai pemrograman, namun ini hanya dasar dan sifatnyapun hanya sederhana karena ini tampilan sederhana ya jangan di bully ya maklum hanya berbagi cara saja.

Ok untuk mempersingkat waktu mari kita mulai saja pembelajaran dan penerapan kodenya yang ada di bawah ini kedalam web sobat semua dimana berada yang sedang membutuhkan kode ini untuk melengkapai dan mempercantik tapilan webnya karena dengan ada slide show gambar yang kita inginkan.

Berikut cara dan perlengkapan yang dibutuhkan untuk memulai langkah ini :

Pertama

Siapkan telebih dahulu dambar - gambar terbaik sahabat yang akan dijadikan slide show pada web sahabat semuanya. Ingat ukuran gambarnya yang kecil aja namun yang bagus agar nantinya tidak membuat web sahabat semua berat. Ingat gambarnya ukuran diperkecil ya jangan scripnya yang disalahkan bila berat ngeload slidenya.

Kedua

Kopikan kode dibawah ini pada mode html pada web sahabat semuanya agar nantinya hasilnya bisa tampil sobat harus sesuaikan nama gambar dengan yang discripnya agar bisa berjalan dengan normal dan baik sesuai yang diharapkan

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
function slideSwitch() {
    var $active = $('#slideshow div.active');
    if ( $active.length == 0 ) $active = $('#slideshow DIV:last');
    var $next =  $active.next().length ? $active.next()
        : $('#slideshow div:first');
 
    $active.addClass('last-active');
    $next.css({opacity: 0.0})
        .addClass('active')
        .animate({opacity: 1.0}, 1100, function() {
            $active.removeClass('active last-active');
        });
}
$(function() {
    setInterval( "slideSwitch()", 6000 );
});
</script>
 
<!-- Sesuaikan style dengan desain halaman anda -->
<style type="text/css">
#slideshow {
    position:relative;
    height:200px;
    padding:0px;
    margin:10px 0 -30px 0;
}
 
#slideshow div{
    position:absolute;
    top:0;
    left:0;
    z-index:8;
    opacity:0.0;
    height: 200px;
    background-color: #FFF;
    padding:0px;
    margin:0px;
}
 
#slideshow div.active {
    z-index:10;
    opacity:1.0;
}
 
#slideshow div.last-active {
    z-index:9;
}
 
#slideshow div img{
    height: 200px;
    display: block;
    border: 0;
    margin-bottom: 0px;
}
</style>
 
<div id="slideshow">
    <!-- Tambahkan gambar2 slide show disini -->
    <div class="active"><img src="images/gambarsahabat.png" alt="moshareid.com" /></div>
    <div><img src="images/gambarsahabat.png" alt="moshareid.com" /></div>
    <div><img src="images/gambarsahabat.png" alt="moshareid.com" /></div>
    <div><img src="images/gambarsahabat.png" alt="moshareid.com" /></div>
</div>

Setelah kode diatas dipasang dengan sempurna pada posisi scrip yang tersedia diweb silahkan direfres kembali webnya untuk melihat hasilnya. Jika dirasa belum sesuai dilahkan ganti kembali gambar dan ukurannya agar bisa menyesuaikan dengan latar web kita agar tidak terjadi timpang antara slide dan tampilan web.

Bagaimana mudah bukan untuk membuatnya silahkan berkreasi dan berimajinasi kembali untuk melanjutkan kode - kode yang sudah disiapkan sebelumnya dan nantikan kelanjutan dari kode - kode untuk mempercantik tampilan web yang kita bangun agar menjadi web impian semua orang yang membaca dan berkunjung ke web kita tersebut.

Akhir kata ana ucapkan terimakasih atas kunjungannya di blog ini semoga artikel yang ana buat ini bermanfaat untuk kita semua dan semoga berhasil guna di masa masa mendatang.

Selamat berjuang dengan kode kesayangan sobat semua untuk berinspirasi dalam melakukan pengembangan websitenya, agar sesuai dengan kebutahan dimasa sekarang dan mendatang agar web kita tidak ketinggalan dengan web yang lainnya, salam sukses selalu untuk sahabat semua dimana saja berada dan jangan lupa untuk berkunjung kembali di blog ini.