Loading halaman Tutorial Visual Basic, Delphi, PHP - Calon Programer : SLIDER Header dengan jquery ...

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 Reply :

Posting Komentar

Jika ada pertanyaan atau request,Komentar pada tab blogger akan lebih memudahkan saya untuk membalasnya karena lebih mudah melakukan pengecekan komentar.