Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Code
  2. jQuery
Code

20 Slider Imej jQuery Terbaik

by
Difficulty:BeginnerLength:LongLanguages:

Malay (Melayu) translation by Seurion (you can also view the original English article)

Mari kita menjadi jujur-slider ​​adalah keseronokan. Sedikit pergerakan dapat benar-benar membawa halaman ke kehidupan.

Slider - juga dikenali sebagai 'carousels' atau 'slider imej' - adalah elemen interaktif untuk menunjukkan imej atau media lain dalam laman web.

Lihatlah 20 slider jQuery yang berguna dari Envato Market dan anda akan melihat lebih banyak lagi slider daripada yang mungkin anda bayangkan.

1. RoyalSlider

Mempunyai gelangsar yang mesra sentuhan dan responsif untuk laman web anda adalah lebih penting sekarang berbanding sebelum ini, dan RoyalSlider adalah kedua-duanya.

Dibangunkan dengan amalan terbaik HTML5 dan CSS3, ia adalah pilihan yang kukuh.

RoyalSlider Touch-Enabled jQuery Image Gallery

Berikut adalah beberapa ciri-ciri meriah keren yang lain:

  • SEO dioptimumkan
  • sangat boleh dikonfigurasikan
  • lebih 10 template starter
  • termasuk pemangkasan untuk peralihan CSS3
  • dan banyak lagi

Saya fikir ciri yang terbaik adalah seni bina modular yang memberikan pilihan untuk mengecualikan apa yang mereka tidak perlukan dari fail utama JS, menjaga perkara yang kurus mungkin.

RoyalSlider adalah gelangsar JavaScript padat yang harus menjadi tambahan yang bagus untuk mana-mana kotak alat web dev.

2. Revolusi Slider

Ia tidak mudah untuk "revolusioner" di ruang gelangsar. Hanya terdapat banyak pilihan yang boleh anda buat ketika datang ke slider, tetapi Slider Revolution melakukan pekerjaan yang hebat.

Ketika datang ke slider jQuery, yang satu ini akan memberikan apa saja yang anda inginkan.

Slider Revolution Responsive jQuery Plugin

Ciri-ciri senarai untuk slider ini panjang, jadi saya hanya menunjukkan poinnya:

  • kesan paralaks dan animasi adat
  • Pilihan dioptimumkan dan dimuatkan di SEO
  • tambah lapisan tanpa had dan slaid dengan pilihan pautan
  • termasuk gaya "sedia untuk digunakan" dan sangat disesuaikan
  • dan banyak lagi

Keupayaan untuk menggugurkan imej, pemain video, dan sumber media sosial menjadikan Slider Revolution salah satu daripada pilihan yang paling fleksibel dan disesuaikan yang anda akan dapati.

3. LayerSlider

Nama tidak melakukan keadilan slider jQuery ini. Peralihan slide 200+ 2D dan 3D akan mengubah beberapa kepala.

LayerSlider Responsive jQuery Slider Plugin

Antara ciri-ciri penting termasuk:

  • Reka bentuk kulit template PSD disertakan
  • 13 kulit dan 3 jenis navigasi
  • tambah imej tetap di atas gelangsar
  • Gambar beban mesra dan malas SEO
  • peralihan CSS3 dipercepatkan perkakasan dengan sandaran jQuery
  • dan banyak lagi

Seperti slider terdahulu, anda boleh menjatuhkan apa sahaja kandungan-walaupun kandungan multimedia sendiri yang dihoskan oleh HTML5.

LayerSlider membawa banyak tindakan ke ruang slider dan betul-betul kacak.

4. jQuery Rotator Banner / Tampilan Slide

Slider jQuery Pemutar / Slider slaid adalah penyelesaian yang mudah. Ia mudah tanpa mengorbankan keperluan.

jQuery Banner Rotator Slideshow

Ia termasuk:

  • petua, penerangan teks dan lain-lain
  • thumbnail dan pilihan tontonan komponen
  • pemasa dan pilihan kelewatan secara global atau setiap slider
  • pelbagai peralihan untuk semua slaid atau berbeza untuk setiap satu
  • lagi

Walaupun jQuery Banner Rotator / Slideshow adalah asas berbanding dengan slider jQuery lain, ia tidak boleh diabaikan jika anda mahu antara muka yang mudah dan bersih.

5. Semua dalam Satu Slider Responsif jQuery Slider Plugin

Setiap slider datang ke pasaran dengan perspektif uniknya sendiri dan memberikan penyelesaian kepada apa jua slider yang ditargetkan.

Tetapi bukan yang ini.

Plugin JQuery All In One Slider yang Responsif Slider adalah ... baik ... semua dalam satu.

All In One Slider Responsive Jquery Slider Plugin

Saya fikir kebanyakan web devs dan pereka mempunyai penyelesaian untuk pergi, tetapi pada masa yang sama sentiasa mencari sesuatu yang baru.

Ini mungkin sesuatu yang baru kerana ia termasuk:

  • pemutar spanduk
  • banner imej kecil
  • banner dengan senarai main
  • slider kandungan
  • karusel

Dan semua gaya slider ini termasuk kebanyakan-jika tidak semua-ciri yang diperlukan dalam gelangsar jQuery.

Adakah jQuery Slider Plugin yang All In One Slider Responsif menjadi penyelesaian slider anda dalam semua?

6. UnoSlider

Jika gelangsar anda tidak disentuh sentuhan dan responsif, anda tidak melakukannya dengan betul.

UnoSlider melakukannya dengan betul.

UnoSlider - Responsive Touch Enabled Slider

Gelangsar ini mendapati tempat yang manis antara mudah dan ciri kaya.

Ciri-ciri termasuk:

  • mudah tema
  • 12 tema pra-dibina
  • 40 peralihan sekarang
  • Sokongan IE6+ (kerana masih ada di sana!)
  • dan banyak lagi

Set ciri ini lebih mantap ke arah reka bentuk dan gaya, menjadikan UnoSlider sebagai slider kandungan hebat untuk tema.

7. Master Slider

Mencari satu slider jQuery untuk memerintah mereka semua?

Cuba Master Slider untuk saiz ...

Master Slider - jQuery Touch Swipe Slider

Ketika datang ke penampilan yang baik, yang satu ini berada di tingkat atas eselon:

  • preloading pintar
  • lebih 25 templat
  • peralihan dipercepatkan perkakasan
  • menyokong navigasi sentuh dan gerak isyarat sapu
  • dan banyak lagi

Peralihan interaktif, lapisan animasi, dan titik panas akan benar-benar menangkap mata anda.

Koleksi Master Slider adalah satu karya.

8. TouchCarousel

TouchCarousel menyumbang "sokongan dan naik taraf percuma", tetapi terdapat lebih banyak lagi untuk slider jQuery bergaya karousel ringan ini.

TouchCarousel - jQuery Content Scroller and Slider

Dengan "sentuh" ​​dalam nama, ia jelas responsif sepenuhnya dan menyokong navigasi sentuh.

Ciri-ciri lain termasuk:

  • Mesra SEO
  • autoplay pintar
  • peralihan CSS3 dipercepatkan perkakasan
  • UI yang disesuaikan dengan empat kulit Photoshop
  • dan banyak lagi

Walau bagaimanapun, TouchCarousel mengambil mudah alih ke tahap yang baru dengan penggiliran berasaskan fizik yang unik.

9. Slider Lanjutan

Slider jQuery bukan hanya untuk web. Ia juga boleh berguna apabila diintegrasikan ke dalam aplikasi, seperti yang anda boleh lakukan dengan Advanced Slider.

Advanced Slider - jQuery XML Slider

Menggunakan markup HTML atau XML, gelangsar canggih ini memuat banyak pukulan:

  • lapisan animasi dan video pintar
  • 100+ peralihan dan 150+ harta yang boleh disesuaikan
  • 15 slider skin, 7 skrol skru, dan sokongan lightbox terbina dalam
  • navigasi papan kekunci, sokongan skrin sentuh, dan antara muka yang boleh disesuaikan sepenuhnya
  • dan banyak lagi

Walau bagaimanapun, ciri yang terbaik mestilah Advanced Slider API-menjadikannya penyelesaian gelangsar yang sempurna untuk aplikasi anda.

10. Efek Zoom Masuk/Keluar jQuery Slider Sepenuhnya Responsif

Ini adalah salah satu daripada slider jQuery yang membuat anda melawat demo sebelum anda mula membaca tentang ciri-ciri itu, kerana anda ingin tahu apa arti "zoom in/out effect" walaupun bererti.

Fikirkan screensaver.

jquery Slider Zoom InOut Effect Fully Responsive

Walaupun kesannya agak kecil, kesan zoom dalam slider menambah sentuhan yang bagus dalam web dunia yang penuh dengan slider imej statik.

Ciri slaid licin ini termasuk:

  • Peralihan lapisan CSS3
  • keluar parameter animasi untuk lapisan
  • lebar tetap, penuh, dan penuh skrin
  • Teks animasi CSS dan HTML yang diformat
  • dan banyak lagi

Walaupun kebanyakan slider cuba untuk menyampaikan banyak kesan dalam satu pakej, gelangsar jQuery Slider Zoom In/Out Kesan Sepenuhnya Responsif memberikan kesan Ken Burns dan menyampaikannya dengan baik.

11. Garis Masa Kandungan

Garis Masa Kandungan adalah slider yang direka dan indah yang indah-penyelesaian yang sempurna untuk tempoh masa.

Dari desktop ke telefon bimbit, tempoh masa tidak pernah kelihatan begitu baik.

Content Timeline

Ia mudah. Ambil kandungan anda, semak dengan tarikh, panggil fungsi itu, dan itu sahaja!

Ciri-ciri termasuk:

  • kuat dan ringan
  • 11 tetapan yang boleh diubah suai
  • sepenuhnya interaktif, fleksibel, dan intuitif
  • penuh responsif dan dibina untuk mudah alih dan desktop
  • dan banyak lagi

Dengan tujuh kaedah kawalan skrip terbenam dan termasuk kesan pelonggaran, Konten Timeline adalah salah satu slider garis masa terbaik yang anda akan dapati.

12. Slider Sexy

The Sexy Slider tidak begitu seksi seperti biasa, tetapi ia telah menjadi baik, menjadikannya penyelesaian yang boleh dipercayai.

Sexy Slider

Ia tidak begitu mengagumkan pada permulaan pertama, tetapi dengan beberapa penalaan halus, slider jQuery fleksibel ini boleh dikonfigurasikan agar sesuai dengan reka bentuk anda dengan sempurna.

termasuk

  • slaid automatik
  • keterangan imej
  • gelongsor berterusan
  • 6 kesan peralihan
  • dan banyak lagi

Sexy Slider hanya menunggu anda membuka kunci kuasa dan menemui potensi penuhnya.

13. Master Slider Plugin Slider jQuery dengan Visual Builder

Master Slider jQuery Slider Plugin dengan Visual Builder membuat membina gelangsar yang snap-tanpa mengorbankan penampilan yang baik.

Slider imej dan kandungan premium ini menawarkan beberapa peralihan perkakasan yang pantas dipercepatkan yang pasti akan menangkap mata anda.

Master Slider jQuery Slider Plugin with Visual Builder

Ciri-ciri termasuk:

  • preloading pintar
  • dibina untuk kedua-dua mudah alih dan desktop
  • lebih daripada 80 slider sampel yang sedia digunakan
  • lapisan transisi bertopeng, tindakan lapisan, dan lapisan overlay
  • dan banyak lagi

Master Slider jQuery Slider Plugin dengan Visual Builder disesuaikan sepenuhnya, SEO friendly, dan juga menyokong video. Dan tentu saja, yang paling jelas: pembina visual.

14. Translucent

Kebanyakan plugin slider jQuery termasuk beberapa jenis krom reka bentuk, dan semasa anda dapat mengkonfigurasikannya mengikut keinginan anda, kadang-kadang anda hanya mahu menyimpan segala yang terkandung dalam slaid itu sendiri.

Masukkan slider lutung.

Translucent - Responsive Banner Rotator Slider

Terdapat banyak pratetap, jadi apa yang perlu anda lakukan ialah mengkonfigurasinya dan pergi!

Ciri-ciri termasuk:

  • 6 variasi gaya
  • 4 kesan peralihan
  • 2 peralihan sapu sentuhan
  • butang dan kapsyen yang boleh dikonfigurasikan
  • dan lebih lagi

Seperti orang lain, ia sentuhan mesra, responsif, dan memanfaatkan percepatan perkakasan.

Translucent adalah reka bentuk slider minimum yang melakukan pekerjaan yang hebat yang mendorong kandungan ke hadapan.

15. Unleash

Mencari slider akordion? Kemudian Unleash adalah apa yang anda mahu!

Dikemas dengan ciri-ciri, gelangsar yang indah ini adalah salah satu slider akordion yang terbaik yang anda akan dapati.

Unleash

Ciri-ciri termasuk:

  • Sokongan video HTML5 untuk desktop
  • animasi dipercepatkan perkakasan
  • responsif sepenuhnya
  • menyokong sentuhan
  • dan banyak lagi

Melepaskan Unleash jQuery slider akordeon responsif.

16. AviaSlider

AviaSlider adalah slider tampan yang lain yang termasuk beberapa kesan yang sangat bagus.

Plugin tayangan slaid jQuery yang mudah digunakan termasuk lapan peralihan yang telah ditetapkan, tetapi anda boleh membuat lebih banyak lagi.

AviaSlider

Beberapa ciri lain termasuk:

  • termasuk preloader imej
  • autoplay berhenti apabila pengguna berinteraksi
  • berfungsi dengan peti cahaya cantikPhoto daripada kotak
  • dan lebih lagi

AviaSlider membungkus pukulan, walaupun versi terbungkus seberat 8kb.

17. Slider Evolution

Mulakan revolusi gelangsar dengan Slider Evolution! Kini anda boleh membuat slider JavaScript dengan mudah dengan beberapa kesan terbaik.

Slider Evolution

Dengan Slider Evolution, anda boleh membuat bilangan slider tanpa had, masing-masing dengan tetapan tersuai, untuk diletakkan di mana sahaja di laman web anda.

18. Accordionza

slider jQuery tidak mendapat lebih ringan daripada ini.

Menggunakan hanya 3kb untuk memuatkan, Accordionza adalah pilihan gelangsar akordion super ringan.

Accordionza - jQuery Plugin

Dan jika anda tidak menyukai tiga gaya yang disertakan, anda boleh mengubah HTML dan CSS akordion fleksibel ini.

Ciri-ciri termasuk:

  • navigasi keyboard
  • dengan mudah mengkonfigurasi kesan dan kawalan
  • peningkatan progresif (dapat dilihat tanpa JavaScript diaktifkan)
  • dan banyak lagi

Perlu diingat bahawa Accordionza boleh memaparkan pelbagai jenis kandungan campuran, menjadikannya pilihan yang sangat baik untuk pilihan slider accordion yang fleksibel, pergi ke accordion.

19. mightySlider

The mightySlider memang perkasa.

Anda boleh menggunakannya bukan sahaja sebagai slider imej yang mudah, tetapi juga sebagai gelangsar satu arah penuh dengan pembuatan navigasi berasaskan item untuk reka bentuk laman web satu halaman yang bagus.

mightySlider - Responsive Multipurpose Slider

Anda akan mendapati banyak pilihan di bawah hud:

  • papan kekunci, tetikus, dan sokongan sentuhan
  • peralihan CSS3 dipercepatkan perkakasan
  • bersih, markup sah dan SEO dioptimumkan
  • slaid tanpa had, lapisan kapsyen, dan kesan kapsyen
  • dan banyak lagi

API ini berkuasa dan mesra pemaju, dengan menambah banyak cara ia boleh digunakan.

Dengan kod yang bersih dan dikemukakan dengan baik, mightySlider adalah gelangsar jQuery yang berfikiran maju dan maju.

20. Parallax Slider

Slider Parallax berfungsi seperti Plugin OneByOne Responsif jQuery Responsive, yang membolehkan anda menghidupkan setiap lapisan secara berasingan dalam slaid tertentu.

Anda boleh melakukan ini dengan pelbagai slaid, atau hanya satu slaid, menambah beberapa animasi paralaks yang menarik ke laman web anda.

Parallax Slider - Responsive jQuery Plugin

Ini datang dengan empat jenis slider yang berbeza, semuanya menawarkan kesan animasi, paralaks yang sama.

Seperti banyak slider jQuery lain, ia juga termasuk:

  • disesuaikan sepenuhnya
  • sokongan skrin sentuh
  • lapisan respons sepenuhnya dan tanpa had
  • autoplay, gelung, ketinggian & lebar, dan parameter pemasa
  • dan banyak lagi

Lapisan animasi tidak terhad kepada teks dan imej sama ada. Anda juga boleh memasukkan video YouTube, Vimeo, dan HTML5.

Slider Parallax adalah contoh lain bagaimana kesan-kesan seperti Flash dapat dijalankan lebih baik daripada Flash-dan disokong semua peranti.

Resimpulan

Sangat menarik untuk melihat bagaimana slider jQuery telah berkembang dari sesuatu yang hanya beralih dari satu imej ke seterusnya, ke dalam pelbagai alat kreatif. Kami melihat slider yang 3D, paralaks, halaman penuh, dan responsif sepenuhnya dan boleh dilihat pada desktop atau telefon pintar.

Jika anda tidak menemui gelangsar jQuery yang anda suka dalam senarai ini, anda sentiasa boleh mengambil Tutorial Envato Tuts+ Tutorial Kod jQuery dan membangun sesuatu yang benar-benar baru dan unik. Jika tidak, dapatkan lebih banyak slider jQuery lain di Pasar Envato-ada banyak yang boleh dipilih.

Apakah gelangsar jQuery kegemaran anda dan mengapa?

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.