tRikSonic
Tema
  • Original
  • Translate

Konsep sederhana membuat slideshow di blog

Terakhir diperbarui : 23 Mei 2018 - 12.22

Cara membuat slideshow sederhana

kali ini saya ingin berbagi tentang konsep sederhana dalam pembuatan sebuah slideshow. Tutorial membuat slideshow kali ini merupakan kerangka yang sangat simple mudah di modifikasi, dan sangat ringan karena penggunaan javascriptnya relative kecil.
membuat slideshow sederhana

Konsep HTML :

<div class='container'>
  <div class='slider active'>
    <h2>Kontent 1</h2>
  </div>
   
  <div class='slider demo'>
    <h2>Kontent 2</h2>
  </div>
   
  <div class='slider'>
    <h2>Kontent 3</h2>
  </div>
   
  <div class='slider demo'>
    <h2>Kontent 4</h2>
  </div>
</div>

Konsep CSS :

.slider {
   display : none;
   border: 1px solid #bdbdbd;
   border-radius: 5px;
   -moz-border-radius: 5px;
   -webkit-border-radius: 5px;
   background: #e0e0e0;
   padding: 35px;
   min-height: 125px;
}

.slider.active {
 display : block
}

.slider.demo {
 background : pink;
}

Javascript :

var myIndex = 0;
carousel();

function carousel() {
    var i;
    var x = document.getElementsByClassName("slider"); // nama class
    for (i = 0; i < x.length; i++) {
        x[i].style.display = "none";
    }
    myIndex++;
    if (myIndex > x.length) {
        myIndex = 1
    }
    x[myIndex - 1].style.display = "block";
    setTimeout(carousel, 3000); //3 detik
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo Triksonic</title>
<style>
.slider {
   display : none;
   border: 1px solid #bdbdbd;
   border-radius: 5px;
   -moz-border-radius: 5px;
   -webkit-border-radius: 5px;
   background: #e0e0e0;
   padding: 35px;
   min-height: 125px;
}

.slider.active {
 display : block
}

.slider.demo {
 background : pink;
}

</style>
</head>
<body>

<div class='container'>
  <div class='slider active'>
    <h2>Kontent 1</h2>
  </div>
   
  <div class='slider demo'>
    <h2>Kontent 2</h2>
  </div>
   
  <div class='slider'>
    <h2>Kontent 3</h2>
  </div>
   
  <div class='slider demo'>
    <h2>Kontent 4</h2>
  </div>
</div>

<script>
//<![CDATA[
var myIndex = 0;
carousel();

function carousel() {
    var i;
    var x = document.getElementsByClassName("slider"); // nama class
    for (i = 0; i < x.length; i++) {
        x[i].style.display = "none";
    }
    myIndex++;
    if (myIndex > x.length) {
        myIndex = 1
    }
    x[myIndex - 1].style.display = "block";
    setTimeout(carousel, 3000); //3 detik
}
//]]>
</script>

</body>
</html>

Tidak ada komentar

Comment Form

Posting Komentar

  1. Untuk menyisipkan sebuah link atau tautan gunakan <i rel="link=//example.com">teks disini</i>
    • Tanpa menggunakan https: dan http:
  2. Untuk menyisipkan sebuah kode yang pendek gunakan <i rel="code">kode disini</i>
  3. Untuk menyisipkan sebuah kode yang panjang gunakan <i rel="pre">kode disini</i>
  4. Untuk menyisipkan sebuah teks Tebal gunakan <strong>teks tebal disini</strong>
  5. Untuk menyisipkan sebuah teks Miring gunakan <em>teks miring disini</em>
  6. Untuk menyisipkan sebuah gambar gunakan <i rel="image">url gambar disini</i>

Ketentuan Komentar

  • Pengguna yang dapat berkomentar adalah pengguna yang memiliki akun google
  • Guna mengurangi komentar yang bersifat spam, maka akan diberlakukan langkah verifikasi kata.
  • Pengguna bertanggung jawab atas komentar yang dikirim
  • Admin dan penulis blog mempunyai hak untuk menampilkan, menghapus, menandai spam, pada komentar yang dikirim
  • Dengan mengirimkan sebuah komentar, maka pengguna dianggap menyetujui semua ketentuan diatas

Poin ketentuan diatas tidak bersifat tetap, dan dapat berubah kapan saja

Konversi Kode
Kode yang ingin dikonversi

Loading.....
X
Run
Klik tombol Run, untuk menampilkan hasil editing, atau menyegarkan editor.