CSS3 Slideshow Tanpa Loncatan Halaman

Tabel Konten
  1. Versi Lengkap 
    1. HTML 
    2. CSS 
Pure CSS3 Slideshow Without Page Jump

Saya sudah sangat sering melihat beberapa eksperimen tentang slideshow dengan CSS3 yang memanfaatkan selektor :target untuk mengakses setiap slide. Sehingga jika salah satu tombol navigasi diklik, maka salah satu slide dengan ID yang sesuai dengan #hash pada URL akan ditampilkan:

#css3-slider img {
  display:none;
}

#css3-slider img:target {
  display:block;
}

Namun sayangnya CSS :target akan membuat halaman meloncat. Ini adalah sikap normal konsep fragment identifier halaman » Tentang CSS :target

Ada satu cara lain untuk mengakses setiap slide tanpa menyebabkan loncatan halaman, yaitu dengan menggunakan hack elemen input bertipe checkbox atau radio. Mereka bisa dimanfaatkan karena mereka memiliki selektor pseudo-class :checked. Dan tentunya, elemen input tidak akan menyebabkan loncatan halaman seperti halnya tautan. Sedangkan untuk mengakses setiap slide, kita akan menggunakan selektor + atau ~ untuk mengakses elemen yang terletak tepat di sebelah elemen yang ditandai/dicentang (:checked).

Beginilah konsep yang Saya gunakan: Kita menggunakan elemen <label> untuk mengeksekusi elemen <input type="radio">, sehingga kita bisa mengatur tampilannya dan bisa melupakan radio yang tidak pernah bisa diubah tampilannya menggunakan CSS (Setidaknya untuk saat ini. Masa depan, siapa yang tahu?) Kita menggunakan radio hanya sebagai penyimpan aksi checked atau unchecked untuk mengakses setiap slide secara bergantian:

#css3-slider img {
  display:none;
}

#css3-slider input:checked + img {
  display:block;
}
<input type="radio" name="num" id="s1" />
<label for="s1">1</label>
<img src="slide1.png" />

Versi Lengkap 

Berikut ini adalah versi lengkap dari konsep yang Saya nyatakan di atas untuk mengatasi masalah loncatan halaman karena CSS :target. Setelah ini Anda tidak lagi memerlukan CSS :target, yang Anda perlukan hanya radio. Agak sulit untuk dijelaskan secara tertulis, Anda hanya bisa mengetahui cara kerjanya dengan cara mempelajari kode di bawah ini setelah Anda mengerti tentang Adjacent Sibling Selectors:

HTML 

<ul id='css3-slider'>
    <li>
        <input type='radio' id='s1' name='num' checked='true' />
        <label for='s1'>1</label>
        <a href='/'>
            <img src='slide-1.jpg' />
            <span>Why do you put the egg yolks on your eyes?</span>
        </a>
    </li>
    <li>
        <input type='radio' id='s2' name='num' />
        <label for='s2'>2</label>
        <a href='/'>
            <img src='slide-2.jpg' />
            <span>How can you look ahead if your eyes are on the side?</span>
        </a>
    </li>
    <li>
        <input type='radio' id='s3' name='num' />
        <label for='s3'>3</label>
        <a href='/'>
            <img src='slide-3.jpg' />
            <span>Keep praying to God</span>
        </a>
    </li>
    <li>
        <input type='radio' id='s4' name='num' />
        <label for='s4'>4</label>
        <a href='/'>
            <img src='slide-4.jpg' />
            <span>Stay relaxed</span>
        </a>
    </li>
    <li>
        <input type='radio' id='s5' name='num' />
        <label for='s5'>5</label>
        <a href='/'>
            <img src='slide-5.jpg' />
            <span>And you will forever be relaxed</span>
        </a>
    </li>
</ul>

CSS 

/*
 * Pure CSS3 Slideshow Without Page Jump by Taufik Nurrohman
 * 26 April 2012
 * http://dte-feed.blogspot.com
 */

/* General */
#css3-slider {
  margin:30px auto;
  padding:0px 0px;
  width:448px;
  height:286px;
  position:relative;
}

#css3-slider li {
  list-style:none;
  margin:0px 0px;
  padding:0px 0px;
}

/* Navigation */
#css3-slider li input + label {
  position:absolute;
  bottom:5px;
  left:10px;
  z-index:999;
  font:bold 11px/16px Arial,Sans-Serif;
  background-color:black;
  color:white;
  padding:0px 0px;
  width:16px;
  text-align:center;
  cursor:pointer;
}

#css3-slider li:nth-child(2) label {left:28px;}
#css3-slider li:nth-child(3) label {left:46px;}
#css3-slider li:nth-child(4) label {left:64px;}
#css3-slider li:nth-child(5) label {left:82px;}

/* Images */
#css3-slider li img {
  border:none;
  outline:none;
  position:absolute;
  top:50%;
  left:50%;
  width:0px;
  height:0px;
  visibility:hidden;
  opacity:0;
  -webkit-transition:all 2s ease-in-out;
  -moz-transition:all 2s ease-in-out;
  -ms-transition:all 2s ease-in-out;
  -o-transition:all 2s ease-in-out;
  transition:all 2s ease-in-out;
  -webkit-transform:rotate(0deg) scale(0);
  -moz-transform:rotate(0deg) scale(0);
  -ms-transform:rotate(0deg) scale(0);
  -o-transform:rotate(0deg) scale(0);
  transform:rotate(0deg) scale(0);
}

/* Captions */
#css3-slider a {
  text-decoration:none !important;
}

#css3-slider li a span {
  display:block;
  position:absolute;
  right:0px;
  bottom:0px;
  left:0px;
  background-color:rgba(0,0,0,0.8);
  font:normal 11px/26px Arial,Sans-Serif;
  color:white;
  padding:0px 10px;
  text-align:right;
  opacity:0;
  viibility:hidden;
  -webkit-transition:all 2s ease-in-out;
  -moz-transition:all 2s ease-in-out;
  -ms-transition:all 2s ease-in-out;
  -o-transition:all 2s ease-in-out;
  transition:all 2s ease-in-out;
}

/* Active navigation */
#css3-slider li input:checked + label {
  background-color:#39f;
  color:white;
}

/* Show the image with transition */
#css3-slider li input:checked ~ img,
#css3-slider li input:checked ~ a img {
  top:0%;
  left:0%;
  width:448px;
  height:286px;
  visibility:visible;
  -webkit-transform:rotate(720deg) scale(1);
  -moz-transform:rotate(720deg) scale(1);
  -ms-transform:rotate(720deg) scale(1);
  -o-transform:rotate(720deg) scale(1);
  transform:rotate(720deg) scale(1);
  opacity:1;
  z-index:99;
}

/* Show the caption with fade effect */
#css3-slider li input:checked ~ a span {
  opacity:1;
  z-index:100;
}

/* Hide the radio */
#css3-slider input {
  display:none;
}

Lihat Demo

Slideshow ini bekerja pada semua peramban yang memiliki prefiks CSS3 yang tercantum di atas (FF, Opera, Chrome, Safari dan IE). Masih tetap bisa bekerja pada IE9 dengan fallback yang baik (slide berpindah tanpa efek transisi). Tampilan terbaik pada Opera 11.62

29 Komentar

  • Unknown

    aduh apa si kue mas, ? q ra maksud, hehe. .
    Janen y mas, bloge sampean kan halaman home kan tampilan slide loh, apik.
    Janen q kpgen ky gwe,
    Ganu pas sampean ngmg, sing Imageflow.
    Emang dadi di pasang nang h0mepage mas tapi hompage defaultku esh ana. .
    Aduh jan,
    Prwe y mas, ? :'(

  • Taufik Nurrohman

  • Beben Koben

    ternyata begini caranya...ic ic ic
    jadi paham kenapa skrg banyak yg pakek input & label (sok ngerti saja) :D

  • Unknown

    Patut di coba dulu nich di blog khusus buat ngoprek-ngoprek ntar kalau udah sip baru diterapkan. terimakasih yach om udah share, di tunggu yang berikutnya...

  • Unknown

    Mas jika saya mau menabahkan slidingnya misalnya menjadi 30 slide berarti saya harus menambah css dan htmlnya, tetapi kok tidak bisa bekerja bagai mana solusinya msa..??

  • Taufik Nurrohman

    @Suwardi Unggit Setiap elemen radio memiliki ID masing-masing, itu digunakan untuk memastikan agar elemen <label> dapat mengakses elemen input yang sesuai:

    <input type="radio" id="s1" name="num" />
    <label for="s1">1</label>
    <input type="radio" id="s2" name="num" />
    <label for="s2">2</label>
    <input type="radio" id="s3" name="num" />
    <label for="s3">3</label>

    Selain itu, karena setiap navigasi menggunakan posisi absolute, maka kamu juga harus mengatur setiap item navigasi satu per satu secara manual (Peningkatan nilai left pada setiap unit navigasi sebesar 18px) :W

    ...
    #css3-slider li:nth-child(6) label {left:100px;}
    #css3-slider li:nth-child(7) label {left:118px;}
    #css3-slider li:nth-child(8) label {left:136px;}
    #css3-slider li:nth-child(9) label {left:154px;}

    Demo: 9 Slide

  • Unknown

    @Taufik NurrohmanTerima kasih mas sekarang aku sudah paham dengan kesalahannya

  • dwix ciolist™

    boss ?
    cara membuatnya gimna bos ? Tutorialnya mohon di pandu.thx

  • Unknown

    Mas taufik,
    Saya punya ide, apa bisa gambar tertentu di dalam postingan bisa di buat slide show, tapi ini untuk postingan.
    Sebagai c0nt0h mas, kan blog q kan tutorial komputer, q pgen screenshot aku di bikin slide,

    Kira2, bisa ga ya mas taufik,

    Mas taufik ahlinya kan, ? :-)

  • Taufik Nurrohman

    @trii waluyo Beberapa tutorial slideshow di sini juga merupakan tutorial slideshow otomatis yang akan mengambil gambar dari setiap posting. Versi slideshow paling sederhana dimulai dari slideshow S3Slider: Slideshow Otomatis Blogger dengan S3Slider

  • Unknown

    @dwix ciolist™ ^_^ Ribet dan mumet yach, sama saya juga ndak mudeng ^_^

  • Unknown

    S3slider dah saya baca mas, malah slidershow tersebut buat Recent Post,
    Q penginya mas, di postingan A, ada beberapa gambar (tidak semua gambar) misalnya screenshoot mau tak buat slideshow,,itu caranya gmana, ? Kalau s3slider itu slider buat recent post, kalau buat gambar tertentu bisa ga ya mas, ?

    Jadi tidak semua gambar dipostingan pengin tak jadiin slideshow,
    Maaf ya mas,
    Q goleh takon kaya gue.

    Q rep takon sapa maning selaine mas taufik, guruku be ra ana sing teyeng :'(

    Njaluk tlung ya mas, :-)

  • Taufik Nurrohman

    @trii waluyo Kalau begitu pakai saja kerangka slideshow yang masih mentah, setiap elemen gambar diisi dengan gambar asli yang sudah diunggah. Itu namanya cara manual, seperti slideshow di halaman muka blog ini.

  • Unknown

    Lah kerangka slideshow yg masih apa mas, ?

    Menurut saya si, taruh kode css untuk slideshow terus didalam postingan pake kode pemanggil, ?
    Kira-kira kaya gto ga mas,

    Nah, slideshow mentahnya q ga tahu kodenya, :'(

  • Taufik Nurrohman

    @trii waluyo Hehe... kalau itu sih hasil download dari situs developer slideshow. Cari saja di Google: JQuery Slideshow
    Nanti biasanya kita akan dibawa masuk ke situs pembuat slideshow, dan saat didownload kemudian diekstrak, isinya sudah ada semua dimulai dari kerangka sampai CSS. Untuk saat-saat awal memang masih bingung, tapi nanti lama-lama terbiasa dengan sendirinya.

  • Anonim

    Em mas nie kok waktu aku klik nomernya, kok gambarnya ndak ganti? :)

  • Taufik Nurrohman

    @The7Bloggers Update dulu browsermu mas... hehe :p

  • agent 21

    :( mas, kan navigasinya 1 2 3 4 5 6 7 dst..
    nah aku mau ganti seperti ini
    prev 1 2 3 .. 7 .. 50 next
    karena gambarnya banyak misalkan 50 gambar,
    slide aktif tengah halaman 7. kira2 bisa g ya... q bingung nih
    sukses buat blognya, keren :-bd

  • Taufik Nurrohman

    @agent 21 Sayangnya tidak bisa mas, untuk saat ini CSS3 tidak sehebat JavaScript.

  • Unknown

    Mas Taufik mau nanya lagi nih..
    bisa tidak slideshow seperti blog ini:
    http://hostingpress-pbtemplate.blogspot.com/
    di buat hanya dengan CSS3??

    saya coba buat dengan merubah CSS3 Fluid Parallax dari Tympanus: http://tympanus.net/codrops/2012/04/30/fluid-css3-slideshow-with-parallax-effect/
    Tapi cuma sampai segini...
    http://jsfiddle.net/satankmkr/HsX4r/embedded/result/
    blum bisa auto slidenya..
    klo bisa tolong bantuannya Mas..
    ^_^

  • Taufik Nurrohman

    Sulit menciptakan slideshow otomatis dengan CSS3, karena setiap langkah animasi juga sangat tergantung dengan jumlah slide. Setiap satu putaran animasi dihitung sebagai 100%, dan jumlah langkah + kecepatan ditentukan berdasarkan jumlah slide:

    @keyframes slide {
    0% {left:0}
    25% {left:-300px}
    50% {left:-600px}
    75% {left:-900px}
    100% {left:0}
    }
    animation:slide 4s ease-in-out infinite;

    Itu belum termasuk delay ⇒ DEMO

  • Unknown

    Oh. jdi gitu yah mas..
    makasih atas Jawabannya..

  • Unknown

    mas , tolong jelaskan cara membuat slideshow ini ready di blog , saya ngk ngerti mas .

  • Unknown

    Nanti akan saya coba pelajari sejauh apa efek ini berguna bagi blog saya. terima kasih.

  • eGiVa

    Sudah dicoba.
    Mantap brooo...

  • PEMUDA KELANA

    thanks mas, slidernya jalan, tapi gimana ya caranya agar tampilannya slidernya ditengah layar seperti versi demox, karena tampilan slider saya berada diposisi left. sebagai info, saya gunakan table untuk menampilkan slidernya, dan saya sudah tengahkan, tapi tidak mau ketengah tampilannya.

  • Robusta dampit

    Terima kasih gan. sangat membantu :-)

  • Kana arta

    mas kalau mau di bikin otamatis pindah slide bisa gk ?
    tanpa harus di klik gitu

  • Unknown

    Gan, mau tanya kalau imagenya biar FULL gimana ya jadi bisa diperbesar, ukuran sebenarnya.. full layar

Komentar telah ditutup.