6.4.15
9
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:


Image Slider


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>

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul= Image Slider Effect With CSS Only
Ditulis oleh= Devy
Rating Blog 5 dari 5
Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip (meng-Copy), baik itu sebagian atau keseluruhan isi dari artikel ini harap menyertakan link dofollow ke >>
= TERIMA KASIH =

9 komentar

  1. keren mba dengan tanpa javascript gak bikin berat blog

    BalasHapus
  2. Balasan
    1. hmm...ini yang keren gambar-gambarnya atau efeknya ya mas wahab, hehe..!

      Hapus
  3. efeknya bagus mba, bisa ganti-ganti foto..masalah kode-kode mba devy memang selalu tau deh..

    BalasHapus
    Balasan
    1. fotonya bukan bisa ganti-ganti mas, tetapi slider efek dengan gerak transisi, gallery gambar yang memuat banyak gambar dan akan ditampilkan dalam 1 frame album, dan untuk melihat gambar selanjutnya dengan efek slide.

      kalau untuk efek gambar yang bisa berganti-ganti contohnya seperti ini:

      Efek Keyframes Show Pada Gambar Hover

      Hapus
    2. oh iya mba bagus, tapi gantinya terlalu cepat.kalo penjual pakaian mungkin harus tau efek itu yah..

      Hapus
  4. Ini yang saya cari-cari...nanti dicoba, ah...

    BalasHapus
  5. keren mbak Devi, ini bisa jadi alternatif buat yg biasa bikin tutorial dengan gambar..
    ijin simpan dan obrak-abrik css ya mbak :)

    BalasHapus
  6. wah keren hasilnya ya mbak, soalnya gambar yang muncul harus di klik dulu, ini dia yang saya cari :D

    BalasHapus

  • Design
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JQuery
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • CSS
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • HTML
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JavaScript
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK