CSS3 Slideshow Tanpa Loncatan Halaman

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