Mungkin Yang Paling Sederhana JQuery Slider

Apakah Anda memiliki jQuery di blog Anda dan ruang untuk memasukkan 10 baris kode? Jika jawabannya adalah ya dan Anda juga ingin memiliki slide otomatis, ini adalah kode sederhana saya telah melihat begitu jauh. 

Kode yang memiliki suksesi gambar sederhana ditempatkan di dalam sebuah kotak dengan wadah umum bersama akan memberikan hasil ini: 

1. Menambahkan JavaScript 

Jika Anda tidak memiliki jQuery, maka Anda harus menambahkan baris ini setelah]]> </ b: skin> untuk memuat slide ini populer: 

 <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js' type='text/javascript'/>

Setelah yakin bahwa kami memiliki perpustakaan dalam template kita, kita perlu menambahkan baris yang sama untuk membuat serangkaian gambar berfungsi sebagai slider: 

 <script type="text/javascript"> / / <! [CDATA [
$ (Function () {
. $ ('# Slider div: gt (0)') hide ();
setInterval (function () {
$ ('# Slider div: first-child'). FadeOut (0)
. Berikutnya ('div'). FadeIn (1000)
. Akhir () appendTo ('# slider');.}, 4000);
});
/ /]]> </ Script>

Kita bisa menyimpan perubahan ke template karena itu semua. Hal ini sederhana, tetapi Anda akan melihat bahwa ia bekerja dan melakukan apa yang harus dilakukan. Sekarang kita hanya perlu menempatkan gambar di mana kita ingin menampilkan, dengan cara yang dibahas di bawah ini. 

2. Buat slider 

Setelah menambahkan kode di atas dalam template kita (meskipun Anda bisa menambahkan langsung ke gadget, pada halaman atau bahkan dalam sebuah entri seperti yang Anda lihat di sini) kita dapat membuat pemirsa seperti yang Anda lihat di atas. Kita hanya perlu menggunakan struktur HTML di bawah ini untuk menambahkan gambar: 

 <div id="slider">
<div> <img src=" IMAGE_URL "/> </ div>
<div> <img src=" IMAGE_URL "/> </ div>
<div> <img src=" IMAGE_URL "/> </ div>
</ Div>

Saya tidak tahu bagaimana Anda melihatnya, tetapi itu adalah semua yang Anda butuhkan. 

Bagi saya ini cukup ringan dan efisien, lebih dari sebagian besar perpustakaan yang digunakan mungkin terlalu sering. 

Pengaturan

Tiga angka terakhir dari plugin memungkinkan kita untuk menyesuaikan beberapa hal. Semua disajikan dalam milidetik (4000 = 4 detik) 

fadeOut (0): Waktu untuk gambar keluar 
fadeIn (1000): Waktu untuk gambar berikutnya 
('# Slider');}, 4000): Waktu yang dihabiskan di setiap gambar 

Cara Kerja

Dan bagi yang penasaran yang ingin belajar hal-hal ... 

. $ ('# Slider div: gt (0)') hide (); 
Dengan gt (x) kita pilih semua div s dari nomor x. Dalam hal ini 0 adalah pertama, jadi apa yang kita lakukan dengan baris ini adalah untuk menyembunyikan (hide) semua kotak kecuali yang pertama, yang akan menjadi gambar terlihat pada awalnya. 

setInterval (function () {[apa yang akan kita lakukan]}, 4000); 
Kita perlu menegaskan beberapa hal dari waktu ke waktu dan kami lakukan dengan setInterval, yang menunjukkan waktu tunda antara setiap set. 

$ ('# Slider div: first-child'). FadeOut (0) 
Dalam masing-masing interval ini kita menghapus (fadeOut) kotak pertama (div: first-child) yang ada di hubungan gambar ... 

. Berikutnya ('div'). FadeIn (1000) 
... Dan kami membuat kotak berikut (next) muncul secara bertahap (fadeIn). 

. Akhir () appendTo ('# slider').; 
Akhirnya kita memiliki gambar pertama dan menempatkannya pada akhir   (AppendTo) dari "daftar". 

end () me-reset hitungan unsur-unsur yang kita bergerak maju dengan berikutnya (). Dengan demikian, anak pertama dibuat sebelumnya menghilang adalah yang kita turunkan stack dan bukan gambar yang sekarang terlihat. 

Varian dan kustomisasi

Seperti yang Anda lihat CSS tidak diperlukan untuk slider untuk bekerja, tetapi menggunakan itu kita dapat mengubah tampilan nya, memungkinkan penggunaan gambar dengan ukuran yang berbeda, termasuk label dan bahkan meningkatkan transisi. Berikut adalah beberapa ide. 

DEMO text3

Kita dapat membatasi ukuran wadah keseluruhan dan mencegah overflow untuk gambar yang lebih besar. Dan kemudian kita akan menempatkan sudut dibulatkan, perbatasan dan kemudian pusat mereka. 

 # Slider {
overflow: hidden;
width: 500px;
height: 300px;
border: 3px solid # b8b8b8;
border-radius: 40px;
margin: 0 auto;
padding: 0;
position: relative;
}

Jika kita menempatkan kotak induk dari gambar benar-benar sehubungan dengan kontainer umum (untuk itu kita masukkan sebelum relatif), ini akan saling tumpang tindih. Dengan cara ini fadeOut dapat memberikan mereka waktu untuk menjadi "terlihat" (kami mengubah 0-1000) dan transisi halus antara gambar. Campuran gambar diproduksi dalam demo kedua. 

Dalam gambar, max-width melayani kita untuk selalu mengambil seluruh lebar dan min-height sehingga bahkan jika mereka terdistorsi, akan tetap ada ruang di bawah ini ketika mereka kurang dari 300px. 

 # Slider> div {
position: absolute;
top: 0;
kiri: 0;
}
# Slider {img
width: 100%;
min-height: 300px;
margin: 0;
padding: 0;
border: 0;
}

Dan jika kita menambahkan elemen lain pada gambar (dalam contoh ini teks), kami hanya akan label mereka dengan rentang atau ayat (p) dan posisi mereka dalam CSS secara mutlak, menempatkan mereka di tempat yang tepat di mana kita inginkan dengan atas / bawah - kiri / kanan. 

 # Slider {p
position: absolute;
bottom: 30px;
kiri: 0;
display: block;
width: 400px;
height: 24px;
margin: 0;
padding: 5px 0;
color: # eee;
background: # 990000;
font-size: 22px;
line-height: 22px;
text-align: center;
}

Markup dalam HTML untuk terakhir ini, termasuk juga link ke gambar, sehingga akan menjadi seperti ini: 

 <div id="slider">
<div> <a href=" "> <img src=" Link_URL1 Image_URL1 "/> </ a> <p> text1 </ p> </ div>
<div> <a href=" "> <img src=" Link_URL2 Image_URL2 "/> </ a> <p> Text2 </ p> </ div>
<div> <a href=" "> <img src=" Link_URL3 Image_URL3 "/> </ a> <p> text3 </ p> </ div>
</ Div>