Wednesday, February 4, 2015

Cara Membuat Images Slider Tanpa Jquery

12:52 AM    No comments

Cara Membuat Images Slider Tanpa Jquery

Pada posting sebelumnya saya share 'Cara Memasukkan Playlist Lagu Pada Dokumen HTML', sekarang saya lanjutkan dengan share 'Cara Membuat Images Slider Tanpa Jquery'.

CSS3 Slider adalah sebuah images slideshow yang dibuat menggunakan CSS3 (Cascading Style Sheets) tanpa melibatkan jquery. Dengan tidak digunakannya jquery pada slider ini maka otomatis akan membuat script semakin ringan dan website pun dapat diakses dengan lebih cepat, namun bukan berarti CSS3 Slider lebih baik dari slider yang berbasis jquery karena keduanya mempunyai kekurangan dan kelebihan masing-masing. Salah satu kelebihan slider yang berbasis jquery kita dapat menambahkan jumlah image (file gambar) dengan mudah tanpa mengotak-atik lagi Css dan jquery'nya. Hal ini berbeda apabila menggunakan CSS3 Slider, setiap kali menambahkan jumlah file image (gambar) kita harus meng'edit CSS'nya agar slider dapat bekerja dengan semestinya. Untuk mengatasi hal tersebut kabar baiknya adalah Saya menyertakan contoh CSS3 Slider ini dalam beberapa jumlah gambar yang berbeda mulai dari yang berjumlah 4 s/d 20 gambar yang dapat Anda download pada akhir artikel ini.

Artikel terkait: Cara Membuat Images Slideshow Menggunakan Jquery

Baiklah berikut ini cara membuat CSS3 Slider pada sebuah dokumen HTML.


Langkah-langkah:

Cara Membuat Images Slider Tanpa Jquery:

  1. Jalankan aplikasi text editor seperti 'notepad' untuk menulis sebuah dokumen HTML. Mungkin notepad bawaan windows kurang begitu menarik, solusinya Anda dapat menggunakan aplikasi notepad++ yang dapat Anda download di sini.

  2. Penting! simpan dokumen HTML dengan format 'Nama_File.html' tanpa tanda kutip, kemudian pada 'Save as type' Anda pilih 'All files' agar dokumen yang Anda simpan menjadi dokumen HTML bukan dokumen text biasa.

  3. Sekarang mari kita mulai untuk membuat CSS3 Slider pada dokumen HTML seperti pada kotak di bawah ini.

    4. Script Code:
    <!DOCTYPE html>

    <html>

    <head>
    <title> Cara Membuat Images Slider Tanpa Jquery </title>

    <link rel="stylesheet" type="text/css" href="Url File CSS" />

    </head>

    <body>

    <!-- Begin Slider -->

     Copy dan Paste Script HTML Di Sini 

    <!-- // End Slider -->

    </body>
    </html>

    Keterangan:

    1. Ganti 'Url File CSS' dengan Url tempat Anda menyimpan file CSS. Silahkan lihat script CSS'nya di bawah.
    2. Copy dan Pasti script HTML tepat sesuai instruksi di atas. (Scriptnya sudah disertakan di bawah).

     
    HTML Script:
    <div class="slider">
    <ul>
         <li>
             <a href="Url-Target" target="_blank">
             <img alt="Images 1" src="Url-images-1" />
             </a>

             <div>
                 <h3>Title #1</h3>
                 <p>Content Text...</p>
             </div>
         </li>

         <li>
             <a href="Url-Target" target="_blank">
             <img alt="Images 2" src="Url-images-2" />
             </a>

             <div>
                 <h3>Title #2</h3>
                 <p>Content Text...</p>
             </div>
         </li>

         <li>
             <a href="Url-Target" target="_blank">
             <img alt="Images 3" src="Url-images-3" />
             </a>
             <div>
                 <h3>Title #3</h3>
                 <p>Content Text...</p>
             </div>
         </li>

         <li>
             <a href="Url-Target" target="_blank">
             <img alt="Images 4" src="Url-images-4" />
             </a>
             <div>
                 <h3>Title #4</h3>
                 <p>Content Text...</p>
             </div>
         </li>
    </ul>
    </div>

    Keterangan:

    1. Ganti Url-Target sesuai dengan target halaman web yang Anda kehendaki.
    2. Ganti Url-images sesuai dengan Url tempat Anda menyimpan file gambar.
    3. Ganti Title dengan Title yang Anda kehendaki.
    4. Ganti Content Text... sesuai dengan yang Anda kehendaki.

     
    CSS Script:
    /*---------------------------- Images Slider------------------------------ */

    * {
         margin: 0 auto;
         padding: 0;
    }

    .slider {
         width: 500px; /* important to be same as image width */
         height: 300px; /* important to be same as image height */
         position: relative; /* important */
         overflow: hidden; /* important */
    }

    .slider ul {
         list-style: none;
    }

    /* keyframes #anim_slider */
    @-webkit-keyframes anim_slider {
         0% {
                 opacity: 0;
         }
         6% {
                 opacity: 1;
         }
         24% {
                 opacity: 1;
         }
         30% {
                 opacity: 0;
         }
         100% {
                 opacity: 0;
         }
    }

    @-moz-keyframes anim_slider {
         0% {
                 opacity: 0;
         }
         6% {
                 opacity: 1;
         }
         24% {
                 opacity: 1;
         }
         30% {
                 opacity: 0;
         }
         100% {
                 opacity: 0;
         }
    }

    /* animation */
    .slider ul li {
         position: absolute;
         opacity: 0;
         top: 0;

         -webkit-animation-name: anim_slider;
         -webkit-animation-duration: 24.0s;
         -webkit-animation-timing-function: linear;
         -webkit-animation-iteration-count: infinite;
         -webkit-animation-direction: normal;
         -webkit-animation-delay: 0;
         -webkit-animation-play-state: running;
         -webkit-animation-fill-mode: forwards;

         -moz-animation-name: anim_slider;
         -moz-animation-duration: 24.0s;
         -moz-animation-timing-function: linear;
         -moz-animation-iteration-count: infinite;
         -moz-animation-direction: normal;
         -moz-animation-delay: 0;
         -moz-animation-play-state: running;
         -moz-animation-fill-mode: forwards;
    }

    /* animation delays */
    .slider ul li:nth-child(2), .slider ul li:nth-child(2) div {
         -webkit-animation-delay: 6.0s;
         -moz-animation-delay: 6.0s;
    }
    .slider ul li:nth-child(3), .slider ul li:nth-child(3) div {
         -webkit-animation-delay: 12.0s;
         -moz-animation-delay: 12.0s;
    }
    .slider ul li:nth-child(4), .slider ul li:nth-child(4) div {
         -webkit-animation-delay: 18.0s;
         -moz-animation-delay: 18.0s;
    }

    .slider ul li a {
         text-decoration: none;
         color: #fff;
    }

    .slider ul li p {
         color: #fff;
         font-size: 12px;
         margin-top: -5px;
         padding: 10px 15px;
         filter: alpha(opacity=80);
         -moz-opacity: 0.8;
         -khtml-opacity: 0.8;
         opacity: 0.8;
    } .slider ul li img a {
         display: block;
         float: left;
         width: 100%;
    }

    /* keyframes #captions */
    @-webkit-keyframes captions {
         0% {
                 top: 100%;
                 opacity: 0;
         }
         5% {
                 top: 80%;
                 opacity: 1;
         }
         20% {
                 top: 80%;
                 opacity: 1;
         }
         25% {
                 top: 100%;
                 opacity: 0;
         }
         100% {
                 top: 100%;
                 opacity: 0;
         }
    }

    @-moz-keyframes captions {
         0% {
                 top: 100%;
                 opacity: 0;
         }
         5% {
                 top: 80%;
                 opacity: 1;
         }
         20% {
                 top: 80%;
                 opacity: 1;
         }
         25% {
                 top: 100%;
                 opacity: 0;
         }
         100% {
                 top: 100%;
                 opacity: 0;
         }
    }

    .slider h3 {
         text-transform: uppercase;
         color: #fff;
         font-size: 14px;
         line-height: 14px;
         padding: 10px 15px 0;
         filter: alpha(opacity=80);
         -moz-opacity: 0.8;
         -khtml-opacity: 0.8;
         opacity: 0.8;
    }

    .slider ul li div {
         text-align: center;
         color: #fff;
         background-color: rgba(45, 44, 44, 0.7);
         background: rgba(45, 44, 44, 0.7);
         margin: 0;
         padding: 0;
         position: absolute;
         bottom: 0;
         width: 500px; /* important to be same as image width */
         z-index :999;

    /* css3 animation */
         -webkit-animation-name: captions;
         -webkit-animation-duration: 24.0s;
         -webkit-animation-timing-function: linear;
         -webkit-animation-iteration-count: infinite;
         -webkit-animation-direction: normal;
         -webkit-animation-delay: 0;
         -webkit-animation-play-state: running;
         -webkit-animation-fill-mode: forwards;

         -moz-animation-name: captions;
         -moz-animation-duration: 24.0s;
         -moz-animation-timing-function: linear;
         -moz-animation-iteration-count: infinite;
         -moz-animation-direction: normal;
         -moz-animation-delay: 0;
         -moz-animation-play-state: running;
         -moz-animation-fill-mode: forwards;
    }

    Keterangan:

    1. Ganti value yang berwarna merah width (lebar) dan height (tinggi) sesuai dengan panjang dan lebar gambar Anda.
    2. Copy dan Paste script CSS di atas pada notepad dan simpan dengan nama slider.css, pastikan pada 'Save as type' Anda pilih 'All files' agar dokumen yang Anda simpan menjadi dokumen CSS bukan dokumen text biasa.

     

    Baca juga: Cara Memasukkan Playlist Lagu Pada Dokumen HTML


    Example:
    • Cara Membuat Images Slider Tanpa Jquery

      Title #1

      Content Text...

    • Cara Membuat Images Slider Tanpa Jquery

      Title #2

      Content Text...

    • Cara Membuat Images Slider Tanpa Jquery

      Title #3

      Content Text...

    • Cara Membuat Images Slider Tanpa Jquery

      Title #4

      Content Text...



     

    Silahkan Download Slidernya Pada Link di bawah ini:

Nb. Apabila artikel ini bermanfaat bagi Anda, silahkan bagikan dan beri feed back pada kotak komentar di bawah. Terima Kasih!

Read More
Subscribe to: Posts (Atom)