Cara Membuat Slideshow Dengan CSS3
Cara-Membuat-Slideshow-Dengan-CSS3-Nyekrip

Tutorial cara membuat slideshow sudah ada sejak lama, dan banyak website sudah memiliki fitur ini. Kebanyakan tutorial-nya menggunakan JavaScript sebagai teknik utama, semenjak ada CSS3 kita bisa membuat hal serupa tanpa JavaScript dan tanpa ketergantungan pada framework atau plugin. Karena hal itu maka disini nyekrip share tutorial cara membuat slideshow dengan css3.

Prinsip-prinsip dalam pembuatan slider sangat sederhana: elemen yang digunakan pada halaman web terdiri hanya dari tag <div> dan tag <image>. Tag <div> digunakan untuk membungkus dan memberi  efek pada daftar gambar yang akan dibuat slideshow, sedangkan tag <image> sendiri berfungsi sebagai tempat alamat gambar itu sendiri.

Hasil running akan seperti gambar berikut:

Tampilan dari slideshow -Nyekrip

Tampilan dari slideshow

Untuk Download Skrip Cara Membuat Slideshow Dengan CSS3, atau anda ingin mengedit sekaligus menjalankannya, silahkan klik tombol “Run Skrip” dibawah ini.

Run Skrip

Untuk membuat Slideshow Dengan CSS3, silahkan ikuti langkah-langkah dibawah ini.

Membuat Slideshow Dengan CSS3: File HTML

Oke, langsung saja kita buat tag <div> dan kita beri class slidercontainer, dalam tag <div> tersebut kita buat elemen div lagi dan kita beri class css3slider. Didalam tag <div> class css3slider, kita berikan daftar gambar yang akan dibuat sebagai slideshow, sehingga skrip kita seperti berikut:

<div id=slidercontainer>
  <div id=css3slider>
    <img src="http://www.nyekrip.com/demo/cara-membuat-slideshow-dengan-css3/square-tailed-kite.jpg" alt="Square-tailed kite">
    <img src="http://www.nyekrip.com/demo/cara-membuat-slideshow-dengan-css3/white-tailed-kite.jpg" alt="White-tailed kite">
    <img src="http://www.nyekrip.com/demo/cara-membuat-slideshow-dengan-css3/hawk.jpg" alt="Hawk" title="Hawk">
    <img src="http://www.nyekrip.com/demo/cara-membuat-slideshow-dengan-css3/osprey.jpg" alt="Osprey">
    <img src="http://www.nyekrip.com/demo/cara-membuat-slideshow-dengan-css3/square-tailed-kite.jpg" alt="Square-tailed kite">
  </div>
</div>

Yang harus diperhatikan adalah bahwa semua ukuran gambar harus sama 768px x 341px, dan nantinya kita akan mengatur ukuran container sama dengan ukuran gambar.

Karena kita akan menggunakan eksternal CSS, maka kita harus melengkapi file HTML diatas dengan Struktur Umum Halaman HTML, jika anda belum tahu apa itu Struktur Umum Halaman HTML, silahkan anda membaca tutorial “Pengenalan HTML: Struktur Umum Part 1“. Setelah kita melengkapinya, maka skrip akhir kita menjadi seperti dibawah ini:

<!doctype html>
 
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Judul Halaman Saya</title>
    <link rel="stylesheet" type="text/css" href="style.css" media="all" />
  </head>
<body>
<div id=slidercontainer>
  <div id=css3slider>
    <img src="http://www.nyekrip.com/demo/cara-membuat-slideshow-dengan-css3/square-tailed-kite.jpg" alt="Square-tailed kite">
    <img src="http://www.nyekrip.com/demo/cara-membuat-slideshow-dengan-css3/white-tailed-kite.jpg" alt="White-tailed kite">
    <img src="http://www.nyekrip.com/demo/cara-membuat-slideshow-dengan-css3/hawk.jpg" alt="Hawk" title="Hawk">
    <img src="http://www.nyekrip.com/demo/cara-membuat-slideshow-dengan-css3/osprey.jpg" alt="Osprey">
    <img src="http://www.nyekrip.com/demo/cara-membuat-slideshow-dengan-css3/square-tailed-kite.jpg" alt="Square-tailed kite">
  </div>
</div>
</body>
</html>

Oke, simpan file HTML diatas dengan nama “Index.html”. Perhatikan skrip diatas, pada tag <link> kita telah menentukan untuk menggunakan file CSS “Style.css” dan letak dari file tersebut satu folder sama file “Index.html”. Untuk gambar anda bisa mendownload gambar tersebut didalam tutorial ini.

Membuat Slideshow Dengan CSS3: File CSS

Sekarang saatnya untuk membuat file CSS, pertama kita buka file “Style.css” dan ketikkan skrip berikut ini:

body { background: #000; } 

#slidercontainer { 
  position: relative; 
  overflow: hidden; 
  background: #000 
}
#slidercontainer { 
  width: 768px;
  height: 341px; 
}

#css3slider img { 
  width: 768px;
  height: 341px; 
  float: left;
}

#css3slider { 
  position: absolute; 
  width:3900px;  
  -webkit-animation-name:slider;
  -webkit-animation-duration:15s;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count:infinite;
  -moz-animation-name:slider;
  -moz-animation-duration:15s;
  -moz-animation-timing-function: ease-in-out;
  -moz-animation-iteration-count:infinite;
  -o-animation-name:slider;
  -o-animation-duration:15s;
  -o-animation-timing-function: ease-in-out;
  -o-animation-iteration-count:infinite;
  animation-name:slider;
  animation-duration:15s;
  animation-timing-function: ease-in-out;
  animation-iteration-count:infinite;
}

Pada skrip CSS diatas, baris body untuk mengatur agar halaman web memiliki background bewarna hitam.

Pada baris selanjutnya, yaitu baris #slidercontainer digunakan untuk mengatur agar gambar tidak tampil semuanya secara horizontal, dan sekaligus untuk mengatur lebar dan tinggi dari kontainer gambar. Perhatikan ukuran yang dibuat untuk kontainer, ukuran tersebut persis dengan ukuran gambar yang akan dibuat slideshow.

Untuk baris selanjutnya, baris pada #css3slider berfungsi sebagai pengatur ukuran lebar, kita tentukan nilai dari lebar menjadi 3900px, karena ukuran tersebut dapat menampung seluruh ukuran lebar gambar. Pada baris tersebut, kita juga menentukan segala atribut dan nilai dari animation, dalam animation tersebut nantinya kita akan atur agar gambar kita dimunculkan secara bergantian. Teknik yang digunakan adalah teknik CSS3 keyframed animation.

Membuat CSS3 keyframed animation

Saatnya kita untuk membuat CSS3 keyframed animation, ketikkan skrip berikut ini untuk menjalankan animation:

@-webkit-keyframes slider {     
  0% { left: 0; opacity: 0; }     
  2% { opacity: 1; }     
  20% { left: 0; opacity: 1; }     
  21% { opacity: 0; }     
  24% { opacity: 0; }     
  25% { left: -768px; opacity: 1; }       
  45% { left: -768px; opacity: 1; }     
  46% { opacity: 0; }     
  48% { opacity: 0; }     
  50% { left: -1536px; opacity: 1; }     
  70% { left: -1536px; opacity: 1; }     
  72% { opacity: 0; }     
  74% { opacity: 0; }    
  75% { left: -2304px; opacity: 1; }   	
  95% { left: -2304px; opacity: 1; }   	
  97%  { left: -2304px; opacity: 0;}   	
  100% { left: 0; opacity: 0; }
} 

@-moz-keyframes slider {     
  0% { left: 0; opacity: 0; }     
  2% { opacity: 1; }     
  20% { left: 0; opacity: 1; }     
  21% { opacity: 0; }     
  24% { opacity: 0; }     
  25% { left: -768px; opacity: 1; }       
  45% { left: -768px; opacity: 1; }     
  46% { opacity: 0; }     
  48% { opacity: 0; }     
  50% { left: -1536px; opacity: 1; }     
  70% { left: -1536px; opacity: 1; }     
  72% { opacity: 0; }     
  74% { opacity: 0; }    
  75% { left: -2304px; opacity: 1; }   	
  95% { left: -2304px; opacity: 1; }   	
  97%  { left: -2304px; opacity: 0;}   	
  100% { left: 0; opacity: 0; }
} 

@-o-keyframes slider {     
  0% { left: 0; opacity: 0; }     
  2% { opacity: 1; }     
  20% { left: 0; opacity: 1; }     
  21% { opacity: 0; }     
  24% { opacity: 0; }     
  25% { left: -768px; opacity: 1; }     
  45% { left: -768px; opacity: 1; }     
  46% { opacity: 0; }     
  48% { opacity: 0; }     
  50% { left: -1536px; opacity: 1; }     
  70% { left: -1536px; opacity: 1; }     
  72% { opacity: 0; }     
  74% { opacity: 0; }    
  75% { left: -2304px; opacity: 1; }   	
  95% { left: -2304px; opacity: 1; }   	
  97%  { left: -2304px; opacity: 0; }   	
  100% { left: 0; opacity: 0; }
} 

@keyframes slider {     
  0% { left: 0; opacity: 0; }     
  2% { opacity: 1; }     
  20% { left: 0; opacity: 1; }     
  21% { opacity: 0; }     
  24% { opacity: 0; }     
  25% { left: -768px; opacity: 1; }     
  45% { left: -768px; opacity: 1; }     
  46% { opacity: 0; }     
  48% { opacity: 0; }     
  50% { left: -1536px; opacity: 1; }     
  70% { left: -1536px; opacity: 1; }     
  72% { opacity: 0; }     
  74% { opacity: 0; }    
  75% { left: -2304px; opacity: 1; }   	
  95% { left: -2304px; opacity: 1; }   	
  97%  { left: -2304px; opacity: 0; }   	
  100% { left: 0; opacity: 0; }
}

Jangan kaget dulu karena melihat skrip CSS diatas yang begitu panjang, sebenarnya skrip diatas digunakan berulang-ulang supaya skrip berjalan di semua browser (Vendor Prefixes). Skrip diatas digunakan untuk menjalankan animation sehingga gambar tampil sesuai urutan yang kita atur sebelumnya.

Skrip Fitur Pause

Untuk memberikan fitur Pause, tambahkan skrip CSS dibawah ini:

#css3slider:hover { 
  -webkit-animation-play-state:paused; 
  -moz-animation-play-state:paused; 
  -o-animation-play-state:paused; 
  animation-play-state:paused; }
}

#css3slider img { 
  float: right; 
}

#slidercontainer:after { 
  content: "❚❚"; 
  font-size: 150px; 
  position: absolute; 
  z-index: 12; 
  color: rgba(255,255,255, 0); 
  left: 300px; top: 80px; 
  -webkit-transition: 1s all ease-in-out; 
  -ms-transition: 1s all ease-in-out; 
  -moz-transition: 1s all ease-in-out; 
  -o-transition: 1s all ease-in-out; 
  transition: 1s all ease-in-out; 
}

#slidercontainer:hover:after { 
  color: rgba(255,255,255, 0.6);  
}

Pada baris #css3slider:hover, isi dari skrip tersebut terdapat value paused yang gunanya untuk memberhentikan animation secara sementara, yang mana akan dilakukan ketika gambar disorot/hover.

Pada Baris #slidercontainer:after, dalam id ini kita tambahkan simbol jeda/pause.

Demikian tutorial Cara Membuat Slideshow Dengan CSS3, semoga bisa menambah daya kreatifitas kita dalam berkarya. Dengan hanya mengandalkan CSS3 maka loading blog akan terasa lebih cepat dibandingkan dengan menggunakan javascript, selain loading yang cepat web kita juga terlihat lebih manis dengan adanya slideshow.

Happy Nyekrip!

Tagged:

About The Author

Suka ingin berbagi pengetahuan dan pengalaman nyekrip program yang dituangkan dalam web ini dan sekarang sedang fokus mengembangkan Web Tutorial berbahasa Indonesia. Nyekrip - Web Tutorial Indonesia

Comments

    1. Reply
      Admin Article Author

      Teknik ini menggunakan CSS3, setahu saya perbedaan CSS3 dengan pendahulunya hanyalah masalah penambahan fitur dan support dari browser yang terbaru (terutama IE)… karena beberapa teknik diatas hanya didapat dalam CSS3, maka hanya berlaku untuk CSS3… Semoga membantu :)

    1. Reply
      Admin Article Author

      Kalau yang dimaksud itu blog blogspot, bisa langsung upload di akun picasa, kalau blog wordpress tinggal upload gambar seperti biasa, yang penting jangan lupa ambil link gambar. :)

    1. Reply
      Admin Article Author

      Dalam pembahasan artikel disini hanyalah sebatas di skrip HTML dan CSS dasar, jika ingin di-aplikasikan di wordpress anda perlu cara tambahan, bisa dibuat plugin atau langsung include. Banyak kok tersedia plugin wordpress gratis tentang slideshow, ini contohnya https://wordpress.org/plugins/ml-slider/

  6. Reply
    andika yuda

    mas kalo ukuran di css nya di ganti knapa gambar nya error ya?

    ukuran yg di ganti cuma width dari 768 di jadiin 1350
    pas di run, gambar pertama dan kedua bisa jalan, cuma pas mau ke gambar ke 3 malah nge looping di gambar ke 2~

    jd bingung -.-

  7. Reply
    andika yuda

    di halaman nyekrip yuk uda dicoba, hasilnya pun sama.

    -resize gambar juga uda gan, ukuran gambar tak sesuain ukuran di css nya jd 1350. tp ttep eror kaya sebelumnya

  8. Reply
    andika yuda

    eh tp, kalo mau resize ukuran nya jd 1350, apa aja yang harus di replace di css nya gan? smua yang nilainya 768 kah?

    thanks sbelumnya gan

  17. Reply
    yudha

    gan punya saya kok pas di gambar kedua kepotong ya gan jadi pas slide kedua separuh gambar pertama separuh gambar ke dua

  19. Reply
    gandi

    kalau gambar yang ingin dibuat slideshow sekitar 10 gambar bagaimana ya gan? dimana skrip yang harus dirubah atau di tambahkan? saya sudah nyoba di imagesrc nya saya tambahin link dari 10 gambar tersebut tapi yang muncul ternyata tetap cuma 4 gambar. trims banyak atas jawabannya.

    1. Reply
      Admin Article Author

      tidak cukup dengan hanya menambah gambar, setting terletak pada :

      0% { left: 0; opacity: 0; }
      2% { opacity: 1; }
      20% { left: 0; opacity: 1; }
      21% { opacity: 0; }
      24% { opacity: 0; }
      25% { left: -768px; opacity: 1; }
      45% { left: -768px; opacity: 1; }
      46% { opacity: 0; }
      48% { opacity: 0; }
      50% { left: -1536px; opacity: 1; }
      70% { left: -1536px; opacity: 1; }
      72% { opacity: 0; }
      74% { opacity: 0; }
      75% { left: -2304px; opacity: 1; }
      95% { left: -2304px; opacity: 1; }
      97% { left: -2304px; opacity: 0;}
      100% { left: 0; opacity: 0; }
      perhatikan ada tiga kali pergeseran, jika ada 10 gambar, maka harus ada 9 pergeseran.

  20. Reply
    rahmad

    min, saya mencoba merubah ukuran lebar menjadi
    #slidercontainer
    {
    width: 100%;
    height: 150px;
    }

    #css3slider img {
    width: 150px;
    height: 150px;
    float: none;
    #css3slider {
    position: absolute;
    width:100%;
    }
    trus bagaimana cara mengganti persentase keyframe slidernya?
    saya ingin menggeser per 1 gambar

  21. Reply
    Android Maker

    Wah bagus gan tutorialnya….
    Memang untuk pembuatan image slider ada banyak sekali alternatifnya :
    Beberapa diataranya yang sering digunakan : Bootstrap carousel, coinslider, wowslider, flexslider, owcarousel

  22. Reply
    ayu

    permisi mas, saya coba terapkan ini di css yang sudah saya pakai sebelumnya tapi kenapa yg ke load cuma gambar 1 aja ya? dan juga tidak bisa slide. mohon dibalas ya mas, terimakasih

  27. Reply
    selfi

    min, kalo saya mau bikin gambar slidernya di perkecil dan posisinya di tengah gimana ya? saya sudah memperkecil slider tapi posisinya di kiri, biar ketengah apa yang harus di rubah?

  28. Reply
    selfi

    satu lagi mau tanya itu kan di script body gambar ada 5 ya, kenapa ketika di run yang nampak hanya 4 gambar? mohon pencerahannya

Tinggalkan Balasan

Alamat surel Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

This site uses Akismet to reduce spam. Learn how your comment data is processed.