>
>
Gaya Slider.
.slider-box (lebar: 320px; tinggi: 210px; overflow: tersembunyi;) .slider (Posisi: relatif; lebar: 10000px; tinggi: 210px;) .slider IMG (Float: Z-Index: 0;)
Wadah.slider-box menetapkan dimensi slider. Menggunakan overflow: properti tersembunyi, semua elemen tersembunyi yang tidak termasuk dalam area di dalam elemen.
Untuk wadah. Slider ditetapkan lebar besar. Perlu agar semua slide cocok di dalamnya.
Slide diselaraskan dengan float: properti kiri.
Di bawah ini adalah lokasi skematis dari blok slider.
Naskah
Gerakan slide akan dilakukan dengan menggunakan perubahan lancar dari sifat margin-kiri wadah. Slider.
$ (Fungsi () (lebar var \u003d $ (". Slider-box") .width ();
// slider lebar. Interval \u003d 4000;
// Interval ganti geser. $ (". Slider img: Last") .Clone () .prependto (".slider");
// Salinan slide terakhir ditempatkan di awal. $ () .eq (1) .Clone () .Appendto (".Slider");
// Salinan slide pertama ditempatkan di bagian akhir. // wadah. Slider bergeser ke kiri ke lebar satu slide. setterinterval ("animasi ()", interval);
// fungsi animasi () mulai melakukan pergeseran slide. )); Fungsi animasi () (var margin \u003d parseint ($ ("slider") .css ("marginleft"));
// blok saat ini offset.slider lebar \u003d $ (". slider-box") .width ()
// slider lebar. Slidersamount \u003d $ (". Slider"). Anak-anak () .lanjang;
// jumlah slide di slider. Jika (margin! \u003d (- lebar * (slidersamount- 1))))
// Jika slide saat ini bukan yang terakhir, (Margin \u003d lebar margin;
// Nilai margin berkurang ke lebar slide. ) LAIN (
// Jika slide terakhir ditampilkan, $ (". Slider") .css ("margin-left", - lebar);
// kemudian block.slider kembali ke posisi awal, margin \u003d - lebar * 2; ) $ ("Slider"). Kenali ((marginleft: margin), 1000);
// blok.slider bergeser ke kiri ke 1 slide.
}
;
Akibatnya, ternyata slider sederhana dengan pengguliran otomatis tanpa batas.
Waktu tidak diam dengan dia dan kemajuan. Ini mempengaruhi hamparan Internet. Anda sudah dapat melihat bagaimana penampilan situs berubah, desain adaptif sangat populer. Dan dalam hubungan ini tidak ada sedikit yang baru Slider jquery adaptif, galeri, korsel atau plug-in serupa.
1. Slider Posting Horizontal Responsif
Carousel horizontal adaptif dengan instruksi instalasi terperinci. Itu dilakukan dengan gaya sederhana, tetapi Anda dapat mempercepatnya di bawah Anda.
2. Slider di Glide.js
Slider ini cocok untuk situs mana pun. Ini menggunakan Glide.js dengan open source. Warna slider dapat dengan mudah diubah.
3. Slideshow Konten Tilted
Slider adaptif dengan konten. Sorotan slider ini adalah efek gambar 3D, serta animasi yang berbeda dari penampilan dalam urutan acak.
4. Slider menggunakan kanvas HTML5
Slider yang sangat indah dan mengesankan dengan partikel interaktif. Itu dilakukan menggunakan kanvas HTML5,
5. Slider "Gambar Morphing"
Slider dengan efek morphing (transformasi halus dari satu objek ke objek lain). Dalam contoh ini, slider sangat cocok untuk portofolio pengembang web atau studio web dalam bentuk portofolio.
6. Slider melingkar
Slider dalam bentuk lingkaran dengan efek kudeta gambar.
7. Slider dengan latar belakang buram
Slider adaptif dengan switching dan latar belakang belakang yang kabur.
8. Slider mode adaptif
Slider sederhana, ringan dan adaptif untuk situs tersebut.
9. SlideBox - Slider Gambar 3D JQuery (Diperbarui)
Versi slider slider yang diperbarui dengan perbaikan dan fitur baru.
10. Jaringan gambar responsif gratis
Plugin jQuery untuk membuat grid gambar yang fleksibel yang akan mengganti gambar menggunakan berbagai animasi dan timing. Itu bisa terlihat bagus sebagai elemen latar belakang atau dekoratif di situs, karena kita dapat menyesuaikan tampilan selektif gambar baru dan transisi mereka. Plugin dibuat dalam beberapa versi.
11. Flexslider.
Plugin gratis universal untuk situs Anda. Plugin ini dibuat dalam beberapa varian slider dan carousels.
12. PhotoRama.
Fotorama.- Ini adalah plugin universal. Dia memiliki banyak pengaturan, semuanya bekerja dengan cepat dan mudah, dimungkinkan untuk melihat slide ke seluruh layar. Slider dapat digunakan baik dalam ukuran tetap dan adaptif, dengan thumbnail dan tanpa, dengan gulir melingkar dan tanpa hal lain.
P.Letakkan slider beberapa kali dan percaya bahwa dia adalah salah satu yang terbaik
13. Galeri 3D-slider gratis dan adaptif dengan miniatur.
Galeri Eksperimental-Slider 3dpanellayout. Dengan efek animasi grid dan menarik.
14. Slider pada CSS3
Slider Adaptive dibuat menggunakan CSS3 dengan penampilan konten dan animasi ringan yang lancar.
15. WoW Slider.
Slider WoW.- Ini adalah slider gambar dengan efek visual yang memukau.
17. Elastis.
Slider elastis dengan kemampuan beradaptasi dan miniatur penuh.
18. celah.
Ini adalah slider adaptif layar penuh menggunakan animasi CSS3. Slider dilakukan dalam dua versi. Animasi dibuat sangat luar biasa dan indah.
19. Galeri Foto Adaptif Plus
Galeri slider gratis sederhana dengan gambar diagram.
20. Slider adaptif untuk WordPress
Slider gratis adaptif untuk WP.
21. Slider Konten Parallax
Slider dengan efek paralaks dan kontrol setiap elemen menggunakan CSS3.
22. Slider dengan Binding Musik
Slider menggunakan kode sumber terbuka jplayer. Slider ini menyerupai presentasi dengan musik.
23. Slider dengan jmpress.js
Slider Adaptive didasarkan pada JMpress.js dan karenanya memungkinkan Anda untuk menggunakan beberapa efek 3D yang menarik untuk slide.
24. Slideshow Cepat Hover
Pertunjukan slide dengan slide switching cepat. Slide switch saat melayang kursor.
25. Accordion Gambar dengan CSS3
Akordeon gambar dengan CSS3.
26. plugin galeri sentuhan yang dioptimalkan
Ini adalah galeri adaptif yang dioptimalkan untuk perangkat sentuh.
27. Galeri 3D.
Galeri Dinding 3D.- Dibuat untuk browser Safari, di mana efek 3D terlihat. Jika Anda melihat browser lain, fungsinya akan baik-baik saja tetapi tidak akan terlihat dengan efek 3D.
28. Slider dengan Pagination
Slider penomoran halaman adaptif menggunakan slider jquery ui. Idenya adalah menggunakan konsep navigasi sederhana. Dimungkinkan untuk memundurkan semua gambar atau switching pos.
29.Montage dengan jQuery
Lokasi gambar otomatis tergantung pada lebar layar. Hal yang sangat berguna saat mengembangkan situs portofolio.
30. Galeri 3D.
Slider bundar 3D sederhana pada CSS3 dan jQuery.
31. Mode layar penuh dengan efek 3D pada CSS3 dan jQuery
Slider dengan kemampuan untuk melihat gambar layar penuh dengan transisi yang indah.
Dari Penulis: Meskipun rumor tentang dugaan "kematian" halaman web terlihat tanpa gulir, kebutuhan untuk slider yang baik tidak hilang di mana saja. Mari kita jujur, setidaknya untuk slider kedua menyenangkan. Selain itu, tidak ada yang kontras dengan konten yang bergerak tidak menyebabkan efek dari efek "wau". Semua slider adalah satu set beberapa slide yang saling berubah dan sangat penting bahwa kode slider lebih mudah. Dalam kasus-kasus seperti itu jQuery akan membantu kita.
Lihatlah 20 slider jQuery dari situs web Envato Market, dan Anda akan memahami bahwa ada slider yang lebih dari sekadar blok dengan mengganti gambar dengan lancar.
1. Royalslider - Galeri Gambar Touchscreen di JQuery
Sekarang slider adaptif juga ramah untuk menyentuh layar, itu berarti lebih dari sebelumnya. Royalslider menggabungkan kedua fungsi: kemampuan beradaptasi dan bekerja dengan layar sentuh. Pilihan yang baik, karena galeri ditulis pada HTML5 dan CSS3.
Beberapa fitur menarik:
Javascript. Mulai cepat.
Seo Optimization.
Kustomisasi tinggi
Lebih dari 10 templat awal
Ada folback untuk transisi CSS3
Menurut pendapat saya, fungsi paling keren adalah "arsitektur skrip modular", yang memungkinkan Anda untuk memutuskan hal-hal yang tidak perlu dari file JS utama, sehingga mengurangi berat badan. Royalslider, galeri gambar layar sentuh pada jQuery - slider javascript yang andal, yang harus mengisi satu set alat pengembang mana pun.
2. Slider Revolusi Adaptive JQuery Plugin
Tidak mudah melakukan sesuatu "revolusioner" dengan slider. Ketika datang ke slide, Anda dapat menambahkan begitu banyak fungsi di dalamnya. Namun, revolusi slider benar-benar merupakan upaya yang baik. Di antara slider jQuery, contoh ini memenuhi semua persyaratan Anda yang mungkin.
Daftar fitur slider sangat besar, jadi saya hanya akan mencantumkan sebagian besar:
Efek pararaltax dan animasi kustom
Jumlah lapisan dan slide tanpa batas dengan referensi
siap digunakan, gaya kustom yang dalam
dan banyak lagi
Kemampuan untuk menambahkan pemutar video yang disematkan dan tautan dari jejaring sosial membuat revolusi slider salah satu opsi yang paling fleksibel dan dapat disesuaikan di jaringan.
3. Layerslider Adaptive JQuery Plugin Slider
Dengan nama "Layerslider Adaptive JQuery Plugin Slider" tidak dapat benar-benar mengevaluasi slider ini.
200+ transisi 2D dan 3D antara slide kapal siapa pun.
Beberapa fungsi luar biasa:
13 Jenis Kulit dan 3 Menu
Kemampuan untuk menempatkan gambar tetap di atas slider
Dan jquery fallbek.
Dan banyak lagi
Seperti dengan slider sebelumnya, Anda dapat menambahkan hampir semua konten, bahkan konten Multimedia Resident HTML5. Layslider menghidupkan kembali slider, selain itu, sangat indah.
4. JQuery Banner Rotator / Slideshow
jQuery Banner Rotator / Slideshow adalah slider yang cukup sederhana yang tidak mengorbankan fungsionalitas utama.
Kemampuan:
Tertutup, sisipan teks, dll.
Pratinjau dan berbagai opsi untuk menonton komponen
Timer dengan penundaan satu slider atau semua
Berbagai transisi dari semua slide atau transisi yang berbeda untuk masing-masing secara terpisah
jQuery Banner Rotator / Slideshow dibandingkan dengan slider jQuery lain hanya memiliki kemampuan dasar, tetapi jangan lupa tentang hal itu.
5. Semua dalam Satu Slider - Adaptif JQuery Slider Plugin
Slider apa pun yang muncul di jaringan memiliki visi uniknya sendiri dan memecahkan masalah di bidangnya. Tapi bukan ini. Semua dalam satu slider dapat disebut "semua inklusif."
Saya pikir sebagian besar pengembang dan desainer web memiliki solusi yang terbukti, tetapi mereka selalu mencari sesuatu yang baru. Dan "sesuatu yang baru" ini meliputi:
Rotator spanduk
Spanduk dengan pratinjau
Spanduk dengan daftar putar
Slider konten
Korsel
Semua jenis slider mendukung sebagian besar fungsionalitas, jika tidak semua yang dibutuhkan oleh slider jQuery. Akankah semua dalam satu slider menjadi "All Inclusive" Anda?
6. Unoslider - Slider layar sentuh adaptif
Jika slider Anda tidak adaptif dan tidak mendukung layar sentuh, maka Anda memiliki slider yang salah. Unoslider adalah yang tepat.
Slider ini menemukan tempatnya di bawah sinar matahari di antara kesederhanaan dan serangkaian fungsi yang kaya. Fungsi:
Topik dukungan
12 topik siap pakai
40 transisi
Dukungan dukungan IE6 +
Semua fungsi dengan bias dalam desain dan gaya, yang membuat unoslider slider konten yang sangat baik dengan kemungkinan menambahkan topik.
7. Guru Slider - JQuery Sentuh Slider
Mencari "satu slider jquery untuk memerintah semua orang"? Coba slider master - slider layar sentuh jquery untuk ukuran layar yang berbeda ...
Ketika datang ke desain yang baik, contoh ini adalah salah satu yang terbaik:
Lebih dari 25 template
Transisi akselerasi perangkat keras
Dukungan sentuh dan svaypov
Dan banyak lagi
Transisi interaktif, lapisan animasi dan hotspot pasti akan menarik perhatian Anda. Master Slider - karya seni.
8. TouchCarousel - Konten JQuery Scroller dan Slider
TouchCarousel menarik dukungan dan pembaruan gratis. Namun, ini tidak semua fungsi dari Carousel tipe slider jquery ringan ini.
Jika kata "sentuh" \u200b\u200bada dalam judul, Anda dapat menebak bahwa slider sepenuhnya beradaptasi dan mendukung sentuhan. Fungsi lainnya:
Seo Optimization.
Smart Avto Bermain
Transisi Akselerasi Perangkat Keras CSS3
UI yang dapat disesuaikan dan 4 skin untuk photoshop
TouchCarousel karena slide gulir fisiknya yang unik ini adalah tingkat sensasi yang sama sekali baru pada perangkat seluler.
9. Slider Lanjutan - JQuery XML Slider
slider jQuery dapat digunakan tidak hanya di situs. Mereka juga dapat berguna dalam aplikasi web. Slider lanjutan memungkinkan Anda untuk melakukannya.
Dengan markup HTML atau XML, slider canggih ini memiliki kesan yang tak terhapuskan:
Layers animasi dan video pintar
100+ transisi dan 150+ properti kustom
15 skin untuk slider, 7 skin untuk bilah gulir dan lightbox dukungan bawaan
Navigasi dengan keyboard, dukungan untuk sentuhan dan penyesuaian penuh
Dan banyak lagi
Namun, fitur terbaik adalah slider canggih - jquery xml slider API, yang membuat slider pilihan sempurna untuk aplikasi web Anda.
10. Slider jQuery memperbesar / memperkecil efek sepenuhnya responsif
Salah satu slider jQuery yang akan membuat Anda melihat demo sebelum Anda mulai membaca tentang kemampuannya. Anda hanya ingin memahami apa arti "zoom in / out effect" ini.
Efek zoom agak lemah, tetapi menambahkan rasa kontrol dan sentuhan gambar saat ini sedangkan slider statis yang tersisa. Fitur khusus dari slider:
Transisi CSS3 antar lapisan
Parameter akhir animasi untuk lapisan
Pilihan lebar tetap, layar penuh dan semua lebar
Teks animasi dengan pemformatan HTML dan CSS
Sebagian besar slider berusaha membayangkan efek sebanyak mungkin, dan dalam pembesaran jQuery memperbesar / memperkecil efek yang sepenuhnya responsif hanya ada efek dari Ken Burns, tetapi juga diterapkan.
11. JQUERTER CARUSEL EVOLUSI
Seperti halnya slider canggih di atas - jQuery XML Slider, JQuery Carousel Evolution memiliki API sendiri, yang dapat digunakan untuk meningkatkan fungsionalitas atau integrasi slider dalam proyek lain.
Javascript. Mulai cepat.
Jelajahi dasar-dasar JavaScript pada contoh praktis dari membuat aplikasi web
Dengan gambar, markup html, video youtube dan vimeo Anda juga akan mendapatkan:
Seo Optimization.
9 gaya korsel
Efek naungan dan refleksi
Ukuran gambar dapat dikonfigurasi sebagai bagian depan dan belakang
jQuery Carousel Evolution adalah korsel sederhana dengan banyak pilihan penggunaan.
12. Slider Seksi.
Slider seksi tidak begitu seksi seperti sebelumnya. Namun, karena usianya, slider ini pantas dipercaya.
Pada pandangan pertama, slider tidak terlalu mengesankan, tetapi jika itu dikonfigurasi dengan baik, ia akan dengan sangat cocok dengan desain Anda. Kemampuan:
Geser pemain otomatis
Tanda tangan untuk gambar.
Slide bermain terus menerus
6 Efek Transisi
Slider seksi menunggu Anda untuk membuka semua kekuatannya dan mengungkapkan potensi.
13. JQuery Image & Content Scroll W / Lightbox
Dengan semua desain ini untuk perangkat seluler dan layar sensorik pendukung, senang melihat slider jQuery yang tidak melupakan komputer desktop.
image JQuery & Content Scroll W / Lightbox Mendukung input dari keyboard dan roda mouse, serta fitur lainnya:
Orientasi horizontal dan vertikal
Tanda tangan teks di dalam atau di luar slider
Kemampuan untuk menetapkan sejumlah slide yang berlaku
Gambar bawaan, flash, iframe, ajax dan konten inline
Juga di slider ada lightbox built-in. Secara opsional, Anda tidak dapat menjalankan slider itu sendiri di jQuery Image & Content Scroller W / Lightbox, tetapi untuk menjalankan Lightbox secara terpisah.
14. Translucent - Spanduk Rotator Adaptif / Slider
Sebagian besar slider jquery memiliki desain sendiri. Anda dapat mengkonfigurasinya sendiri, tetapi kadang-kadang hanya ingin semuanya di dalam slider. Transparan disajikan untuk perhatian Anda.
Ada banyak preset di slider. Anda mungkin hanya perlu mengatur pengaturan tertentu dan hanya itu. Kemampuan:
6 gaya berbeda
4 efek transisi
2 transisi swatch.
Tombol dan tanda tangan yang dapat disesuaikan
Seperti yang lain, slider ini mendukung sentuhan, adaptif dan memiliki akselerasi perangkat keras. Translude adalah slider dengan desain minimum yang dipasang oleh konten itu sendiri di kepala sudut.
15. FSS - Plugin Situs Web Geser Layar Penuh
Apakah Anda ingin membuat situs layar penuh yang terdiri dari slide? Maka Anda membutuhkan FSS.
Bahkan, menggunakan slider jQuery ini sangat mudah untuk membuat slider layar penuh. Kemampuan:
Dukungan Ajax.
Scroll bar
Dukungan teknologi yang mendalam
2 efek transisi yang berbeda
Juga layak membayar untuk dukungan keyboard dan panduan 11 halaman. Namun, kesan saat ini menyebabkan bobot FSS, hanya 5KB.
16. Zozo Accordion - Slider layar sentuh adaptif
Contoh lain dari slider jQuery yang berfokus pada gaya, dan siapa yang mengatasi pekerjaan mereka. Zozo Accordion diperlukan oleh mereka yang mencari slider-accorder yang baik dengan kemampuan untuk mengubah gaya.
Kecantikan dengan animasi CSS3 ini juga memiliki berbagai fungsi yang cukup luas:
Akordeon horizontal dan vertikal
Optimasi HTML5 dan SEO semantik
Sentuhan Dukungan, Keyboard dan Wai-Aria
Lebih dari 10 skin dan 6 tata letak
Dan banyak lagi
Zozo Accordion memiliki dukungan gratis dan pembaruan konstan, serta semua fungsi yang ingin Anda lihat dalam jQuery Accordion.
17. JQuery Responsif Plugin Slider OneByOne
jQuery Responsif OneByOne Slider Plugin lebih mirip animasi sederhana, bukan slider. Alih-alih menampilkan satu slide sekaligus, instance ini langkah demi langkah mengisi layar dengan slide, sementara tidak ada tempat di daerah dan baru kemudian pergi ke slide berikutnya.
Animasi CSS3 bekerja dari bawah Animate.css, ringan, terdiri dari beberapa lapisan dan bersahabat dengan perangkat seluler. Beberapa fungsi:
Ada juga opsi navigasi menggunakan drag and drop. JQuery Responsif Onebyone Slider Plugin bekerja berdasarkan twitter bootstrap carousel.
18. Accordionza - Plugin JQuery
Tidak ada slider jQuery yang lebih mudah untuk ini. Untuk bekerja, Anda harus mengunduh slider 3KB total, yang menjadikan Accordionza adalah slider jenis Accorder paling ringan.
Jika Anda tidak menyukai tiga gaya, Anda dapat memperbaiki HTML dan CSS sendiri. Kemampuan:
Navigasi dengan keyboard
Efek dan tombol mudah
Teknik Peningkatan Progresif - Bekerja tanpa JavaScript
Ingat bahwa Accordionza dapat menampilkan banyak opsi untuk konten lucu, yang membuatnya sangat fleksibel.
19. Mightslider - Slider multiguna adaptif
Mightyslider benar-benar slider yang kuat. Ini dapat digunakan tidak hanya sebagai slider gambar sederhana, tetapi juga sebagai slider unidirectional layar penuh dengan navigasi melalui item menu. Dengan itu, Anda dapat membuat situs satu halaman yang sangat baik.
Di bawah kap Anda akan menemukan banyak pilihan:
Keyboard, Mouse dan Sentuh Dukungan
Transisi Akselerasi Perangkat Keras CSS3
Markup dan optimasi SEO yang valid
Nomor slide tanpa batas, lapisan untuk tanda tangan dan efek
API sangat kuat dan ramah kepada pengembang, yang membuka berbagai cara untuk menggunakannya. Mightyslider adalah slider jquery progresif yang sangat baik dengan kode yang bersih dan dikomentari dengan baik.
20. Parallax Slider - Plugin JQuery Adaptif
Parallax Slider bekerja seperti plugin jquery responsif onybyone slider dan memungkinkan Anda menghidupkan setiap lapisan secara terpisah di dalam satu slide. Anda dapat menghidupkan semua slide atau bahkan hanya satu dengan menambahkan animasi pararaltax.
Kit ini mencakup 4 slider dari berbagai jenis, semua dengan efek paralaks. Seperti slider jQuery lainnya, ia memiliki:
Kustomisasi penuh
Sentuh Dukungan
Sepenuhnya adapiten, jumlah lapisan tanpa batas
Bermain otomatis, looping, penyesuaian tinggi dan lebar, serta timer
Lapisan animasi bukan hanya teks atau gambar. Anda juga dapat menambahkan video YouTube, Vimeo dan HTML5. Parallax Slider adalah contoh lain yang bagus tentang bagaimana Anda dapat meniru efek flash bahkan lebih baik daripada flash itu sendiri, yang juga didukung pada semua perangkat.
Kesimpulan
Sangat ingin mengamati bagaimana slider jquery tumbuh dari sesuatu yang hanya menggantikan satu gambar ke yang lain dalam satu set besar alat kreatif. Sekarang ada 3D, slider pararaltax, slider untuk seluruh halaman, adaptif dan mereka yang dapat dilihat baik di komputer desktop dan pada smartphone.
Jika Anda tidak menyukai slider dari daftar ini, Anda selalu dapat melalui pelajaran Tutorial Kode JQuery di situs web Envato dan mengembangkan sesuatu yang sama sekali baru dan unik.
Nah, atau lihat slider lain di Pasar Envato - ada dari apa yang harus dipilih. Dan apa slider jQuery favorit Anda, dan mengapa?
