Izinkan saya memulai dengan mengatakan bahwa artikel ini ditulis untuk membahas tentang cara membuat penggeser gulir gambar untuk halaman web. Artikel ini sama sekali tidak bersifat mendidik, hanya berfungsi sebagai contoh bagaimana objek pertimbangan kami dapat diimplementasikan. Anda dapat menggunakan kode yang disediakan dalam artikel ini sebagai semacam template untuk perkembangan serupa; Saya berharap dapat menyampaikan kepada pembaca inti dari apa yang telah saya tulis dengan cukup detail dan mudah diakses.

Dan sekarang, belum lama ini saya perlu memasang slider di satu situs web, tetapi setelah mencari skrip yang sudah jadi di Internet, saya tidak menemukan sesuatu yang berguna, karena beberapa tidak berfungsi sesuai kebutuhan saya, sementara yang lain tidak memulai sama sekali tanpa kesalahan di konsol. Menggunakan jQuery - plugin Untuk slider sepertinya terlalu tidak menarik bagi saya, karena... Meskipun ini akan menyelesaikan masalah, saya tidak akan memahami cara kerja mekanisme ini, dan menggunakan plugin hanya untuk satu penggeser tidaklah terlalu optimal. Saya juga tidak terlalu ingin memahami skrip yang bengkok, jadi saya memutuskan untuk menulis skrip saya sendiri untuk penggeser, yang akan saya tandai sendiri sesuai kebutuhan.

Pertama, kita perlu memutuskan logika slider itu sendiri, dan kemudian melanjutkan ke implementasi. Pada tahap ini, pemahaman yang jelas tentang cara kerja mekanisme ini sangat penting, karena tanpanya kita tidak dapat menulis kode yang bekerja persis seperti yang kita lakukan. ingin.

Objek utama kita adalah area pandang, yaitu blok di mana kita akan melihat bagaimana gambar kita berputar, di dalamnya kita akan memilikinya pembungkus slide, ini akan menjadi blok kita yang berisi semua gambar yang berbaris dalam satu baris, dan yang akan mengubah posisinya di dalam area pandang.


Selanjutnya, pada sisi dalam area pandang, secara vertikal di tengah akan ada tombol mundur dan maju, ketika Anda mengkliknya kami juga akan mengubah posisi kami pembungkus slide relatif area pandang, sehingga menyebabkan efek menggulir gambar. Dan terakhir, objek terakhir adalah tombol navigasi kita yang terletak di bagian bawah area pandang.


Ketika kita mengkliknya, kita cukup melihat nomor seri tombol ini dan memindahkannya ke slide yang kita butuhkan, sekali lagi dengan menggeser pembungkus slide(pergeseran akan dilakukan melalui perubahan mengubah properti css, yang nilainya akan terus dihitung).

Saya pikir logika bagaimana semua ini bekerja harus jelas setelah apa yang saya nyatakan di atas, tetapi jika kesalahpahaman masih muncul di suatu tempat, maka semuanya akan menjadi lebih jelas pada kode di bawah ini, Anda hanya perlu sedikit kesabaran.

Sekarang mari kita menulis! Pertama-tama, mari kita buka berkas indeks dan tulis markup yang kita butuhkan di sana:

Seperti yang Anda lihat, tidak ada yang rumit, blok-untuk-slider berfungsi hanya sebagai blok di mana penggeser kita akan ditempatkan, di dalamnya sudah ada area pandang, yang berisi milik kita pembungkus slide, alias daftar bersarang, di sini li adalah slide, dan gambar- gambar di dalamnya. Harap perhatikan fakta bahwa semua gambar harus memiliki ukuran atau setidaknya proporsi yang sama, jika tidak, penggeser akan terlihat bengkok, karena dimensinya secara langsung bergantung pada proporsi gambar.

Sekarang kita perlu mengatur gaya semua ini; biasanya gaya tidak terlalu dikomentari, tetapi saya memutuskan untuk tetap memperhatikan hal ini agar tidak ada kesalahpahaman di masa depan.

Mari kita mulai dengan blok-untuk-slider, ini, saya ulangi, adalah blok kita di halaman, yang akan kita alokasikan untuk penggeser, tingginya akan bergantung pada lebarnya dan proporsi gambar kita, karena area pandang menempati seluruh lebarnya blok-untuk-slider, lalu diriku sendiri menggeser memiliki lebar yang sama, dan karenanya, gambar di dalamnya berubah tingginya tergantung pada lebarnya (proporsinya dipertahankan). Saya menempatkan elemen ini pada halaman saya secara horizontal di tengah, dengan 100px menjorok dari atas, membuat posisinya lebih nyaman sebagai contoh.

Elemen area pandang, sebagaimana telah disebutkan, menempati seluruh lebar kita blok-untuk-slider, ia memiliki properti meluap: tersembunyi, ini akan memungkinkan kita menyembunyikan feed gambar kita, yang melampaui area pandang.


Mengikuti properti css - pilih pengguna: tidak ada, memungkinkan Anda menghilangkan sorotan biru elemen individu slider dengan banyak klik pada tombol.

Mari kita lanjutkan ke pembungkus slide, Mengapa posisi: relatif, bukan mutlak? Semuanya sangat sederhana, karena... jika kita memilih pilihan kedua, maka dengan properti area pandang meluap: tersembunyi Tampaknya bagi kami itu bukan apa-apa, karena... saya sendiri area pandang tidak akan menyesuaikan dengan ketinggian pembungkus slide, karena itu akan terjadi tinggi:0. Mengapa lebar penting dan mengapa kami mengaturnya? Faktanya adalah slide kita akan memiliki lebar yang sama 100% dari area pandang, dan untuk menyusunnya dalam satu garis, kita memerlukan tempat di mana mereka akan berdiri, jadi lebarnya pembungkus slide harus sama Lebar area pandang 100%., dikalikan dengan jumlah slide (dalam kasus saya dengan 4). Tentang transisi Dan fungsi waktu transisi, lalu di sini 1 detik Artinya perubahan adalah perubahan posisi pembungkus slide akan terjadi dalam 1 detik dan kami akan mengamatinya, dan kemudahan masuk-keluar– jenis animasi yang dimulai dengan lambat, dipercepat ke tengah, dan kemudian melambat lagi; di sini Anda dapat mengatur nilainya sesuai kebijaksanaan Anda.

Blok properti berikutnya menentukan pembungkus slide dan elemen turunannya tidak memiliki padding, tidak ada komentar di sini.

Selanjutnya kita menata slide kita, lebarnya harus sama dengan lebarnya area pandang, tapi karena mereka masuk pembungkus slide, yang lebarnya sama dengan lebar viewport dikalikan dengan jumlah slide, maka untuk mendapatkan lebarnya area pandang sekali lagi, kita membutuhkan 100% lebarnya pembungkus slide bagi dengan jumlah slide (dalam kasus saya, sekali lagi, dengan 4). Lalu kita mengubahnya menjadi elemen sebaris dengan bantuan tampilan: sebaris dan atur aliran ke kiri dengan menambahkan properti mengapung: kiri. Tentang gaya daftar: tidak ada Saya dapat mengatakan bahwa saya menggunakannya untuk menghapus penanda default li, dalam banyak kasus adalah sejenis standar.

Bersama slide-img Sederhana saja, gambar akan memenuhi seluruh lebarnya menggeser, menggeser sesuaikan dengan ketinggiannya, pembungkus slide sesuaikan dengan ketinggian menggeser, dan tingginya area pandang pada gilirannya akan mengambil nilai ketinggian pembungkus slide, jadi tinggi penggeser kita akan bergantung pada proporsi gambar dan ukuran blok yang disediakan untuk penggeser, yang sudah saya tulis di atas.

Saya pikir pada titik ini kita sudah mengetahui gayanya, mari kita buat peragaan slide sederhana tanpa tombol untuk saat ini, dan setelah kita memastikannya berfungsi dengan baik, kita akan menambahkan dan menatanya.

Mari kita buka berkas js, yang akan berisi kode slider, jangan lupa sambungkan jQuery, Karena Kami akan menulis menggunakan kerangka ini. Omong-omong, pada saat menulis artikel ini, saya menggunakan versinya jQuery 3.1.0. File dengan skrip itu sendiri harus disertakan di akhir tag tubuh, Karena kami akan bekerja dengan elemen DOM yang perlu diinisialisasi terlebih dahulu.

Untuk saat ini kita perlu mendeklarasikan beberapa variabel, salah satunya akan menyimpan nomor slide yang kita lihat momen tertentu waktu masuk area pandang, aku meneleponnya geserSekarang, dan yang kedua akan menyimpan jumlah slide yang sama, ini slideCount.

Variabel geserSekarang perlu untuk menetapkan nilai awal 1, karena ketika halaman dimuat, berdasarkan markup kita, kita akan melihat slide pertama masuk area pandang.

DI DALAM slideCount kami akan memasukkan jumlah anak pembungkus slide, semuanya logis di sini.
Selanjutnya, Anda perlu membuat fungsi yang bertanggung jawab untuk berpindah slide dari kanan ke kiri, mari kita deklarasikan:

Kita akan memanggilnya di blok utama kode kita, yang akan kita bahas nanti, tapi untuk saat ini kita akan memberi tahu fungsi kita apa yang perlu dilakukannya:

Pertama, kita periksa apakah kita sedang berada di slide terakhir feed kita? Untuk melakukan ini, kami mengambil jumlah semua slide yang kami gunakan $("#slidewrapper").children().panjang dan cek dengan nomor slide kita, jika ternyata sama berarti kita harus mulai menampilkan feed lagi, dari slide 1, artinya kita ubah mengubah properti css pada pembungkus slide pada terjemahkan(0, 0), sehingga menggesernya ke posisi awal agar slide pertama muncul di bidang pandang kita, jangan sampai kita lupakan juga –webkit dan –ms untuk tampilan lintas-browser yang memadai (lihat. referensi properti css). Setelah ini, jangan lupa untuk memperbarui nilai variabelnya geserSekarang, memberitahunya bahwa slide nomor 1 sedang dilihat: slideSekarang = 1;

Syarat yang sama juga termasuk memeriksa apakah jumlah slide yang kita lihat sesuai dengan jumlah slide kita, namun jika entah bagaimana hal ini tidak terpenuhi, maka kita akan kembali ke slide pertama lagi.

Jika syarat pertama tidak terpenuhi, maka ini menunjukkan bahwa kita terpenuhi saat ini Kita tidak berada pada slide terakhir atau pada slide yang tidak ada, yang berarti kita perlu beralih ke slide berikutnya, kita akan melakukannya dengan menggeser pembungkus slide ke kiri dengan nilai yang sama dengan lebarnya area pandang, perpindahan akan kembali terjadi melalui sifat familiar menerjemahkan, yang nilainya akan sama "terjemahkan(" + terjemahkanLebar + "px, 0)", Di mana terjemahkanLebar– jarak yang kita tempuh pembungkus slide. Omong-omong, mari kita deklarasikan variabel ini di awal kode kita:

Setelah berpindah ke slide berikutnya, mari beri tahu slide kitaSekarang kita melihat slide berikutnya: slideSekarang++;

Pada titik ini, beberapa pembaca mungkin bertanya-tanya mengapa kami tidak menggantinya $("#viewport").lebar() ke beberapa variabel, misalnya lebar slide untuk selalu mengetahui lebar slide kita? Jawabannya sangat sederhana, jika situs kita adaptif, maka blok yang dialokasikan untuk slider juga adaptif, berdasarkan ini kita dapat memahami bahwa ketika mengubah ukuran lebar jendela tanpa memuat ulang halaman (misalnya, memutar halaman telepon di sisinya), lebarnya area pandang akan berubah, dan karenanya, lebar satu slide akan berubah. Dalam hal ini milik kita pembungkus slide akan digeser ke nilai lebar aslinya yang artinya gambar akan ditampilkan sebagian atau tidak ditampilkan sama sekali di area pandang. Dengan menulis di fungsi kita $("#viewport").lebar() alih-alih lebar slide kami memaksanya untuk menghitung lebarnya setiap kali kami berpindah slide area pandang, sehingga memastikan bahwa ketika lebar layar berubah tajam, kita dapat menggulir ke slide yang kita perlukan.

Namun, kita telah menulis sebuah fungsi, sekarang kita perlu memanggilnya setelah selang waktu tertentu, kita juga dapat menyimpan interval tersebut dalam sebuah variabel sehingga jika kita ingin mengubahnya, kita hanya dapat mengubah satu nilai dalam kode:

Waktu dalam js ditunjukkan dalam milidetik.

Sekarang mari kita tulis konstruksi berikut:

Semuanya sangat sederhana di sini, kami sedang mempelajari desainnya $(dokumen).siap(fungsi () ()) kita sedang membicarakan tentang apa langkah berikutnya harus dilakukan setelahnya beban penuh dokumen. Selanjutnya, kita cukup memanggil fungsinya berikutnyaGeser dengan interval sama dengan slideInterval, menggunakan fungsi bawaan setInterval.

Setelah semua tindakan yang kami lakukan di atas, penggeser kami akan berputar dengan sempurna, tetapi jika terjadi kesalahan pada Anda, maka masalahnya mungkin ada pada versinya. jQuery, atau di koneksi yang salah file apa pun. Juga tidak perlu mengesampingkan bahwa Anda mungkin telah membuat kesalahan di suatu tempat dalam kode, jadi saya hanya dapat menyarankan Anda untuk memeriksa ulang semuanya.


Sementara itu, mari kita lanjutkan, tambahkan ke penggeser kita fungsi seperti berhenti menggulir saat mengarahkan kursor, untuk ini kita perlu menulis di blok kode utama (di dalam konstruksi $(document).ready(function () ()) hal ini:

Untuk mulai menganalisis kode ini, kita perlu mengetahui apa itu beralihInterval. Pertama, ini adalah variabel yang menyimpan panggilan berkala ke fungsi nextSlide, sederhananya, kita memiliki baris kode ini: setInterval(Slide berikutnya, Interval slide);, berubah menjadi ini: switchInterval = setInterval(Slide berikutnya, Interval slide);. Setelah manipulasi ini, blok kode utama kami diambil tampilan selanjutnya:

Di sini saya menggunakan acara melayang, yang artinya "saat melayang", acara ini memungkinkan saya melacak momen ketika saya mengarahkan kursor ke suatu objek, di dalam hal ini pada area pandang.

Setelah melayang, saya menghapus interval yang saya tunjukkan dalam tanda kurung (ini milik kami beralihInterval), kemudian, dipisahkan dengan koma, saya menulis apa yang akan saya lakukan ketika saya memindahkan kursor kembali, di blok ini saya kembali menetapkan ke kami beralihInterval pemanggilan fungsi berkala berikutnyaGeser.

Sekarang, jika kita mengujinya, kita dapat melihat bagaimana penggeser kita bereaksi terhadap gerakan melayang, menghentikan perpindahan slide.

Sekarang saatnya menambahkan tombol ke slider kita, mari kita mulai dengan tombol maju dan mundur.

Pertama-tama, mari kita tandai:

Pada awalnya markup ini mungkin tidak bisa dimengerti, saya akan langsung mengatakan bahwa saya menggabungkan kedua tombol ini menjadi satu div dengan kelas sebelumnya-berikutnya-btns hanya untuk kenyamanan Anda, Anda tidak perlu melakukan ini, hasilnya tidak akan berubah, sekarang kami akan menambahkan gaya ke dalamnya dan semuanya akan menjadi jelas:

Pertama kita posisikan tombol kita melalui posisi: mutlak, dengan demikian kami akan dengan bebas mengontrol posisi mereka di dalam kami area pandang, lalu kami menunjukkan ukuran tombol-tombol ini dan penggunaannya radius perbatasan Mari kita membulatkan sudutnya sehingga tombol-tombol ini berubah menjadi lingkaran. Warnanya akan menjadi putih #fff, dan lekukannya dari tepi atas area pandang akan sama dengan setengah tingginya area pandang dikurangi setengah tinggi tombol itu sendiri (dalam kasus saya 25px), dengan cara ini kita dapat memposisikannya secara vertikal di tengah. Selanjutnya kita akan menunjukkan bahwa ketika kita mengarahkan kursor ke atasnya, kursor kita akan berubah menjadi penunjuk dan terakhir, mari beri tahu tombol kita satu per satu bahwa tombol tersebut harus diatur mundur 20px dari tepinya sehingga kita dapat melihatnya sesuai keinginan kita.

Sekali lagi, Anda dapat menata elemen halaman sesuai keinginan Anda, saya hanya memberikan contoh gaya yang saya putuskan untuk digunakan.

Setelah ditata, penggeser kita akan terlihat seperti ini:


Selanjutnya, kita kembali ke milik kita berkas js, tempat kami menjelaskan pengoperasian tombol kami. Baiklah, mari tambahkan satu fungsi lagi, ini akan menunjukkan kepada kita slide sebelumnya:

Itu disebut sebelumnyaSlide, itu akan dipanggil hanya ketika Anda mengklik sebelumnya-btn. Pertama kita cek apakah kita ada di slide 1 atau tidak, disini kita cek juga apakah milik kita geserSekarang melampaui rentang sebenarnya dari slide kami dan, jika salah satu kondisi terpicu, kami akan berpindah ke slide terakhir, menggeser pembungkus slide dengan nilai yang kita perlukan. Kami akan menghitung nilai ini menggunakan rumus: (lebar satu slide) * (jumlah slide - 1), kami mengambil semua ini dengan tanda minus, karena kita geser ke kiri, ternyata begitu area pandang sekarang akan menunjukkan kepada kita slide terakhir. Di akhir blok ini kita juga perlu memberitahukan variabelnya geserSekarang bahwa slide terakhir sekarang ada di bidang pandang kita.

Jika kita tidak berada di slide pertama, maka kita perlu mundur 1, untuk ini kita mengubah propertinya lagi transformasi untuk slidewrapper. Rumusnya adalah: (lebar satu slide) * (jumlah slide saat ini - 2), sekali lagi kita ambil semua ini dengan tanda minus. Tapi kenapa -2, dan bukan -1, kita perlu mundur 1 slide saja? Faktanya adalah jika kita, katakanlah, pada slide ke-2, maka variabelnya X properti transformasi: terjemahkan (x,0) kita pembungkus slide sudah sama dengan lebar satu slide, jika kita memberitahunya bahwa kita perlu mengurangi 1 dari jumlah slide saat ini, kita akan mendapatkan satu lagi, yang sudah kita geser pembungkus slide, jadi Anda perlu menggeser lebar yang sama ke 0 area pandang, yang artinya di slideNow - 2.

Sekarang kita hanya perlu menambahkan baris ini ke blok kode utama:

$("#prev-btn").klik(fungsi() ( prevSlide(); ));

Di sini kita hanya melacak apakah tombol kita diklik, dan dalam hal ini kita memanggil fungsi yang kita perlukan, semuanya sederhana dan logis.

Sekarang mari tambahkan tombol navigasi slide dan kembali ke markup lagi: area pandang Seperti yang Anda lihat, di dalam daftar bersarang telah muncul, beri pengidentifikasi nav-btns li, di dalamnya – tombol navigasi kami, kami akan menetapkan kelasnya slide-nav-btn

#nav-btns ( posisi: absolut; lebar: 100%; bawah: 20px; padding: 0; margin: 0; perataan teks: tengah; ) .slide-nav-btn ( posisi: relatif; tampilan: blok sebaris; gaya daftar: tidak ada; lebar: 20px; warna latar: #fff; margin: 3px; .slide-nav-btn:hover ( kursor: penunjuk; ) daftar bersarang telah muncul, beri pengidentifikasi Blok posisi: mutlak, di mana tombol kita berada, kita berikan propertinya area pandang, agar tidak meregang pembungkus slide tingginya, karena pada posisi: relatif milik , kita atur lebarnya menjadi 100% agar menggunakan perataan teks: tengah area pandang pusatkan tombol secara horizontal relatif terhadap , lalu menggunakan properti dasar

Kami memberi tahu blok kami bahwa itu harus 20px dari tepi bawah. Dengan tombol kami melakukan hal yang sama seperti dengan slide, tapi sekarang kami memberikannya tampilan: blok sebaris tampilan: sebaris, Karena pada mereka tidak menanggapinya Dan lebar tinggi radius perbatasan, Karena berada dalam blok yang benar-benar diposisikan. Mari kita buat warnanya menjadi putih dan gunakan apa yang sudah kita ketahui

Mari kita beri mereka bentuk lingkaran. Saat kita mengarahkan kursor ke atasnya, kita akan mengubah tampilan kursor kita ke tampilan biasa. Sekarang mari kita mulai:
jQuery - bagian

$(".slide-nav-btn").click(function() ( navBtnId = $(this).index(); if (navBtnId + 1 != slideNow) ( TranslateWidth = -$("#viewport"). lebar() * (navBtnId); $("#slidewrapper").css(( "transform": "translate(" + TranslateWidth + "px, 0)", "-webkit-transform": "translate(" + TranslateWidth + "px, 0)", "-ms-transform": "translate(" + TranslateWidth + "px, 0)", )); slideNow = navBtnId + 1 )); – tombol navigasi kami, kami akan menetapkan kelasnya Inilah kami ketika Anda mengklik kami memanggil fungsi yang pertama kali ditugaskan ke variabel navBtnId memanggil fungsi yang pertama kali ditugaskan ke variabel nilai 1 dicatat. Selanjutnya kita lakukan pengecekan dimana kita menambahkan nomor seri tombol satu, untuk mendapatkan angka seolah-olah hitungan mundur dimulai bukan dari 0, tetapi dari 1, kita bandingkan angka ini dengan nomor slide saat ini, jika bertepatan, maka kita tidak akan mengambil tindakan apa pun, karena slide yang diinginkan sudah masuk area pandang.

Jika slide yang kita butuhkan tidak terlihat area pandang, lalu kita menghitung jarak yang harus kita tempuh pembungkus slide ke kiri, lalu ubah nilainya mengubah properti css untuk menerjemahkan(jarak yang sama dalam piksel, 0). Kami sudah melakukan ini lebih dari sekali, jadi tidak ada pertanyaan. Pada akhirnya, kami menyimpan kembali nilai slide saat ini ke dalam variabel geserSekarang, nilai ini dapat dihitung dengan menambahkan satu ke indeks tombol yang diklik.

Itu saja, sebenarnya jika ada yang kurang jelas maka saya akan meninggalkan link ke jsfiddle yang akan menyediakan semua kode yang tertulis di materi.

Terima kasih atas perhatian Anda!

Tag:

• penggeser jquery
• css
• animasi css3
• html

Waktu tidak berhenti dan seiring dengan itu kemajuan. Hal ini juga berdampak pada Internet. Anda sudah dapat melihat perubahannya penampilan situs dan sangat populer desain responsif. Dalam hal ini, adaptif penggeser untuk situs telah menjadi sangat populer dan relevan. Cukup banyak yang baru bermunculan jquery adaptif penggeser, galeri dan komidi putar.

Jika Anda ingin menginstal universal penggeser atau korsel Anda dapat mengunjungi situs web Anda dengan

Penggeser untuk situs

1. Penggeser Postingan Horisontal Responsif

Korsel horizontal adaptif dengan instruksi rinci pada instalasi. Itu selesai pada gaya sederhana, namun Anda dapat menatanya sesuai keinginan Anda.

2. Penggeser di Glide.js

Slider ini cocok untuk situs web apa pun. Ini menggunakan Glide.js dengan sumber terbuka. Warna penggeser dapat dengan mudah diubah.

Penggeser adaptif untuk situs web dengan konten. Sorotan penggeser ini adalah efek gambar 3D, serta animasi berbeda dengan tampilan acak.

4. Slider menggunakan kanvas HTML5

Slider yang sangat indah dan mengesankan dengan partikel interaktif. Itu dibuat menggunakan kanvas HTML5,

5. Penggeser Perubahan Gambar

Slider dengan efek morphing. DI DALAM dalam contoh ini Slider ini sangat cocok untuk portofolio web developer atau web studio dalam bentuk portofolio.

6. Penggeser melingkar

Slider berbentuk lingkaran dengan efek membalik gambar.

7. Slider dengan latar belakang buram

Penggeser Responsif dengan beralih dan mengaburkan latar belakang.

8. Penggeser mode responsif

Slider situs web yang sederhana, ringan, dan responsif.

9. Slicebox - penggeser gambar 3D jQuery(DIPERBARUI)

Versi terbaru dari Slicebox slider dengan perbaikan dan fitur baru.

Plugin JQuery untuk membuat grid gambar fleksibel yang akan mengganti gambar menggunakan animasi dan pengaturan waktu yang berbeda.

Slider untuk situs, bagian kedua.

11. Penggeser fleksibel

Universal plugin gratis untuk situs web Anda. Plugin ini hadir dalam beberapa pilihan slider dan carousel.

12. Bingkai foto

Fotoramaadalah plugin universal. Ini memiliki banyak pengaturan. Semuanya bekerja dengan cepat dan mudah, dan Anda juga dapat melihat slide dalam layar penuh. Slider dapat digunakan di keduanya ukuran tetap dan adaptif, dengan dan tanpa thumbnail, dengan dan tanpa scrolling melingkar, dan masih banyak lagi. Dengan menggunakan bingkai foto, Anda dapat membuat slider adaptif yang menarik untuk situs web Anda.

P.S.Saya memasang penggeser beberapa kali dan menurut saya ini adalah salah satu yang terbaik

13. Galeri slider 3D gratis dan adaptif dengan thumbnail.

Penggeser galeri eksperimental Tata Letak 3DPanel dengan jaring dan efek yang menarik animasi.

14. Penggeser di css3

Slider adaptif dibuat menggunakan CSS3 dengan tampilan konten halus dan animasi ringan.

adalah penggeser gambar dengan luar biasa efek visual dan animasi.

17. Elastis

Slider elastis dengan respons penuh dan thumbnail slide.

18. Celah

Ini adalah slider responsif layar penuh menggunakan animasi css3. Slidernya dibuat dalam dua versi dan animasinya dibuat sangat tidak biasa.

19. Galeri foto adaptif plus

Sederhana penggeser gratis-galeri dengan pemuatan gambar.

20. Slider Responsif untuk WordPress

Slider responsif dan gratis untuk WP.

21. Penggeser Konten Paralaks

Slider dengan efek paralaks dan kontrol setiap elemen menggunakan CSS3.

22. Slider dengan tautan musik

Penggeser dengan menggunakan terbuka kode sumber Pemain JP. Slider ini menyerupai presentasi dengan musik.

Slider untuk situs, bagian ketiga.

23. Penggeser dengan jmpress.js

Penggeser adaptif didasarkan pada jmpress.js dan karenanya memungkinkan Anda menggunakan beberapa efek 3D yang menarik pada slide Anda.

24. Tayangan Slide Arahkan Cepat

Pertunjukan slide dengan peralihan cepat slide. Slide mengaktifkan hover.

Gambar akordeon menggunakan css3.

Ini adalah galeri responsif yang dioptimalkan untuk perangkat sentuh.

Waktu tidak berhenti dan seiring dengan itu kemajuan. Hal ini juga berdampak pada Internet. Anda sudah dapat melihat bagaimana tampilan situs web berubah; desain adaptif sangat populer. Dan dalam hal ini, banyak hal baru yang bermunculan adaptif slider jquery , galeri, carousel, atau plugin serupa.
1. Penggeser Postingan Horisontal Responsif

Korsel horizontal adaptif dengan petunjuk pemasangan terperinci. Itu dibuat dengan gaya sederhana, tetapi Anda dapat menatanya sesuai keinginan Anda.

2. Penggeser di Glide.js

Slider ini cocok untuk situs web apa pun. Ini menggunakan Glide.js sumber terbuka. Warna penggeser dapat dengan mudah diubah.

3. Tayangan Slide Konten Miring

Penggeser konten responsif. Sorotan dari penggeser ini adalah efek 3D dari gambar, serta berbagai animasi tampilan acak.

4. Slider menggunakan kanvas HTML5

Slider yang sangat indah dan mengesankan dengan partikel interaktif. Itu dibuat menggunakan kanvas HTML5,

5. Penggeser Perubahan Gambar

Slider dengan efek morphing (Transformasi halus dari satu objek ke objek lainnya). Dalam contoh ini, slider sangat cocok untuk portofolio pengembang web atau studio web dalam bentuk portofolio.

6. Penggeser melingkar

Slider berbentuk lingkaran dengan efek membalik gambar.

7. Slider dengan latar belakang buram

Penggeser adaptif dengan peralihan dan keburaman latar belakang.

8. Penggeser mode responsif

Slider situs web yang sederhana, ringan, dan responsif.

9. Slicebox - penggeser gambar 3D jQuery(DIPERBARUI)

Versi terbaru dari penggeser Slicebox dengan perbaikan dan fitur baru.

10.Kisi Gambar Responsif Animasi Gratis

Plugin JQuery untuk membuat grid gambar fleksibel yang akan mengganti gambar menggunakan animasi dan pengaturan waktu yang berbeda. Ini bisa terlihat bagus sebagai latar belakang atau elemen dekoratif di situs web, karena kita dapat menampilkan gambar baru dan transisinya secara selektif. Plugin ini hadir dalam beberapa versi.

11. Penggeser fleksibel

Plugin gratis universal untuk situs web Anda. Plugin ini hadir dalam beberapa pilihan slider dan carousel.

12. Bingkai foto

Fotorama adalah plugin universal. Ini memiliki banyak pengaturan, semuanya bekerja dengan cepat dan mudah, dan Anda dapat melihat slide dalam layar penuh. Penggeser dapat digunakan dalam ukuran tetap dan adaptif, dengan atau tanpa gambar mini, dengan atau tanpa pengguliran melingkar, dan banyak lagi.

P.S.Saya memasang penggeser beberapa kali dan menurut saya ini adalah salah satu yang terbaik

13. Galeri slider 3D gratis dan adaptif dengan thumbnail.

Penggeser galeri eksperimental Tata Letak 3DPanel dengan grid dan efek animasi yang menarik.

14. Penggeser di css3

Slider adaptif dibuat menggunakan CSS3 dengan tampilan konten halus dan animasi ringan.

15. Penggeser WOW

Penggeser WOW adalah penggeser gambar dengan efek visual yang menakjubkan.

17. Elastis

Slider elastis dengan respons penuh dan thumbnail slide.

18. Celah

Ini adalah slider responsif layar penuh menggunakan animasi css3. Slider dibuat dalam dua versi. Animasi ini dilakukan dengan sangat luar biasa dan indah.

19. Galeri foto adaptif plus

Sederhana penggeser galeri gratis dengan memuat gambar.

20. Slider Responsif untuk WordPress

Slider gratis adaptif untuk WP.

21. Penggeser Konten Paralaks

Slider dengan efek paralaks dan kontrol setiap elemen menggunakan CSS3.

22. Slider dengan tautan musik

Slider menggunakan kode sumber terbuka JPlayer. Slider ini menyerupai presentasi dengan musik.

23. Penggeser dengan jmpress.js

Slider responsif didasarkan pada jmpress.js dan karenanya memungkinkan Anda menambahkan beberapa efek 3D yang menarik ke slide Anda.

24. Tayangan Slide Arahkan Cepat

Pertunjukan slide dengan peralihan slide cepat. Slide mengaktifkan hover.

25. Gambar Akordeon dengan CSS3

Gambar akordeon menggunakan css3.

26. Plugin Galeri Sentuhan yang Dioptimalkan

Ini adalah galeri responsif yang dioptimalkan untuk perangkat sentuh.

27. Galeri 3D

Galeri Dinding 3D- dibuat untuk peramban Safari, dimana efek 3D akan terlihat. Jika dilihat di browser lain, fungsinya akan baik-baik saja tetapi efek 3D tidak akan terlihat.

28. Penggeser dengan penomoran halaman

Slider responsif dengan penomoran halaman menggunakan slider JQuery UI. Idenya adalah menggunakan konsep navigasi sederhana. Dimungkinkan untuk memundurkan semua gambar atau berpindah slide demi slide.

29. Montase Gambar dengan jQuery

Secara otomatis mengatur gambar tergantung pada lebar layar. Suatu hal yang sangat berguna ketika mengembangkan website portofolio.

30. Galeri 3D

Slider melingkar 3D sederhana menggunakan css3 dan jQuery.

31. Modus layar penuh dengan efek 3D menggunakan css3 dan jQuery

Slider dengan kemampuan melihat gambar layar penuh dengan transisi yang indah.

Di Internet Anda dapat menemukan banyak plugin bagus untuk membuat carousel dan slider jQuery. Mereka memungkinkan Anda menerapkan pengguliran dinamis dengan efek tambahan.

Ini adalah salah satu tren paling populer dalam desain web selama beberapa tahun terakhir. Selain itu, penggunaan perpustakaan siap pakai dan plugin jQuery dapat menghemat waktu secara signifikan. Yang perlu Anda lakukan hanyalah memberikan tautan ke file JavaScript dan CSS, lalu menerapkan efeknya ke elemen HTML yang diinginkan.

Anda juga dapat menginstal pengaturan sendiri dan gaya CSS. Artikel hari ini bertujuan untuk memperkenalkan Anda plugin jQuery responsif untuk membuat carousel dan slider.

Mengganggu – plugin jQuery untuk membuat penggeser konten layar penuh yang sensitif terhadap sentuhan

Slider carousel konten jQuery layar penuh responsif dengan dukungan layar sentuh. Plugin ini didistribusikan di bawah perjanjian lisensi LISENSI PUBLIK UMUM GNU v3:

Neoslide: plugin carousel jQuery yang sederhana dan dapat diperluas

Plugin jQuery sederhana dan dapat diperluas yang memungkinkan Anda menggunakan penggeser yang sepenuhnya dapat disesuaikan di halaman web mana pun:

Hslider: plugin galeri gambar responsif lebar penuh

Plugin lain untuk menampilkan gambar menggunakan korsel adaptif jQuery dengan kontrol dan durasi penundaan khusus:

Carousel 3D: plugin carousel jQuery dengan efek rotasi 3D

Slider Ramping: Korsel jQuery Responsif Layar Penuh

Korsel jQuery mini dan menarik untuk menampilkan konten dan gambar berbagai jenis navigasi ( Panah SVG dengan thumbnail gambar, elemen penomoran halaman, atau tab):

PaW Carousel: Carousel Responsif Didukung oleh jQuery

PaW Carousel (v2) adalah plugin miniatur untuk membuat carousel jQuery sederhana dan responsif dengan thumbnail gambar:

Carousel Sharer: carousel jQuery untuk memposting ulang di jejaring sosial

Carousel Sharer adalah plugin jQuery yang memungkinkan Anda menampilkan beberapa produk secara berurutan, dan memungkinkan pengunjung membagikan produk Anda di Facebook, Twitter, Google+, dan Pinterest:

Simply Carousel: carousel gambar responsif minimalis

Simply Carousel adalah plugin jQuery kecil dan cepat yang memungkinkan Anda membuat slider dan carousel gambar yang fleksibel dan responsif:

Slide: Korsel dan tayangan slide jQuery responsif dengan dukungan sentuh

Slides – plugin jQuery mini untuk membuat carousel responsif untuk situs web jQuery dengan thumbnail, navigasi panah, dan kemampuan untuk menggunakan elemen sendiri pengelolaan. Dukungan untuk layar sentuh telah diterapkan:

korsel konten jQuery

Korsel jQuery responsif sederhana dengan fitur putar otomatis, kontrol, dan bahkan fungsi panggilan balik:

Slick: Korsel jQuery yang responsif dan fleksibel

Slick adalah plugin "segar" untuk membuat kustom, responsif, dan dioptimalkan perangkat seluler carousel dan penggeser jQuery yang dapat berfungsi dengan elemen HTML apa pun:

bxSlider: penggeser konten HTML jQuery

bxSlider adalah salah satunya slider jQuery terbaik konten yang tersedia saat ini. Plugin ini sangat cocok untuk mengatur tayangan slide:

CarouFredSel: fleksibel dan plugin yang kuat komidi putar jQuery

jQuery.carouFredSel adalah plugin yang mengubah elemen HTML apa pun menjadi carousel konten. Ini memungkinkan Anda menggulir satu atau lebih elemen secara bersamaan, baik secara horizontal maupun vertikal. Anda juga dapat mengaktifkan putar otomatis dan buat penggulirannya tak terbatas:

Korsel konten bersepeda dengan jQuery

Korsel tempat setiap klik akan terungkap blok baru isi. Mengklik tanda silang akan menutup blok aktif dan mengembalikan kita ke posisi awal melihat thumbnail:

Cloud Carousel: Korsel 3D dalam Javascript

Korsel ini memungkinkan Anda menciptakan perspektif yang realistis. Banyak carousel 3D jQuery yang menerapkan efek perspektif hanya pada ukuran gambar, bukan posisinya, yang mengakibatkan disproporsi elemen pada laman:

Elastislide: carousel responsif dengan jQuery

Elastislide adalah carousel jQuery responsif yang beradaptasi dengan ukuran layar apa pun. Memasukkan carousel ke dalam wadah dengan lebar yang fleksibel akan membuat carousel itu sendiri menjadi “karet”:

jCarousel Lite

Dengan plugin ini Anda akan dapat melihat gambar atau elemen HTML sebagai slider. Beratnya hanya 2Kb, tetapi pada saat yang sama memungkinkan Anda untuk menggunakan pengaturan Anda sendiri:

Korsel 3D

Buat carousel jQuery 3D dari gambar dengan efek bayangan dan animasi yang bereaksi terhadap posisi kursor:

Plugin korsel JQuery

Pengaturan plugin ini memungkinkan Anda menentukan berapa banyak elemen yang akan ditampilkan di carousel, setelah itu plugin menyesuaikannya dengan lebar yang diinginkan:

Memutar penggeser gambar dengan jQuery

Penggeser gambar asimetris dengan tambahan kecil: saat Anda menggulir gambar, gambar akan berputar sedikit. Karena perpindahan kecil elemen penggeser mengambil bentuk yang tidak biasa:

Korsel Fitur jQuery

Plugin ini dirancang untuk menampilkan artikel yang direkomendasikan halaman rumah, namun dapat juga digunakan untuk konten lainnya. Ini memungkinkan hingga tiga gambar ditampilkan secara bersamaan dan sisanya elemen jQuery Korsel konten disembunyikan:

Korsel Tak Terbatas jQuery

Ini adalah plugin jQuery yang memungkinkan Anda menampilkan gambar dan video dalam jumlah tak terbatas di carousel. Berbeda dengan carousel lainnya, Infinite Carousel menampilkan elemen lingkaran tak berujung tanpa perlu menggunakan navigasi:

plugin jQuery Liquid Carousel

Liquid Carousel adalah plugin yang dirancang untuk membuat desain yang mengalir. Setiap kali wadah carousel responsif jQuery berubah ukurannya, jumlah elemen yang ditampilkan menyesuaikan dengan lebar baru:

Korsel Jquery MS

Penggunaan plugin ini tidak terbatas: gunakan dengan DIV, LI, atau elemen lainnya. Selain itu, Anda dapat membuat markup Anda sendiri. Setiap carousel akan memiliki tampilan dan prinsip pengoperasiannya sendiri. Paling poin penting adalah alat tersebut mengembalikan objek carousel yang dapat digunakan untuk melakukan operasi apa pun:

Korsel Kincir Air jQuery

Plugin jQuery ini mampu menampilkan gambar dalam format gaya kaskade. Itu dapat diposisikan secara horizontal dan vertikal, dan Anda juga dapat menambahkan peristiwa Anda sendiri yang akan dipicu saat Anda menelusuri gambar. Fungsi panggilan balik dapat digunakan sebagai pemicu yang dapat diprogram untuk efek gaya Lightbox atau untuk memuat konten dari bagian lain situs:

Versi baru dari RCAROUSEL