Download source code vb6, source code delphi7, tutorial vb, tutorial delphi, tutorial php

SLIDER Header dengan jquery

Share on :
Contoh diatas adalah contoh dari efek slider image, yang biasanya digunakan unutk header dalam sebuah website.Maaf kalo cuma di frame kurang besar,karena males buat hosting nya :p

Artikel ini atas permintaan dari komentar yang ada di kolom REQUEST semoga dapat membantu...
sedikit penjelasan dari script yang berada di dalam nya
  1. <div id="slide-runner">  
  2.     <a href=""><img id="slide-img-1" src="images/nature-photo.png" class="slide" alt="" /></a>  
  3.     <a href=""><img id="slide-img-2" src="images/nature-photo1.png" class="slide" alt="" /></a>  
  4.     <a href=""><img id="slide-img-3" src="images/nature-photo2.png" class="slide" alt="" /></a>  
  5.     <a href=""><img id="slide-img-4" src="images/nature-photo3.png" class="slide" alt="" /></a>  
  6.     <a href=""><img id="slide-img-5" src="images/nature-photo4.png" class="slide" alt="" /></a>  
  7.     <a href=""><img id="slide-img-6" src="images/nature-photo4.png" class="slide" alt="" /></a>  
  8.     <a href=""><img id="slide-img-7" src="images/nature-photo6.png" class="slide" alt="" /></a>   
  9.     <div id="slide-controls">  
  10.      <p id="slide-client" class="text"><strong>post</strong><span></span></p>  
  11.      <p id="slide-desc" class="text"></p>  
  12.      <p id="slide-nav"></p>  
  13.     </div>  
  14. </div>  
Script diatas itu adalah script untuk menentukan lokasi file image yang mau kita jadikan slide nya (warna merah)Sedangkan yang berwarna biru, adalah title dan description untuk tiap slide nya.
Slide terdiri dari 7 image, dan dapat berganti title dan description di tiap image nya.
Untuk mengubah title dan description nya,silahkan kalian lihat pada bagian penggalan script berikut :
  1. <script type="text/javascript">  
  2.     if(!window.slider) var slider={};slider.data=[{"id":"slide-img-1","client":"nature beauty","desc":"nature beauty photography"},{"id":"slide-img-2","client":"nature beauty","desc":"add your description here"},{"id":"slide-img-3","client":"nature beauty","desc":"add your description here"},{"id":"slide-img-4","client":"nature beauty","desc":"add your description here"},{"id":"slide-img-5","client":"nature beauty","desc":"add your description here"},{"id":"slide-img-6","client":"nature beauty","desc":"add your description here"},{"id":"slide-img-7","client":"nature beauty","desc":"add your description here"}];  
  3.    </script>  

Coba kalian perhatikan potongan script berikut:
{"id":"slide-img-1","client":"nature beauty","desc":"nature beauty photography"}
Pada tag "Client" tsb akan menampilkan title atau judul image(bisa kalian ganti) dan pada tag "desc" tsb adalah untuk description dari image kalian(bisa kalian rubah).
Silahkan kalian sesuaikan dengan judul dan description dari tiap image yang mau kalian tampilkan pada slider.

Untuk Download source code slider nya silahkan :
Slider.zip | Calon Programer
Semoga Membantu

Klik Like/share jika anda menyukai tulisan Share


0 komentar on SLIDER Header dengan jquery :

Post a Comment and Don't Spam!

Terimakasih Sudah Berkomentar di artikel ini