contact
WA: 0822-8846-7823
SMS: 0822-8846-7823
Call: 0822-8846-7823
BBM: D7DB3491
ebsofmail@gmail.com

Cara membuat slideshow di website

Posted in HTML & CSS Life at 21 Januari 2017 With 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..

 membuat sliedshow di website HTML

▼ Download Source Code Dibawah Ini ▼


 

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 :

download sample sliedshow

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>

Artikel Rekomendasi



Artikel Terkait

Diskusi