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

 

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