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

    Syarat Tukar Link/Banner      Blog anda terdaftar di Search Engine dan halaman tukar link anda terindeks di Google.      Terdaftar      Terdapat meta tag search engine pada template.      Terindeks      Halaman blog muncul pada hasil pencarian Google...  

---