Rabu, 13 Juli 2016

Membuat Animasi Slideshow dengan Jquery Plugins

Apakah Anda penasaran bagaimana seorang web designer dapat menampilkan gambar besar yang berganti-ganti dalam setiap detiknya?. Anda mungkin berpikir bahwa hal tersebut dapat dilakukan dengan menggunakan Flash atau software animasi lainnya. Dulu memang Flash sangat dibutuhkan sekali untuk membuat website yang interactive, akan tetapi saat ini dengan adanya Jquery Plugin membuat semuanya jadi lebih mudah. Ya, saya tadi baru menjelaskan Jquery Plugins, tapi Jquery Plugins yang mana nih? 
Oke kawan, saya coba jelaskan ya. Animasi gambar yang berganti-ganti dikenal dengan istilah slider. Dan cukup banyak Jquery Plugins yang tersebar di internet yang dapat Anda digunakan. Contohnya ada Flexslider, NivoSlider atau WOW Slider dll. Pada kesempatan kali ini saya akan menggunakan Flexslider sebagai contoh.
Oke kita mulai saja, Animasi slideshow (slider) ini akan kita coba terapkan pada Latihan kita sebelumnya yang membahasa tentang wrapper (yakni pada wrapper.html), boleh Anda save as dan disimpan dengan nama slider.html
Seperti biasanya, sebagai pendukung file-file latihan kita kali ini, saya akan melampirkan download filenya OK
Yang pasti, nanti pada file pendukung Anda akan mendapatkan beberapa folder di dalamnya (css, js dan images). Yang semuanya akan kita gunakan dalam latihan. Langsung kita mulai ya, Anda dapat menambahkan script berikutnya dengan script berikut ini :
slider.html
Script  di  atas berfungsi untuk mengaktifkan fungsi slideshow flexslider Jquery Plugins, lanjutkan dengan  script di bawah ini s.d selesai
    

  1.     <style>
    2. 

  2.         * {
    3. 

  3.             margin:0;
    4. 

  4.             padding:0;
    5. 

  5.         }
    6. 

  6.         #wrapper-top{ 
    7. 

  7.             background:#fff;
    8. 

  8.             height:100px;
    9. 

  9.         }
    10. 

  10.         #wrapper-header{
    11. 

  11.             background:#f9f9f9; 
    12. 

  12.             border-top:1px solid #eee; 
    13. 

  13.             border-bottom:1px solid #eee;
    14. 

  14.             
    15. 

  15.         }
    16. 

  16.         #slider-container {
    17. 

  17.             padding : 29px 0 0 0;
    18. 

  18.             width : 940px;
    19. 

  19.             margin : 0px auto;
    20. 

  20.         }
    21. 

  21.         #wrapper-content{
    22. 

  22.             background:#fff;
    23. 

  23.             height:600px;
    24. 

  24.         }
    25. 

  25.         #wrapper-beforefooter{
    26. 

  26.             background:#f9f9f9; 
    27. 

  27.             border-top:1px solid #eee;
    28. 

  28.             height:350px;
    29. 

  29.         }
    30. 

  30.         #wrapper-footer{
    31. 

  31.             background:#2b2b2b;
    32. 

  32.             height:50px; 
    33. 

  33.         }
    34. 

  34.     </style>
    35. 

  35. </head>
    36. 

  36. <body>
    37. 

  37. <div id="box-wrapper">
    38. 

  38. <div id="wrapper">
    39. 

  39.     <div id="wrapper-top">
    40. 

  40.     </div>
    41. 

  41.     
    42. 

  42.     <div id="wrapper-header">
    43. 

  43.         <div id="slider-container">
    44. 

  44.             <div class="flexslider">
    45. 

  45.               <ul class="slides">
    46. 

  46.                     <li>
    47. 

  47.                         <img src="images/slider-img-01.png" />
    48. 

  48.                         </li>
    49. 

  49.                         <li>
    50. 

  50.                         <img src="images/slider-img-02.png" />
    51. 

  51.                         </li>
    52. 

  52.                         <li>
    53. 

  53.                         <img src="images/slider-img-03.png" />
    54. 

  54.                     </li>
    55. 

  55.                 </ul>
    56. 

  56.             </div>
    57. 

  57.         </div>
    58. 

  58.     </div>
    59. 

  59.     
    60. 

  60.     <div id="wrapper-content">
    61. 

  61.     </div>
    62. 

  62.     
    63. 

  63.     <div id="wrapper-beforefooter">
    64. 

  64.     </div>
    65. 

  65.     
    66. 

  66.     <div id="wrapper-footer">
    67. 

  67.     </div>
    68. 

  68. </div>
    69. 

  69. </div>
    70. 

  70. </body>
    71. 

  71. </html>
    72.

Dan hasilnya sudah bisa Anda nikmati, yakni animasi slideshow yang menakjubkan :-) seperti gambar di bawah ini. Oh iya mungkin Anda tidak bisa melihat animasinya ya, karena hanya gambar saja kalo dilihat. Anda lihatnya di komputer masing-masing saja .. OK
Hasil latihan slider di laptop saya

File pendukung : Download File
Semoga bermanfaat, jangan lupa isi komentarnya ya  :-)
Diposting oleh di

Tidak ada komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)