Advertisement
  1. Code
  2. jQuery

20 jQuery Image Slider Terbaik

by
Difficulty:BeginnerLength:LongLanguages:

Indonesian (Bahasa Indonesia) translation by Nur Fitrina (you can also view the original English article)

Mari kita jujur-slider itu menyenangkan. Sedikit gerakan benar-benar dapat membawa halaman terlihat hidup.

Sliders-juga dikenal sebagai "carousels" atau "gambar slider" — unsur-unsur interaktif untuk menampilkan gambar atau media lain dalam halaman web.

Lihatlah ini 20 jQuery slider berguna dari Envato pasar dan Anda akan melihat ada lebih slider daripada Anda mungkin membayangkan.

1. RoyalSlider

Memiliki sentuhan-ramah dan responsif slider untuk situs web Anda lebih penting sekarang daripada sebelumnya, dan RoyalSlider baik.

Dikembangkan dengan HTML5 dan CSS3 praktik terbaik, itu adalah pilihan padat.

RoyalSlider Touch-Enabled jQuery Image Gallery

Berikut adalah beberapa fitur secara meriah keren lainnya:

  • SEO dioptimalkan
  • Sangat dapat dikonfigurasi
  • Lebih dari 10 starter template
  • Termasuk fallback untuk CSS3 transisi
  • dan banyak lagi

Saya pikir fitur terbaik adalah arsitektur modular yang memberi devs pilihan untuk mengecualikan apa yang tidak mereka butuhkan dari file JS utama, menjaga hal-hal sebagai kurus mungkin.

The RoyalSlider adalah slider JavaScript padat yang harus menjadi tambahan yang bagus untuk setiap web dev toolbox.

2. Slider Revolution

Hal ini tidak mudah untuk menjadi "revolusioner" di ruang slider. Ada begitu banyak pilihan Anda dapat membuat tersedia ketika datang untuk slider, tetapi revolusi Slider tidak mencoba pekerjaan besar.

Ketika datang ke jQuery slider, satu ini memberikan saja tentang segala hal yang Anda inginkan.

Slider Revolution Responsive jQuery Plugin

Daftar fitur untuk slider ini panjang, jadi aku hanya akan menekan poin yang tinggi:

  • Efek paralaks dan kustomisasi animasi
  • SEO dioptimalkan dan pilihan lazy loading
  • Tambahkan lapisan terbatas dan slide dengan link pilihan
  • Termasuk "siap untuk menggunakan" gaya dan sangat kustomisasi
  • dan banyak lagi

Kemampuan untuk menjatuhkan dalam sebuah gambar, pemutar video embed, dan sumber media sosial membuat Revolusi Slider salah satu pilihan yang paling fleksibel dan dapat disesuaikan yang Anda temukan.

3. LayerSlider

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

LayerSlider Responsive jQuery Slider Plugin

Beberapa fitur meliputi:

  • Tema desain template PSD disertakan
  • 13 tema dan 3 tipe navigasi
  • Tambahkan gambar tetap atas slider
  • SEO ramah dan lazy load gambar
  • Transisi CSS3 dengan akselerasi perangkat keras dengan jQuery fallback
  • dan sebagainya

Seperti slider sebelumnya, Anda dapat mampir ke hampir semua konten — bahkan konten multimedia yang dihosting sendiri HTML5.

LayerSlider membawa banyak tindakan ke ruang slider dan benar-benar tampan.

4. jQuery Banner Rotator / Slideshow

JQuery Banner Rotator / Slideshow slider adalah solusi yang mudah. Hal ini sederhana tanpa mengorbankan penting.

jQuery Banner Rotator Slideshow

Termasuk:

  • tooltips, teks deskripsi, dll.
  • thumbnail dan komponen pilihan tampilan
  • timer dan penundaan pilihan secara global atau per-slider
  • beberapa transisi untuk semua slide atau berbeda untuk masing-masing
  • lebih

Sementara jQuery Banner Rotator / tampilan slide dasar dibandingkan dengan jQuery slider lain, itu tidak boleh diabaikan jika Anda ingin sederhana, bersih antarmuka.

5. Semua dalam satu Slider responsif jQuery Slider Plugin

Setiap slider datang ke pasar dengan perspektif yang unik sendiri dan memberikan solusi untuk ceruk slider apa pun menjadi sasaran.

Tetapi tidak yang satu ini.

Semua dalam satu Slider responsif jQuery Slider Plugin adalah... baik... semua dalam satu.

All In One Slider Responsive Jquery Slider Plugin

Saya rasa kebanyakan web devs dan desainer memiliki pergi-untuk solusi, tetapi pada saat yang sama selalu di lookout untuk sesuatu yang baru.

Ini hanya mungkin itu sesuatu yang baru karena termasuk:

  • Banner rotator
  • thumbnail banner
  • banner dengan playlist
  • konten slider
  • carousel

Dan gaya slider ini mencakup sebagian besar — jika tidak semua — fitur yang diperlukan dalam jQuery slider.

Semua dalam satu Slider responsif jQuery Slider Plugin akan slider semua-dalam-satu solusi Anda?

6. UnoSlider

Jika Anda tidak diaktifkan sentuhan dan responsif, Anda tidak melakukan hal itu tepat.

UnoSlider tidak benar.

UnoSlider - Responsive Touch Enabled Slider

Slider ini menemukan yang sweet spot antara sederhana dan kaya fitur.

Fitur termasuk:

  • mudah themeable
  • 12 pra-dibangun tema
  • 40 hadir transisi
  • IE6 + dukungan (karena masih luar sana!)
  • dan banyak lagi

Fitur set bersandar lebih ke arah desain dan gaya, membuat UnoSlider besar konten slider ke tema.

7. Master Slider

Mencari satu jQuery slider untuk memerintah mereka semua?

Mencoba Master Slider untuk ukuran...

Master Slider - jQuery Touch Swipe Slider

Ketika datang untuk terlihat bagus, yang satu ini di eselon atas:

  • prapembebanan cerdas itu
  • lebih dari 25 template
  • hardware-accelerated transisi
  • mendukung sentuh navigasi dan babatan gerakan
  • dan banyak lagi

Transisi interaktif, animasi lapisan, dan hotspot akan benar-benar menangkap mata Anda.

Kumpulan Master Slider adalah sebuah mahakarya.

8. TouchCarousel

TouchCarousel calo "dukungan gratis dan upgrade", tapi ada lebih banyak untuk ini ringan bergaya korsel jQuery slider.

TouchCarousel - jQuery Content Scroller and Slider

Dengan "sentuhan" dalam nama, itu jelas sepenuhnya responsif dan mendukung sentuhan navigasi.

fitrur yang lainya

  • SEO yang ramah
  • Smart autoplay
  • hardware-accelerated CSS3 transisi
  • UI dapat disesuaikan dengan empat Photoshop kulit
  • dan banyak lagi

Namun, TouchCarousel membawa mobile ke tingkat yang baru dengan yang unik fisika berbasis bergulir.

9. Advanced Slider

JQuery slider tidak hanya untuk web. Hal ini juga dapat berguna ketika terintegrasi ke dalam aplikasi, seperti yang dapat Anda lakukan dengan Slider yang canggih.

Advanced Slider - jQuery XML Slider

Menggunakan HTML markup atau XML, ini lanjutan paket slider banyak pukulan:

  • lapisan animasi dan smart video
  • 100 + transisi dan 150 + properti disesuaikan
  • 15 slider kulit, 7 scrollbar kulit dan built-in lightbox mendukung
  • navigasi keyboard, touchscreen dukungan, dan sepenuhnya disesuaikan antarmuka
  • dan banyak lagi

Fitur terbaik, bagaimanapun, harus menjadi Advanced Slider API-membuat solusi sempurna slider untuk aplikasi Anda.

10. jQuery Slider Zoom In/Out efek sepenuhnya responsif

Ini adalah salah satu orang slider jQuery yang membuat Anda mengunjungi demo sebelum Anda mulai membaca tentang fitur, karena Anda ingin tahu apa sih "zoom in/out efek" bahkan berarti.

Berpikir screensaver.

jquery Slider Zoom InOut Effect Fully Responsive

Sementara efek cukup sedikit, efek zoom di slider menambahkan sentuhan yang bagus di world wide web yang penuh dengan gambar statis slider.

Fitur slider yang keren ini meliputi:

  • CSS3 lapisan transisi
  • parameter animasi keluar untuk lapisan
  • lebar tetap, penuh, dan pilihan layar penuh
  • CSS dan HTML animasi teks yang diformat
  • dan banyak lagi

Sementara kebanyakan slider berusaha untuk memberikan banyak efek dalam satu paket, jQuery slider Slider Zoom In/Out efek sepenuhnya responsif memberikan Ken Burns effect dan memberikan baik.

11. Content Timeline

Konten Timeline memang slider yang dirancang secara indah dan kuat — solusi yang sempurna untuk jadwal.

Dari desktop, ponsel, jadwal belum pernah terlihat begitu baik.

Content Timeline

Hal ini sederhana. Mengambil konten Anda, menyortir menurut tanggal, fungsi, dan hanya itu!

Fitur termasuk:

  • kuat dan ringan
  • 11 disesuaikan pengaturan
  • sepenuhnya interaktif, fleksibel dan intuitif
  • Full responsif dan dibangun untuk mobile dan desktop
  • dan banyak lagi

Dengan tujuh metode pengendalian skrip tertanam dan termasuk efek mereda, Timeline konten adalah salah satu slider timeline terbaik Anda akan menemukan.

12. Sexy Slider

Slider seksi tidak hampir seksi seperti dulu, tapi itu telah berusia Yah, membuat solusi yang dapat dipercaya.

Sexy Slider

Itu sangat tidak mengesankan pada blush pertama, tetapi dengan beberapa fine-tuning, slider jQuery fleksibel ini dapat dikonfigurasi sesuai desain Anda sempurna.

Termasuk:

  • Auto slide
  • Keterangan gambar
  • terus-menerus geser
  • 6 efek transisi
  • dan banyak lagi

Sexy Slider yang hanya menunggu untuk Anda untuk membuka kekuatan dan menemukan potensi penuh.

13. Master Slider jQuery Plugin Slider dengan Visual Builder

Master Slider jQuery Plugin Slider dengan Visual Builder membuat bangunan slider snap — tanpa mengorbankan terlihat baik.

Slider gambar dan konten premium ini menawarkan beberapa benar-benar baik hardware-accelerated transisi yang pasti akan menangkap mata Anda.

Master Slider jQuery Slider Plugin with Visual Builder

Fitur termasuk:

  • prapembebanan cerdas itu
  • dibangun untuk mobile dan desktop
  • lebih dari 80 contoh siap-untuk-menggunakan slider
  • lapisan bertopeng transisi, tindakan lapisan dan lapisan overlay
  • dan banyak lagi

Master Slider jQuery Plugin Slider dengan Visual Builder sepenuhnya disesuaikan, SEO ramah, dan juga mendukung video. Dan tentu saja, yang paling jelas: seorang pembangun visual.

14. Translucent

Kebanyakan jQuery slider plugin mencakup beberapa macam desain chrome, dan sementara Anda dapat mengkonfigurasi sesuai dengan keinginan Anda, kadang-kadang Anda hanya ingin menjaga semuanya terkandung dalam slide sendiri.

Masukkan slider tembus.

Translucent - Responsive Banner Rotator Slider

Ada banyak preset, sehingga semua Anda perlu lakukan adalah mengkonfigurasi dan pergi!

Fitur termasuk:

  • 6 variasi gaya
  • 4 efek transisi
  • 2 sentuhan babatan transisi
  • dikonfigurasi tombol dan keterangan
  • dan banyak lagi

Seperti orang lain, itu sentuhan-ramah, responsif, dan memanfaatkan akselerasi hardware.

Translucent adalah desain minimal slider yang melakukan pekerjaan yang besar mendorong konten ke depan.

15. Unleash

Mencari slider akordeon? Maka Unleash adalah apa yang Anda inginkan!

Dikemas dengan fitur, slider indah ini adalah salah satu slider akordeon terbaik Anda akan menemukan.

Unleash

Fitur termasuk:

  • HTML5 video dukungan untuk desktop
  • hardware-accelerated animasi
  • sepenuhnya responsif
  • mendukung sentuh
  • dan banyak lagi

Melepaskan Unleash jQuery responsif slider akordeon.

16. AviaSlider

AviaSlider adalah lain slider tampan yang mencakup beberapa efek yang benar-benar baik.

Mudah-untuk-menggunakan jQuery slideshow plugin ini mencakup delapan transisi standar, namun Anda dapat membuat lebih banyak.

AviaSlider

Beberapa fitur lain termasuk:

  • termasuk gambar preloader
  • Permainan otomatis berhenti ketika pengguna berinteraksi
  • bekerja dengan prettyPhoto Lightbox dari kotak
  • dan banyak lagi

AviaSlider bungkus pukulan, meskipun versi makan yang beratnya hanya 8kb.

17.  Slider Evolution

Memulai sebuah revolusi slider dengan Slider evolusi! Sekarang Anda dapat dengan mudah membuat slider JavaScript dengan beberapa efek terbaik.

Slider Evolution

Dengan  Slider Evolution, Anda dapat membuat jumlah yang tidak terbatas slider, masing-masing dengan pengaturan disesuaikan, untuk dapat ditempatkan di manapun di situs web Anda.

18. Accordionza

jQuery slider tidak mendapatkan jauh lebih ringan daripada ini.

Gunakan hanya 3kb memuat, Accordionza adalah pilihan slider akordeon super ringan.

Accordionza - jQuery Plugin

Dan jika Anda tidak menyukai tiga gaya yang disertakan, Anda dapat men-tweak HTML dan CSS akordeon fleksibel ini.

Fitur termasuk:

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

Perlu diingat bahwa Accordionza dapat menampilkan berbagai jenis konten campuran, menjadikannya pilihan yang sangat baik untuk fleksibel, masuk ke akordeon slider pilihan.

19. mightySlider

MightySlider memang Perkasa.

Anda dapat menggunakan tidak hanya sebagai slider gambar sederhana, tetapi juga sebagai penuh satu-directional slider dengan navigasi berbasis item — membuat untuk desain nice satu halaman website.

mightySlider - Responsive Multipurpose Slider

Anda akan menemukan banyak pilihan di bawah tenda:

  • keyboard, mouse, dan dukungan sentuh
  • hardware-accelerated CSS3 transisi
  • bersih, berlaku markup dan SEO dioptimalkan
  • Unlimited slide, caption lapisan, dan efek Keterangan
  • dan banyak lagi

API adalah kuat dan developer-ramah, menambah banyak cara yang dapat digunakan.

Bersih dan baik komentar kode, mightySlider yang baik, berpikiran maju jQuery slider.

20. Parallax Slider

Slider paralaks bekerja seperti jQuery Plugin Slider OneByOne responsif, memungkinkan Anda untuk menghidupkan setiap lapisan secara terpisah dalam slide tertentu.

Anda dapat melakukan ini dengan beberapa slide, atau bahkan hanya satu slide, menambahkan beberapa animasi paralaks menarik ke situs web Anda.

Parallax Slider - Responsive jQuery Plugin

Ini datang dengan empat jenis slider, Semua menawarkan sama animasi, efek paralaks.

Seperti banyak jQuery slider, juga meliputi:

  • sepenuhnya disesuaikan
  • dukungan touchscreen
  • lapisan sepenuhnya responsif dan tak terbatas
  • parameter Autoplay, loop, tinggi & lebar dan timer
  • dan banyak lagi

Animasi lapisan tidak terbatas untuk teks dan gambar yang baik. Anda juga dapat menyertakan YouTube, Vimeo, dan HTML5 video.

The Parallax Slider merupakan salah satu contoh yang baik bagaimana Flash-seperti efek dapat dilaksanakan lebih baik daripada Flash — dan didukung di semua perangkat.

Kesimpulan

Hal ini menarik untuk melihat bagaimana jQuery slider telah berkembang dari sesuatu yang hanya beralih dari satu gambar ke yang berikutnya, menjadi berbagai alat kreatif. Kita melihat slider yang 3D paralaks, halaman penuh, dan sepenuhnya responsif dan dapat dilihat pada desktop atau smartphone.

Jika Anda tidak menemukan jQuery slider Anda menyukai dalam daftar ini, Anda dapat selalu mengambil Envato Tuts + jQuery Tutorial kode dan mengembangkan sesuatu benar-benar baru dan unik. Jika tidak, menggali melalui banyak lainnya besar jQuery slider Envato market-ada banyak untuk memilih dari.

Apa memang slider jQuery favorit Anda dan mengapa?

Advertisement
Advertisement
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.