Cara membuat slideshow di website

Publish Date : 21-01-2017 , dibaca 49601 kali, Hari ini dibaca : 1 kali ,0 comments

Tutorial kali ini kita akan Membuat Image Slideshow di Website yang file nya dapat anda Download sebagai Contoh untuk anda dalam bentuk HTML , Untuk membuat slider / slideshow di website disini kita menggunakan novislider , Code ini dapat anda modifikasi lagi lewat text editor anda seperti Dreamweaver, Notepad++ , maupun sublime , dll. OY.. ini juga dapat anda modifikasi untuk membuat slideshow / content slider dengan Gambar / Data yang diambil dari database Mysql dengan PHP , Logikanya cukup sederhana,, kita hanya perlu menampilkan gambar yang ada di database pada bagia HTML slidernya saja..

untuk membuat slider / sliedshow yang berupa gambar bergerak / animasi gambar diwebsite ini cukup mudah, simak tutorial dibawah ini ya..

Cara Membuat SlideShow Diwebsite

untuk membuat slider dengan nivoslider cukup mudah.. kita hanya memanggil file jquery spertdan memodifikasi script dibawah , dan dapat anda download disini

Berikut susunan File dan macam-macam bentuk demos slider nya :

Sample Code :

<!DOCTYPE HTML>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<html lang="en">
<head>
    <title>Nivo Slider Demo</title>
    
    <link rel="stylesheet" href="style/style.css" type="text/css" />
    <style type="text/css">body {background-color:#2f2f2f;}</style>

</head>
<body>

<div id="slider-wrapper">
    <div id="slider" class="nivoSlider">
        <a href="#"><img src="images/1.jpg" alt="" title="Aku tidak akan pernah tahu" /></a>
        <a href="#"><img src="images/2.jpg" alt="" title="Bahwa ini dan mereka itu tidak akan pernah identik" /></a>
        <a href="#"><img src="images/3.jpg" alt="" title="Sebuah kenyataan yang lucu" /></a>
        <a href="#"><img src="images/4.jpg" alt="" title="Meski seringkali begitu menyakitkan" /></a>
    </div>
</div>
        
    <script type="text/javascript" src="scripts/jquery-1.6.1.min.js"></script>
    <script type="text/javascript" src="scripts/jquery.nivo.slider.js"></script>
    <script type="text/javascript">
    $(window).load(function() {
        $('#slider').nivoSlider({
            pauseTime: 5000,
            startSlide: 3
        });
    });
    </script>
</body>
</html>