Mecha versi 2.6.4 sudah dirilis!

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, ? :'(

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

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, ? :-)

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? :)

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

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.

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.