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.

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:

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:

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:

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:

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:

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!

About The Author

Comments

    1. 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. 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. 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/

  1. 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 -.-

  2. 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

  3. 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

  4. yudha

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

  5. 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. 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.

  6. 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

  7. 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

  8. 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

Tinggalkan Balasan

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