Cara Membuat Background Menjadi Slider Menggunakan jQuery

Hallo teman teman balik lagi dengan saya Ismet Maulana kali ini saya akan membahas Bagaimana Cara Membuat Background Menjadi Slider Menggunakan jQuery, teman teman teman sudah biasa melihat slider dengan tampilan biasa kali ini saya kan mengubahnya sedikit.

Oke langsung saja teman teman bisa salinkan scriptnya dibawah sini :

<head>
<link rel="stylesheet" type="text/css" href="style.css" >
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
    <script type="text/javascript" src="script.js"></script>

</head>

<body>
    
    <div id="bg-slideshow">
        <img src="images/1.jpg" alt="background" />
        <!-- Gambar yang lain akan dimasukkan kesini dengan bantuan dari jquery -->
    </div>
    
    
    <div id="wrapper">
        <h1>Dumet School</h1>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumyeirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diamvoluptua. At vero eos et accusam et justo duo dolores et</p>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumyeirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diamvolupt</p>
    </div>
</body>

kalo sudah silahkan salin script jQuerynya dan masukkan gambar kesukaan teman teman untuk dijadikan background :

$(document).ready(function(){
    //Kosongkan img yang berada di dalam div #bg-slideshow
    var $slide = $("#bg-slideshow");
    $slide.empty();    
    
    // Buat array yang berisi letak gambar - gambar yang akan dijadikan 
    // slideshow. Lalu append gambar gambar tersebut di dalam div #bg-slideshow
    var bg_img = new Array('images/banner-izin-DEPDIKNAS.jpg','images/Diskon kursus webmaster dumet school.jpg','images/promo-free-trial.jpg');
    for (var i=0; i < bg_img.length; i++) {
        imgTemplate = "<img src='" + bg_img[i] + "' alt='image' >";
        $slide.append(imgTemplate);
    }
    
    //Slideshow
    $("#bg-slideshow img:gt(0)").hide();
    setInterval(function(){
        $visible = $("#bg-slideshow img:visible");
        $visible.fadeOut(1000);
        if( $visible.next('img').length == 0 ) {
            $("#bg-slideshow img:first").fadeIn(1000);
        } else {
            $visible.next('img').fadeIn(1000);
        }
    },5000);
    
});

dan ini style cssnya :

body {
    margin: 0;
    padding: 0;
    font:normal 14px/1.5 Arial, sans-serif;
}
#bg-slideshow {
    position:fixed;
    top:0
}
#bg-slideshow img {
    width: 100%;
    height: 100%;
    position:fixed;
    z-index:1;
    left:0;
    top:0
}
#wrapper {
    width:450px;
    margin:70px auto 0 auto;
    padding:20px;
    position:relative;
    z-index:5;
    background:#fff;
    -webkit-box-shadow:0 0 0 15px rgba(255,255,255,.3);
    -moz-box-shadow:0 0 0 15px rgba(255,255,255,.3);
    box-shadow:0 0 0 15px rgba(255,255,255,.3)
}

Jika sudah disalinkan semua teman teman save dan jalankan dibrowsernya, kemudian lihat tampilannya backgroundnya, otomatis backgroundnya akan mengubah sendiri berganti dengan background lainnya . cukup mudah bukan ? sampai disini tutorial tentang Bagaimana Cara Membuat Background Menjadi Slider Menggunakan jQuery .

Sampai jumpa dan terimakasih ..

#KeepLearn

#IsmetMA

Cara Membuat Background Menjadi Slider Menggunakan jQuery

Kategori