Saya sudah sangat sering melihat beberapa eksperimen perihal slideshow dengan CSS3 yang memanfaatkan selektor :target untuk mengakses setiap slide. Sehingga bila 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 menciptakan halaman meloncat. Ini yakni perilaku normal konsep fragment identifier halaman » Tentang CSS :target
Ada satu cara lain untuk mengakses setiap slide tanpa menjadikan loncatan halaman, yaitu dengan memakai hack elemen input bertipe checkbox atau radio. Mereka dapat dimanfaatkan alasannya mereka mempunyai selektor pseudo-class :checked. Dan tentunya, elemen input tidak akan menjadikan loncatan halaman menyerupai halnya tautan. Sedangkan untuk mengakses setiap slide, kita akan memakai selektor + atau untuk mengakses elemen yang terletak sempurna di sebelah elemen yang ditandai/dicentang (:checked).
Beginilah konsep yang Saya gunakan: Kita memakai elemen <label> untuk mengeksekusi elemen <input type="radio">, sehingga kita dapat mengatur tampilannya dan dapat melupakan radio yang tidak pernah dapat diubah tampilannya memakai CSS (Setidaknya untuk dikala ini. Masa depan, siapa yang tahu?) Kita memakai radio hanya sebagai penyimpan agresi 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 yakni versi lengkap dari konsep yang Saya nyatakan di atas untuk mengatasi duduk perkara loncatan halaman alasannya CSS :target. Setelah ini Anda tidak lagi memerlukan CSS :target, yang Anda perlukan hanya radio. Agak sulit untuk dijelaskan secara tertulis, Anda hanya dapat mengetahui cara kerjanya dengan cara mempelajari isyarat di bawah ini sesudah Anda mengerti perihal 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; }Slideshow ini bekerja pada semua peramban yang mempunyai prefiks CSS3 yang tercantum di atas (FF, Opera, Chrome, Safari dan IE). Masih tetap dapat bekerja pada IE9 dengan fallback yang baik (slide berpindah tanpa pengaruh transisi). Tampilan terbaik pada Opera 11.62