Image Slider Effect With CSS Only

Membuat Efek SlideShow Hanya Dengan CSS

Image Slider Effect With CSS Only - Sebagian orang akan berpikir jika untuk membuat sebuah tampilan gallery gambar yang keren dengan efek slider/slideshow hanya bisa diterapkan dengan penggunaan perintah javascript, namun dengan menyusun fungsi-fungsi element CSS pengaturan seperti: label-link, radio type figure, hover checked pada sebuah objek target, maka Anda sudah bisa membuat gallery gambar efek slider hanya dengan menggunakan CSS. Pekerjaannya pun cukup mudah, sama seperti cara » Membuat Efek Figure According Pada Gambar di pembahasan sebelumnya, hanya bentuk desain tampilan saya modifikasi dengan menambahkan beberapa item seperti:

• Tombol NEXT dan PREV,
• Text deskripsi saat gambar di hover,
• Pagination number (saya ganti dengan thumbanail gambar),
• seperti tampilan gambar berikut:

Efek ini saya bentuk dari sumber ➞ CSS3 Slider Concept Design, lalu saya kembangkan untuk membuat sebuah tampilan Image Slider Effect, tanpa javascript perintah, semuanya hanya dengan CSS element seperti ini:

.slider {display: inline-block;padding: 3px;border: 2px solid #333;height:auto}
.slider input {display: none}
.slider img {vertical-align: top}
.slider label {cursor: pointer}
.slider-window {
 position: relative;margin-bottom: 20px;
 box-shadow:0 15px 10px -10px rgba(0, 0, 0, 0.7),
            0 1px 4px rgba(0, 0, 0, 0.5),
            0 0 40px rgba(0, 0, 0, 0.2) inset}

.slider-window:hover figcaption {opacity: 1}
.slider-window>label {
 position: absolute;top: 0;bottom: 50px;left: 0;
 right: 0;display: none;z-index: 1}

.slider-window, .slider-preview {
 overflow: hidden;-webkit-transition: width 0.3s ease;
 -moz-transition: width 0.3s ease;-o-transition: width 0.3s ease;
 transition: width 0.3s ease}

.slider-images>figure {position: relative;display: inline-block;margin: 0}
.slider-images figcaption {
 position: absolute;padding-top: 13px;height: 40px;bottom: 0;
 left: 0;right: 0;color:#fff;background: rgba(204, 0, 0,.5);
 text-shadow: 1px 1px 3px #333;text-align:center;opacity: 0;
 -webkit-transition: opacity 0.3s ease;-moz-transition: opacity 0.3s ease;
 -o-transition: opacity 0.3s ease;transition: opacity 0.3s ease}

.slider-thumbnails img {
 margin: 0 2.5px 4px 0;box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.7);
 border:1px solid red;opacity: 0.75;-webkit-transition: opacity 0.3s ease;
 -moz-transition: opacity 0.3s ease;-o-transition: opacity 0.3s ease;
 transition: opacity 0.3s ease}

.slider-thumbnails img:hover {opacity: 1}
.slider-images, .slider-thumbnails {
 position: relative;white-space: nowrap;-webkit-transition: left 0.3s ease;
 -moz-transition: left 0.3s ease;-o-transition: left 0.3s ease;
 transition: left 0.3s ease}

/* Prev & Next buttons */
#img01:checked~.slider-window:hover>label[for="img02"],
#img02:checked~.slider-window:hover>label[for="img03"],
#img03:checked~.slider-window:hover>label[for="img04"],
#img04:checked~.slider-window:hover>label[for="img05"],
#img05:checked~.slider-window:hover>label[for="img06"],
#img06:checked~.slider-window:hover>label[for="img07"] {left: 50%;display: block}
#img01:checked~.slider-window:hover>label[for="img02"]:hover:after,
#img02:checked~.slider-window:hover>label[for="img03"]:hover:after,
#img03:checked~.slider-window:hover>label[for="img04"]:hover:after,
#img04:checked~.slider-window:hover>label[for="img05"]:hover:after,
#img05:checked~.slider-window:hover>label[for="img06"]:hover:after,
#img06:checked~.slider-window:hover>label[for="img07"]:hover:after {
 content: "Next";position: absolute;right: 0;color:#fff;
 text-shadow:1px 2px 1px #333;top: 20px;display: block;
 padding: 10px 30px;border-radius: 22px 0 0 22px;background: #39f}

#img02:checked~.slider-window:hover>label[for="img01"],
#img03:checked~.slider-window:hover>label[for="img02"],
#img04:checked~.slider-window:hover>label[for="img03"],
#img05:checked~.slider-window:hover>label[for="img04"],
#img06:checked~.slider-window:hover>label[for="img05"],
#img07:checked~.slider-window:hover>label[for="img06"] {right: 50%;display: block}
#img02:checked~.slider-window:hover>label[for="img01"]:hover:after,
#img03:checked~.slider-window:hover>label[for="img02"]:hover:after,
#img04:checked~.slider-window:hover>label[for="img03"]:hover:after,
#img05:checked~.slider-window:hover>label[for="img04"]:hover:after,
#img06:checked~.slider-window:hover>label[for="img05"]:hover:after,
#img07:checked~.slider-window:hover>label[for="img06"]:hover:after {
 content: "Prev";position: absolute;left: 0;color:#fff;
 text-shadow:1px 2px 1px #333;top: 20px;display: block;
 padding: 10px 30px;border-radius: 0 22px 22px 0;background: #39f}

/* Image */
#img01:checked~.slider-window>.slider-images {left:0px}
#img01:checked~.slider-window, #img01:checked~.slider-preview {width:600px}
#img02:checked~.slider-window>.slider-images {left:-600px}
#img02:checked~.slider-window, #img02:checked~.slider-preview {width:600px}
#img03:checked~.slider-window>.slider-images {left:-1200px}
#img03:checked~.slider-window, #img03:checked~.slider-preview {width:600px}
#img04:checked~.slider-window>.slider-images {left:-1800px}
#img04:checked~.slider-window, #img04:checked~.slider-preview {width:600px}
#img05:checked~.slider-window>.slider-images {left:-2400px}
#img05:checked~.slider-window, #img05:checked~.slider-preview {width:600px}
#img06:checked~.slider-window>.slider-images {left:-3000px}
#img06:checked~.slider-window, #img06:checked~.slider-preview {width:600px}
#img07:checked~.slider-window>.slider-images {left:-3600px}
#img07:checked~.slider-window, #img07:checked~.slider-preview {width:600px}

/* Thumbnails */
#img01:checked~.slider-preview>.slider-thumbnails {left:0px}
#img02:checked~.slider-preview>.slider-thumbnails {left:-120px}
#img03:checked~.slider-preview>.slider-thumbnails {left:-241px}
#img04:checked~.slider-preview>.slider-thumbnails {left:-361px}
#img05:checked~.slider-preview>.slider-thumbnails {left:-482px}
#img06:checked~.slider-preview>.slider-thumbnails {left:-602px}
#img07:checked~.slider-preview>.slider-thumbnails {left:-723px}

Hasilnya :





DEMO SHOW



Pada pengaturan CSS diatas, saya menyisipkan 7 buah gambar sebagai contoh. Selanjutnya Anda tinggal menambahkan beberapa gambar lagi sebagai koleksi sebanyak yang Anda mau, tinggal diatur nilai posisi left per selisih 600px pada gambar, dan 121px pada thumbanail jika dimensi gambar Anda berukuran 600x380 (width:600px dan height:380px).

Tahap akhir tinggal meletakkan URL-Gambar Anda pada pemanggil HTML dibawah ini. Tugas Anda cukup mengganti kode dan teks yang sudah saya beri WARNA sesuai perintah masing-masing area letak. Kode lengkapnya seperti ini:

<form class="slider">
<input type="radio" id="img01" name="img" checked="checked"/>
<input type="radio" id="img02" name="img"/>
<input type="radio" id="img03" name="img"/>
...
// Teruskan sebanyak gambar yang Anda inginkan
    <div class="slider-window">
       <label for="img01"></label>
       <label for="img02"></label>
       <label for="img03"></label>
       // teruskan...
           <div class="slider-images">
       <figure><figcaption>..Deskripsi Image..</figcaption>
          <img src="http://URL-Gambar/pic1.jpg" alt=""/></figure>
       <figure><figcaption>..Deskripsi Image..</figcaption>
          <img src="http://URL-Gambar/pic2.jpg" alt=""/></figure>
       <figure><figcaption>..Deskripsi Image..</figcaption>
          <img src="http://URL-Gambar/pic3.jpg" alt=""/></figure>
       ...
       // Tambahkan lebih banyak gambar lagi...
    </div><!..ending slider-images..>
    </div><!..ending slider-window..>

    <div class="slider-preview">
    <div class="slider-thumbnails">
       <label for="img01">
          // Gunakan url-gambar yang sama dengan (slider-images...)
          <img src="http://URL-Gambar/pic1.jpg" width="116" height="75" alt=""></label>
       <label for="img02">
          <img src="http://URL-Gambar/pic2.jpg" width="116" height="75" alt=""></label>
       <label for="img03">
          <img src="http://URL-Gambar/pic3.jpg" width="116" height="75" alt=""></label>
       ...
       // Tambahkan lebih banyak gambar lagi...
    </div><!..ending slider-thumbanails..>
    </div><!..ending slider-preview..>
</form>