Saat ini, penggeser - carousel - adalah fungsi yang hanya perlu dimiliki di situs web bisnis, situs web portofolio, atau sumber daya lainnya. Selain penggeser gambar layar penuh, penggeser korsel horizontal cocok dengan desain web apa pun.

Terkadang penggeser harus menempati sepertiga halaman situs. Di sini penggeser carousel digunakan dengan efek transisi dan tata letak responsif. Situs e-niaga menggunakan penggeser carousel untuk menampilkan banyak foto di setiap postingan atau halaman. Kode slider dapat digunakan dan dimodifikasi secara bebas sesuai kebutuhan Anda.

Menggunakan JQuery bersama dengan HTML5 dan CSS3, Anda dapat membuat halaman Anda lebih menarik, memberikan efek unik, dan menarik perhatian pengunjung ke area tertentu di situs.

Slick – plugin penggeser carousel modern

Slick adalah plugin jquery yang tersedia secara gratis yang pengembangnya mengklaim bahwa solusi mereka akan memenuhi semua kebutuhan slider Anda. Penggeser adaptif - carousel dapat bekerja dalam mode "ubin" untuk perangkat seluler, dan dalam mode "seret dan lepas" untuk versi desktop.

Berisi efek transisi "pudar", fitur "mode tengah" yang menarik, pemuatan gambar yang lambat dengan pengguliran otomatis. Fungsionalitas yang diperbarui mencakup penambahan slide dan filter slide. Semua untuk memastikan bahwa Anda mengonfigurasi plugin sesuai dengan kebutuhan Anda.

Modus demo | Unduh

Owl Carousel 2.0 – jQuery – plugin untuk digunakan pada perangkat sentuh

Plugin ini memiliki beragam fungsi, cocok untuk pemula dan pengembang berpengalaman. Ini adalah versi terbaru dari penggeser carousel. Pendahulunya memiliki nama yang sama.

Penggeser memiliki beberapa plugin bawaan untuk meningkatkan fungsionalitas secara keseluruhan. Animasi, pemutaran video, putar otomatis slider, pemuatan lambat, penyesuaian ketinggian otomatis – ini adalah fitur utama Owl Carousel 2.0.

Dukungan fitur seret dan lepas drop disertakan untuk penggunaan plugin yang lebih nyaman di perangkat seluler.
Plugin ini sempurna untuk menampilkan gambar besar bahkan di layar kecil perangkat seluler.

Contoh | Unduh

plugin jQuery Jalur Perak

Plugin jquery yang cukup kecil namun kaya fungsi yang memungkinkan Anda menempatkan penggeser pada halaman - carousel, yang memiliki inti kecil dan tidak menghabiskan banyak sumber daya situs. Plugin ini dapat digunakan untuk menampilkan slider vertikal dan horizontal, dengan animasi dan membuat kumpulan gambar dari galeri.

Contoh | Unduh

AnoSlide – Slider jQuery responsif yang sangat ringkas

Penggeser jQuery ultra ringkas - carousel, yang fungsinya jauh lebih besar daripada penggeser biasa. Ini termasuk pratinjau gambar tunggal, tampilan carousel beberapa gambar, dan tampilan penggeser berbasis judul.

Contoh | Unduh

Korsel Burung Hantu – Penggeser Jquery – korsel

Korsel burung hantu – penggeser dengan dukungan Layar sentuh dan teknologi drag and drop, mudah diintegrasikan ke dalam kode HTML. Plugin ini adalah salah satu penggeser terbaik yang memungkinkan Anda membuat carousel yang indah tanpa markup yang disiapkan secara khusus.

Contoh | Unduh

Galeri 3D - korsel

Menggunakan transisi 3D berdasarkan gaya CSS dan sedikit kode Javascript.

Contoh | Unduh

Korsel 3D menggunakan TweenMax.js dan jQuery

Korsel 3D yang luar biasa. Sepertinya ini masih versi beta, karena saya baru saja menemukan beberapa masalah dengannya. Jika Anda tertarik untuk menguji dan membuat bilah geser Anda sendiri, carousel ini akan sangat membantu.

Contoh | Unduh

Korsel menggunakan bootstrap

Slider responsif - carousel menggunakan teknologi bootstrap hanya untuk situs web baru Anda.

Contoh | Unduh

Slider carousel Kotak Bergerak berdasarkan kerangka Bootstrap

Paling populer di portofolio dan situs bisnis. Jenis penggeser ini - carousel - sering ditemukan di situs jenis apa pun.

Contoh | Unduh

Penggeser Lingkaran Kecil

Slider berukuran mungil ini siap bekerja pada perangkat dengan resolusi layar apa pun. Penggeser dapat bekerja dalam mode melingkar dan korsel. Lingkaran kecil dihadirkan sebagai alternatif slider lain sejenisnya. Dukungan bawaan tersedia sistem operasi iOS dan Android.

Dalam mode melingkar, slidernya terlihat cukup menarik. Dukungan luar biasa untuk metode drag and drop dan sistem pengguliran slide otomatis.

Contoh | Unduh

Penggeser Konten Gambar Kecil

Penggeser carousel yang kuat dan adaptif sangat cocok untuk situs web modern. Berfungsi dengan benar di perangkat apa pun. Memiliki mode horizontal dan vertikal. Ukurannya diperkecil menjadi hanya 1 KB. Plugin ultra kompak juga memiliki transisi mulus yang luar biasa.

Contoh | Unduh

Wow – penggeser – korsel

Berisi lebih dari 50 efek, yang dapat membantu Anda membuat slider asli untuk situs web Anda.

Contoh | Unduh

Penggeser konten jQuery responsif bxSlider

Ubah ukuran jendela browser Anda untuk melihat bagaimana penggeser beradaptasi. Bxslider hadir dengan lebih dari 50 opsi penyesuaian dan menampilkan fitur-fiturnya dengan berbagai efek transisi.

Contoh | Unduh

jKorsel

jCarousel adalah plugin jQuery yang akan membantu mengatur tampilan gambar Anda. Anda dapat dengan mudah membuat carousel gambar khusus dari dasar yang ditunjukkan pada contoh. Penggesernya adaptif dan dioptimalkan untuk bekerja pada platform seluler.

Contoh | Unduh

Kotak gulir - plugin jQuery

Scrollbox adalah plugin ringkas untuk membuat penggeser - carousel atau perayapan teks. Fitur utama mencakup efek pengguliran vertikal dan horizontal dengan jeda saat mouse di atas.

Contoh | Unduh

dbpasCarousel

Penggeser korsel sederhana. Jika Anda membutuhkan plugin yang cepat, plugin ini 100% cocok. Hadir hanya dengan fitur dasar yang diperlukan agar penggeser dapat berfungsi.

Contoh | Unduh

Flexisel: Plugin Slider JQuery Responsif - Korsel

Pembuat Flexisel terinspirasi oleh plugin jadul jCarousel, membuat salinannya yang ditujukan untuk pengoperasian penggeser yang benar pada perangkat seluler dan tablet.

Tata letak responsif Flexisel, ketika dijalankan di perangkat seluler, berbeda dengan tata letak berukuran jendela browser. Flexisel diadaptasi secara sempurna untuk bekerja pada layar, baik resolusi rendah maupun tinggi.

Contoh | Unduh

Elastislide – penggeser adaptif – korsel

Elastislide beradaptasi sempurna dengan ukuran layar perangkat Anda. Anda dapat mengatur jumlah minimum gambar untuk ditampilkan pada resolusi tertentu. Berfungsi dengan baik sebagai penggeser carousel dengan galeri gambar, menggunakan pembungkus tetap bersama dengan efek pengguliran vertikal.

Contoh | Unduh

Penggeser Fleksibel 2

Penggeser freeware dari Woothemes. Ini dianggap sebagai salah satu penggeser adaptif terbaik. Plugin ini berisi beberapa template dan akan berguna baik bagi pengguna pemula maupun ahli.

Contoh | Unduh

Korsel yang Luar Biasa

Korsel Luar Biasa – penggeser gambar responsif menggunakan jQuery. Mendukung banyak sistem manajemen konten seperti WordPress, Drupal dan Joomla. Juga mendukung sistem operasi Android dan IOS serta desktop tanpa masalah kompatibilitas apa pun. Templat carousel luar biasa bawaan memungkinkan Anda menggunakan penggeser dalam mode vertikal, horizontal, dan melingkar.

Contoh | Unduh

Pada artikel ini, kita akan melihat betapa sederhananya Anda dapat membuat slider adaptif untuk situs web menggunakan transformasi CSS Flexbox dan CSS.

Kode sumber dan demo penggeser

Proyek penggeser bernama chiefSlider terletak di GitHub. Anda dapat mengaksesnya menggunakan tautan ini.

Slider dengan satu slide aktif (tanpa perulangan):

Slider dengan tiga slide aktif (tanpa perulangan):

Contoh yang menunjukkan bagaimana Anda dapat menggunakan penggeser untuk memutar artikel:

Keuntungan dari chiefSlider

Mari kita daftar keuntungan utama dari penggeser ini:

• pertama-tama, dia tidak membuat klon elemen (item) untuk mengatur perulangan, seperti yang diterapkan, misalnya, di plugin Burung HantuKorsel Dan licin;
• kedua, tidak bergantung pada perpustakaan jQuery; ini tidak hanya menghilangkan persyaratan tambahan, tetapi juga membuatnya lebih mudah;
• ketiga, dia praktis tidak membuat perubahan apa pun pada DOM dokumen; satu-satunya hal yang dilakukannya adalah menambah atau mengubah nilai transformasi CSS untuk elemen penggeser;
• keempat, hanya berisi serangkaian fungsi minimum; fungsionalitas tambahan dapat ditambahkan tergantung pada tugasnya;
• kelima, adaptif, yaitu. itu dapat digunakan di situs web mana pun; Kemampuan beradaptasi penggeser dikonfigurasi menggunakan CSS;
• keenam, jumlah elemen aktif disesuaikan menggunakan CSS; ini berarti dapat digunakan untuk membuat carousel dengan satu atau beberapa slide aktif.

Memasang chiefSlider

Memasang penggeser memerlukan 3 langkah:

• tambahkan chiefSlider CSS ke halaman atau ke file CSS yang terhubung ke halaman;
• tempatkan kode HTML penggeser di tempat yang diperlukan pada halaman;
• masukkan kode JavaScript ke halaman atau ke file js yang terhubung ke halaman.

Dianjurkan untuk meminimalkan kode CSS dan JavaScript; tindakan ini akan memberikan lebih banyak pemuatan cepat halaman.

Cara mengembangkan slider sederhana untuk situs web (tanpa perulangan)

Membuat Penggeser kepalaSlider akan terdiri dari pembuatan HTML kode, CSS dan JavaScript (tanpa jQuery).

Kode HTML penggeser kepalaSlider:

Seperti yang Anda lihat, penggeser memiliki arsitektur HTML yang sangat sederhana. Ini dimulai dengan blok utama, yang memiliki kelas slider. Blok ini terdiri dari 3 elemen.

Elemen pertama adalah .slider__wrapper . Ini bertindak sebagai pembungkus untuk elemen .slider__item (slide).

Dua elemen lainnya (.slider__control) mewakili tombol secara visual. Mereka akan digunakan untuk menavigasi slide, mis. pindah ke elemen sebelumnya dan berikutnya.

Kode CSS untuk penggeser chiefSlider:

/* GAYA UTAMA */ .slider ( posisi: relatif; luapan: tersembunyi; ) .slider__wrapper ( tampilan: fleksibel; transisi: transformasi kemudahan 0,6 detik; /* 0,6 durasi perubahan slide dalam hitungan detik */ ) .slider__item ( fleksibel: 0 0 50%; /* menentukan jumlah slide aktif (dalam hal ini 2 */ max-width: 50%; /* menentukan jumlah slide aktif (dalam hal ini 2 */ ) /* GAYA UNTUK TOMBOL KEMBALI DAN MAJU * / .slider__control ( posisi: absolut; tampilan: tidak ada; atas: 50%; transformasi: terjemahanY(-50%); align-items: center; justify-content: center; text-align: center; width: 40px; /* lebar tombol */ tinggi: 50 piksel; /* tinggi tombol */ opasitas: .5; /* transparansi */ latar belakang: #000; /* warna latar belakang */ .slider__control_show ( tampilan: fleksibel; ) .slider__control:hover, :fokus ( dekorasi teks: tidak ada; garis besar: 0; opacity: .9; /* transparansi */ ) .slider__control_left ( kiri: 0; ) .slider__control_right ( kanan: 0; ) .slider__control::before ( konten: " " ; tampilan: blok sebaris; lebar: 20 piksel; /* lebar ikon (panah) */ tinggi: 20px; /* tinggi ikon (panah) */ latar belakang: pusat tengah tanpa pengulangan transparan; ukuran latar belakang: 100% 100%; ) .slider__control_left::before ( gambar latar: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" fill="%23fff " viewBox="0 0 8 8"%3E%3Cpath d="M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z"/%3E%3C/svg%3E "); ) .slider__control_right::before ( gambar latar: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" fill= "%23fff" viewBox="0 0 8 8"%3E%3Cpath d="M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z"/%3E%3C/svg%3E "); )

Seperti yang Anda lihat, kode CSS penggesernya juga tidak terlalu rumit. Definisi dasar yang dapat Anda konfigurasi penampilan slider, dilengkapi dengan komentar.

Kode CSS yang mendefinisikan jumlah elemen aktif:

/* menentukan jumlah slide aktif (dalam hal ini 2) */ flex: 0 0 50%; lebar maksimal: 50%;

Kode ini menetapkan jumlah elemen aktif untuk penggeser menjadi 2.

Agar slidernya misalnya ada satu elemen aktif, definisi ini perlu diubah menjadi berikut:

/* menentukan jumlah slide aktif (dalam hal ini 1) */ flex: 0 0 100%; lebar maksimal: 100%;

Penciptaan penggeser adaptif dilakukan melalui pertanyaan media.

Misalnya, penggeser, yang pada perangkat dengan layar kecil harus memiliki satu slide aktif, dan pada perangkat besar - empat:

Slider__item ( fleksibel: 0 0 100%; lebar maksimal: 100%; ) @media (lebar minimum: 980 piksel) ( .slider__item ( fleksibel: 0 0 25%; lebar maksimal: 25%; ) )

Kode JavaScript untuk penggeser chiefSlider:

"gunakan ketat"; var multiItemSlider = (fungsi () ( mengembalikan fungsi (pemilih) ( var _mainElement = document.querySelector(selector), // elemen blok utama _sliderWrapper = _mainElement.querySelector(".slider__wrapper"), // wrapper untuk.slider-item _sliderItems = _mainElement.querySelectorAll(".slider__item"), // elemen (.slider-item) _sliderControls = _mainElement.querySelectorAll(".slider__control"), // mengontrol _sliderControlLeft = _mainElement.querySelector(".slider__control_left"), // " KIRI" tombol _sliderControlRight = _mainElement.querySelector(".slider__control_right"), // Tombol "KANAN" _wrapperWidth = parseFloat(getComputedStyle(_sliderWrapper).width), // lebar pembungkus _itemWidth = parseFloat(getComputedStyle(_sliderItems).width), / / lebar satu elemen _positionLeftItem = 0, // posisi elemen aktif kiri _transform = 0, // nilai transformasi.slider_wrapper _step = _itemWidth / _wrapperWidth * 100, // ukuran langkah (untuk transformasi) _items = ; // array dari elemen // mengisi array _items _sliderItems.forEach(fungsi (item, indeks) ( _items.push(( item: item, posisi: indeks, transformasi: 0 )); )); var posisi = ( getMin: 0, getMax: _items.length - 1, ) var _transformItem = fungsi (arah) ( if (arah === "kanan") ( if ((_positionLeftItem + _wrapperWidth / _itemWidth - 1) >= posisi .getMax) ( return; ) if (!_sliderControlLeft.classList.contains("slider__control_show")) ( _sliderControlLeft.classList.add("slider__control_show"); ) if (_sliderControlRight.classList.contains("slider__control_show") && (_positionLeftItem + _wrapperWidth / _itemWidth) >= position.getMax) ( _sliderControlRight.classList.remove("slider__control_show"); ) _positionLeftItem++;<= position.getMin) { return; } if (!_sliderControlRight.classList.contains("slider__control_show")) { _sliderControlRight.classList.add("slider__control_show"); } if (_sliderControlLeft.classList.contains("slider__control_show") && _positionLeftItem - 1 <= position.getMin) { _sliderControlLeft.classList.remove("slider__control_show"); } _positionLeftItem--; _transform += _step; } _sliderWrapper.style.transform = "translateX(" + _transform + "%)"; } // обработчик события click для кнопок "назад" и "вперед" var _controlClick = function (e) { if (e.target.classList.contains("slider__control")) { e.preventDefault(); var direction = e.target.classList.contains("slider__control_right") ? "right" : "left"; _transformItem(direction); } }; var _setUpListeners = function () { // добавление к кнопкам "назад" и "вперед" обработчика _controlClick для события click _sliderControls.forEach(function (item) { item.addEventListener("click", _controlClick); }); } // инициализация _setUpListeners(); return { right: function () { // метод right _transformItem("right"); }, left: function () { // метод left _transformItem("left"); } } } }());

Tindakan utama dalam kode JavaScript dilakukan oleh fungsi _transformItem. Fungsi ini, bergantung pada arah yang diteruskan ke sana, mengubah elemen.slider__wrapper.

Menginisialisasi penggeser dilakukan sebagai berikut:

Var penggeser = multiItemSlider(".slider") Demo penggeser

Bagaimana cara membuat penggeser perulangan?

Perulangan slide dapat dilakukan dengan mentransformasikan elemen .slider__item.

Untuk melakukan ini, Anda perlu mengikat nilai posisi saat ini dan transformasinya ke setiap elemen.slider__item.

Tindakan ini dapat dilakukan secara optimal menggunakan array _items:

Vari_item = ; // mengisi array dengan elements.slider__item _sliderItems.forEach(fungsi (item, indeks) ( _items.push(( item: item, posisi: indeks, transformasi: 0 )); ));

Namun Anda dapat mengaitkan data dengan elemen tidak hanya menggunakan array, namun, misalnya, menggunakan atribut data. Namun operasi DOM adalah yang paling lambat dan memerlukan banyak sumber daya, dan tidak disarankan jika dapat dilakukan dengan cara lain.

Langkah selanjutnya adalah membuat fungsi untuk menghitung .slider__item dengan posisi min dan max.

Var posisi = ( getItemMin: function () ( var indexItem = 0; _items.forEach(function (item, indeks) ( if (item.position< _items.position) { indexItem = index;` } }); return indexItem; }, getItemMax: function () { var indexItem = 0; _items.forEach(function (item, index) { if (item.position >_item.posisi) ( indexItem = indeks; ) )); kembalikan IndexItem; ), getMin: fungsi () ( return _items.position; ), getMax: function () ( return _items.position; ) )

Langkah Dasar Terakhir yang perlu dilakukan adalah menyelesaikan fungsinya _transformItem. Yaitu menambahkan kode ke dalamnya yang akan mengubah posisi elemen .slider__item dan melakukan transformasinya.

Var _transformItem = fungsi (arah) ( var nextItem; if (arah === "kanan") ( _positionLeftItem++; if ((_positionLeftItem + _wrapperWidth / _itemWidth - 1) > position.getMax()) ( nextItem = position.getItemMin() ; _item.posisi = posisi.getMax() + 1; _item.transform += _item.panjang * 100; ) if (arah === "kiri") ( _positionLeftItem--; if (_positionLeftItem)< position.getMin()) {
 nextItem = position.getItemMax();
 _items.position = position.getMin() - 1;
 _items.transform -= _items.length * 100;
 _items.item.style.transform = "translateX(" + _items.transform + "%)";
 }
 _transform += _step;
 }
 _sliderWrapper.style.transform = "translateX(" + _transform + "%)";
}

Faktanya, semuanya sederhana di sini.
Misalnya, untuk berpindah ke slide berikutnya, array item terlebih dahulu mencari elemen dengan posisi lebih besar dari elemen paling kanan saat ini.slider__item.
Jika ada elemen seperti itu dalam array, maka transformasi elemen.slider__wrapper dilakukan (yaitu, tindakan, seperti dalam algoritma tanpa perulangan).
Tapi jika tidak ada unsur seperti itu, lalu selain transformasi.slider__wrapper, sejumlah tindakan lain dilakukan.  Pertama, array item dicari elemennya dengan posisi minimum.  Setelah menerima item ini, dia suatu posisi ditetapkan yang nilainya akan sama dengan nilai elemen kanan saat ini + 1.  Dan tentu saja demikian transformasinya, sejumlah persen sehingga dia berakhir di akhir, yaitu.  setelah elemen terakhir.

Untuk berpindah ke slide sebelumnya, tindakan serupa dilakukan, namun sebaliknya.

Selain itu, untuk penggeser perulangan, Anda tidak perlu mengubah visibilitas tombol Kiri dan Kanan.  Tombol-tombol di versi penggeser ini akan selalu ditampilkan.
Untuk melakukan ini, Anda perlu:
hapus kelas slider__control_show dari kontrol "Kanan";
 
di CSS untuk selector.slider__control ubah nilai properti tampilan menjadi flex .
 Demo penggeser 
Bagaimana cara membuat slider dengan perulangan dan perubahan slide otomatis?
Anda dapat memprogram perubahan slide otomatis pada interval tertentu menggunakan fungsi setInterval.
Var _cycle = fungsi (arah) ( if (!_config.isCycling) ( return; ) _interval = setInterval(function () ( _transformItem(direction); ), _config.interval); )
Fungsi setInterval dalam contoh ini akan menjalankan fungsi _transformItem pada interval tertentu yang sama dengan nilai variabel _config.interval.
Selain itu, disarankan untuk menambahkan penghentian pada perubahan slide otomatis saat Anda memindahkan kursor ke penggeser.
Anda dapat mengimplementasikan fungsi ini sebagai berikut:
If (_config.pause && _config.isCycling) ( _mainElement.addEventListener("mouseenter", function () ( clearInterval(_interval); )); _mainElement.addEventListener("mouseleave", function () ( clearInterval(_interval); _cycle( _config.arah);
Bagaimana cara menghentikan perubahan slide otomatis jika elemen tidak terlihat oleh pengguna?
Disarankan untuk menonaktifkan perubahan slide otomatis dalam dua kasus:
ketika halaman (tempat penggeser ini berada) tidak aktif;
 
ketika penggeser berada di luar area visibilitas halaman.
Kasus pertama dapat ditangani dengan menggunakan event visibilitaschange.
Document.addEventListener("visibilitychange", _handleVisibilityChange, false);
Fungsi untuk event handler visibilitasperubahan:
// menangani kejadian "Perubahan visibilitas dokumen" var _handleVisibilityChange = function () ( if (document.visibilityState === "hidden") ( clearInterval(_interval); ) else ( clearInterval(_interval); _cycle(_config.direction); ) )
Menghitung visibilitas suatu elemen dapat dilakukan menggunakan fungsi _isElementVisible:
Fungsi _isElementVisible(elemen) ( var rect = element.getBoundingClientRect(), vWidth = window.innerWidth || doc.documentElement.clientWidth, vHeight = window.innerHeight || doc.documentElement.clientHeight, elemFromPoint = fungsi (x, y) ( return document.elementFromPoint(x, y);< 0 || rect.bottom < 0 || rect.left >vLebar ||  rect.top > vHeight) ( return false; ) return (element.contains(elemFromPoint(rect.left, rect.top)) || element.contains(elemFromPoint(rect.right, rect.top)) || element.contains (elemFromPoint(rect.right, rect.bottom)) ||.elemen.berisi(elemFromPoint(rect.left, rect.bottom)));  )
Anda dapat melakukan panggilan _isElementVisible, misalnya, di awal fungsi _transformItem.  Tindakan ini akan membatalkan perubahan slide otomatis jika penggeser saat ini berada di luar area pandang.
Var _transformItem = fungsi (arah) ( var nextItem; if (!_isElementVisible(_mainElement)) ( return; ) //...
Slider yang merespons pengubahan ukuran jendela browser
Versi penggeser adaptif ini berbeda dari versi sebelumnya karena memungkinkan mengubah jumlah elemen aktif (slide) saat mengubah ukuran jendela browser.  Pengguna biasanya tidak mengubah ukuran browsernya, namun hal tersebut masih bisa terjadi.
Ini diimplementasikan menggunakan acara resize dan array _states.  Array digunakan untuk perhitungan.  Penggunaannya akan memungkinkan Anda menghindari inisialisasi ulang penggeser saat tidak diperlukan.
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 yang baru telah muncul slider jquery adaptif, galeri, carousel, atau plugin serupa. 
1. Penggeser Postingan Horisontal Responsif
Korsel horizontal adaptif dengan instruksi rinci pada instalasi.  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
Universal plugin gratis 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
Slider galeri gratis sederhana dengan pemuatan 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 terbuka Kode sumber Pemain JP.  Slider ini menyerupai presentasi dengan musik.
23. Penggeser dengan jmpress.js
Slider responsif didasarkan pada jmpress.js dan oleh karena itu 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. Mode layar penuh dengan efek 3D menggunakan css3 dan jQuery
Slider dengan kemampuan melihat gambar layar penuh dengan transisi yang indah.

 
Koleksi gratis Penggeser HTML dan CSS contoh kode: kartu, perbandingan, layar penuh, responsif, sederhana, dll.  Update koleksi Juni 2018.  7 item baru.
Daftar isi
 
Artikel Terkait


 
Tentang kodenya
 

 
Satu set layar orientasi dalam HTML/CSS/JS.  Eksperimen pribadi dengan melapisi ikon PNG, transisi CSS3, & flexbox.
 

Penggeser kartu informasi HTML, CSS, dan JavaScript. 
Dibuat oleh Andy Tran 
23 November 2015

Penggeser foto berfungsi di browser desktop dan seluler. 
Dibuat oleh Taron 
29 September 2014
Slider Perbandingan (Sebelum/Sesudah).
 
Tentang kodenya
 

 
Slider perbandingan gambar yang sederhana dan bersih, sepenuhnya responsif dan siap disentuh dengan CSS dan jQuery.
 
Tentang kodenya
 

 
Slider sebelum dan sesudah hanya dengan html dan css.
 
Tentang kodenya
 

 
Bermain-main dengan ide baru menggunakan penggeser gambar dua lapisan sebelum/sesudah.  Menjaganya tetap minimal.  Tetap vanila.  Like jika bermanfaat :)
 

Vanilla JS, minimal, enak dilihat. 
Dibuat oleh Huw 
3 Juli 2017
 
Tentang kodenya
 

 
Elemen penggeser "layar terpisah" dengan JavaScript.
 

Sedikit eksperimen untuk penggeser sebelum & sesudah di dalam SVG.  Masking membuatnya cukup sederhana.  Karena semuanya SVG, gambar dan keterangannya dapat disesuaikan dengan baik.  Plugin Draggable dan ThrowProps GreenSock digunakan untuk kontrol slider. 
Dibuat oleh Craig Roblewsky 
17 April 2017

Menggunakan input rentang khusus untuk penggeser. 
Dibuat oleh Dudley Storey 
14 Oktober 2016

Slider perbandingan gambar responsif dengan HTML, CSS, dan JavaScript. 
Dibuat oleh Ege Görgülü 
3 Agustus 2016

Slider perbandingan video HTML5, CSS3 dan JavaScript sebelum dan sesudah. 
Dibuat oleh Dudley Storey 
24 April 2016

Slider praktis yang dapat diseret untuk membandingkan 2 gambar dengan cepat, didukung oleh CSS3 dan jQuery. 
Dibuat oleh CodyHouse 
15 September 2014
Slider Layar Penuh
 
Tentang kodenya
 

 
Slider sederhana berdasarkan input radio.  100% HTML + CSS murni.  Bekerja juga dengan tombol panah.
 
 
Responsif: ya
 
Ketergantungan: -
 
Tentang kodenya
 

 
Efek transisi yang bagus untuk penggeser layar penuh.
 
Tentang kodenya
 

 
Slider geser paralaks horizontal dengan Swiper.js.
 
Tentang kodenya
 

 
Slider perspektif 3D halus yang responsif saat mouse bergerak.
 

Penggeser gambar pahlawan layar penuh (tema panel geser) dengan HTML, CSS, dan JavaScript. 
Dibuat oleh Tobias Bogliolo 
25 Juni 2017

Sesuatu interaksi slider menggunakan efek Velocity dan Velocity (UI Pack) untuk meningkatkan animasi.  Animasi dipicu melalui tombol panah, klik nav, atau scrolling jack.  Versi ini menyertakan batas sebagai bagian dari interaksi. 
Dibuat oleh Stephen Scaff 
11 Mei 2017

Penggeser sederhana dalam gaya minimal untuk memamerkan gambar.  Sebagian gambar muncul di setiap slide. 
Dibuat oleh Nathan Taylor 
22 Januari 2017

Masalahnya cukup mudah disesuaikan.  Anda dapat dengan aman mengubah font, ukuran font, warna font, kecepatan animasi.  Huruf pertama dari string baru dalam array di JS akan muncul di slide baru.  Mudah membuat (atau menghapus) slide baru: 1. Tambahkan kota baru dalam array di JS.  2. Ubah variabel jumlah slide dan masukkan gambar baru ke daftar scss di CSS. 
Dibuat oleh Ruslan Pivovarov 
8 Oktober 2016

Jalur klip untuk menutupi batas persegi panjang gambar (khusus webkit).
Mode campuran untuk topeng ini.
Sistem warna cerdas, cukup masukkan nama warna dan nilai Anda ke dalam peta sass lalu tambahkan kelas yang tepat dengan nama warna ini ke elemen dan semuanya akan berfungsi!
Menu samping kredit keren (klik tombol kecil di tengah demo).
Vanilla js dengan adil< 200 lines of code (basically it’s just adds/removes classes).
 Dibuat oleh Nikolay Talanov 
7 Oktober 2016 

Slider miring ini dengan pengguliran berdasarkan JS dan CSS murni (tanpa pustaka). 
Dibuat oleh Victor Belozyorov 
3 September 2016

Animasi slider dengan desain Pokemon. 
Dibuat oleh Pham Mikun 
18 Agustus 2016

Slider HTML, CSS, dan JavaScritp dengan animasi kompleks dan teks miring setengah warna. 
Dibuat oleh Ruslan Pivovarov 
13 Juli 2016

Efek paralaks slider dengan HTML, CSS dan JavaScript. 
Dibuat oleh Manuel Madeira 
28 Juni 2016

Slider HTML, CSS dan JavaScript dengan efek riak. 
Dibuat oleh Pedro Castro 
21 Mei 2016

Clip-Path menampilkan penggeser dengan HTML, CSS, dan JavaScript. 
Dibuat oleh Nikolay Talanov 
16 Mei 2016

GSAP + Slider apik dengan pratinjau slide sebelumnya/berikutnya. 
Dibuat oleh Karlo Videk 
27 April 2016

Penggeser halaman penuh HTML, CSS, dan JavaScript. 
Dibuat oleh Joseph Martucci 
28 Februari 2016

Prototipe slider lengkap dengan HTML, CSS, dan JavaScript. 
Dibuat oleh Gluber Sampaio 
6 Januari 2016

Tampilan slide layar penuh, semacam responsif, yang dianimasikan dengan Greensocks TweenLite/Tweenmax. 
Dibuat oleh Arden 
12 Desember 2015
 Dibuat oleh Arden 
5 Desember 2015 

Penggeser Layar Penuh (Garis Waktu GSAP) #1 dengan HTML, CSS, dan JavaScript. 
Dibuat oleh Diaco M.Lotfollahi 
23 November 2015

Slider HTML dan CSS dengan efek khusus. 
Dibuat oleh Nikolay Talanov 
12 November 2015

Drag-slider layar penuh dengan paralaks dengan HTML, CSS dan JavaScript. 
Dibuat oleh Nikolay Talanov 
12 November 2015

Bukti konsep slider berputar.  Menggunakan jalur klip dan banyak matematika. 
Dibuat oleh Tyler Johnson 
16 April 2015

Slider CSS & jQuery layar penuh sederhana menggunakan kehalusan TranslateX dan Translate3D! 
Dibuat oleh Yusuf 
19 Agustus 2014
Slider Responsif
 
Tentang kodenya
 
Penggeser Opasitas Gambar
 
Penggeser opasitas gambar dalam HTML dan CSS.
 
Browser yang kompatibel: Chrome, Edge, Firefox, Opera, Safari
 
Responsif: ya
 
Ketergantungan: -
 
Tentang kodenya
 
Tata Letak Slide Fleksibel Bertumpuk
 
Contoh ini mengilustrasikan cara membuat tata letak slide yang ditumpuk satu sama lain (terutama berguna untuk transisi fade in/out).  Hal ini dicapai tanpa mengatur ketinggiannya dan menghindari position: absolute; sehingga sepenuhnya fleksibel dan mudah dipertahankan dalam alur halaman normal.
 
Browser yang kompatibel: Chrome, Edge, Firefox, Opera, Safari
 
Responsif: ya
 
Ketergantungan: -
 
Tentang kodenya
 
Penggeser Responsif
 
Slider responsif animasi dalam HTML, CSS, dan JavaScript.
 
Browser yang kompatibel: Chrome, Edge, Firefox, Opera, Safari
 
Responsif: ya
 
Dependensi: animate.css
 
Tentang kodenya
 
Slider Dengan Teks Bertopeng
 
Penggeser khusus CSS dengan teks bertopeng.
 
Browser yang kompatibel: Chrome, Edge (sebagian), Firefox, Opera, Safari
 
Responsif: ya
 
Ketergantungan: -
 
Tentang kodenya
 

 
Gambar dan konten dengan efek paralaks.
 
Tentang kodenya
 

 
Galeri slide khusus CSS.
 
Browser yang kompatibel: Chrome, Edge, Firefox, Opera, Safari
 
Responsif: ya
 
Ketergantungan: -
 
Tentang kodenya
 
Penggeser HTML/CSS Murni
 
Slider HTML/CSS murni dengan bilah kemajuan SVG melingkar.
 
Browser yang kompatibel: Chrome, Edge (sebagian), Firefox (sebagian), Opera, Safari
 
Responsif: ya
 
Ketergantungan: font-awesome.css
 
Tentang kodenya
 

 
Eksperimen untuk membuat penggeser vertikal yang sepenuhnya responsif dengan gambar mini hanya menggunakan CSS, dan mempertahankan rasio aspek gambar.
 
Tentang kodenya
 

 
Penggeser/korsel gambar Flexbox sederhana yang dibuat dengan JavaScript vanilla.
 
Tentang kodenya
 

 
Ini adalah eksperimen yang menyimulasikan efek buram gerakan setiap kali slide dialihkan.  Ini memanfaatkan filter SVG Gaussian Blur dan beberapa animasi bingkai utama CSS.  Meskipun efeknya tidak memerlukan Javascript apa pun agar dapat berfungsi dengan baik, dalam contoh ini Javascript hanya digunakan untuk fungsi slider.
 
Tentang kodenya
 

 
Slider animasi keren dengan JS.
 
Tentang kodenya
 

 
Ini adalah eksperimen tentang bagaimana pola SVG dapat membantu kita membuat gambar seperti bertopeng untuk penggeser gambar khusus CSS.
 

Menjelajahi beberapa transisi penggeser.  Slider penggeser dengan opsi paralaks diaktifkan.  Kebanyakan bermain dengan filter CSS di sini. 
Dibuat oleh Mirko Zorić 
12 Juni 2017

Penggeser GSAP sederhana dengan beberapa animasi tween yang halus. 
Dibuat oleh Goran Vrban 
9 Juni 2017

UI penggeser dengan HTML, CSS, dan JavaScript. 
Dibuat oleh Mergim Ujkani 
6 Juni 2017

Penggeser GSAP versi 2. 
Dibuat oleh Em An 
4 Mei 2017

Penggeser transisi kecil yang rumit menggunakan kesepakatan penambahan kelas yang sederhana.  Harus memperhalus pengaturan waktu sedikit dan memutuskan pendekatan terbaik untuk seluler (cukup susun, tambahkan acara sentuh, buat gambar terlihat penuh, dll. Mendukung roda gulir (scroll jacking), tombol nav, dan tombol panah. Dapat juga meningkatkan pembungkus konten untuk membuat gambar memenuhi area pandang dalam keadaan non-animasi, yang juga cukup keren. 
Dibuat oleh Stephen Scaff 
3 Januari 2017

Memanfaatkan gambar batas & jalur klip CSS untuk membuat efek animasi penggeser. 
Dibuat oleh Emily Hayman 
31 Desember 2016

Slider kecil dibuat dengan flexbox.  Agak responsif, dan dapat memiliki elemen tetap di sepanjang area penggeser. 
Dibuat oleh Robert 
28 November 2016

HTML, penggeser kanvas CSS. 
Dibuat oleh Nvagelis 
29 Oktober 2016

Penggeser halus HTML, CSS, dan JavaScript 3D. 
Dibuat oleh Eduardo Allegrini 
19 Oktober 2016

Slider cupcake HTML dan CSS dengan taburan! 
Dibuat oleh Jamie Coulter 
14 Oktober 2016


Dibuat oleh Mario S Maselli 
12 Oktober 2016

Menjelajahi animasi UI #2 dengan HTML, CSS dan JavaScript. 
Dibuat oleh Mario S Maselli 
22 September 2016

Menjelajahi animasi UI #3 dengan HTML, CSS dan JavaScript. 
Dibuat oleh Mario S Maselli 
22 September 2016

Slider E-niaga v2.0 dengan HTML, CSS, dan JavaScript. 
Dibuat oleh Pedro Castro 
17 September 2016

Slider bersih HTML, CSS, dan JavaScript dengan latar belakang melengkung. 
Dibuat oleh Ruslan Pivovarov 
13 September 2016

Menjelajahi animasi UI #1 dengan HTML, CSS, dan JavaScript. 
Dibuat oleh Mario S Maselli 
8 September 2016

Nikmati kekuatan CSS: Atas & bawah setiap gambar tengah dan penggeser paginasi dengan lightbox. 
Dibuat oleh Kseso 
15 Agustus 2016

Eksposur ganda adalah teknik fotografi yang menggabungkan 2 gambar berbeda menjadi satu gambar. 
Dibuat oleh Misaki Nakano 
3 Agustus 2016

Slider menggunakan klip properti CSS3. 
Dibuat oleh Pedro Castro 
1 Mei 2016

Penggeser CSS responsif. 
Dibuat oleh geekwen 
19 April 2016

Ini adalah eksperimen penggeser sederhana yang menampilkan kata-kata dengan makna indah yang tidak dapat diterjemahkan secara langsung.  Fokus: tipografi elegan dan transisi sederhana namun memikat. 
Dibuat oleh Joe Harry 
5 April 2016

Ide animasinya adalah mengubah nilai jalur klip CSS, sehingga membuat efek masking. 
Dibuat oleh Bhakti Al Akbar 
31 Maret 2016

Penggeser titik dengan HTML, CSS, dan JavaScript. 
Dibuat oleh Derek Nguyen 
16 Maret 2016

Slider efek prisma dengan HTML, CSS dan JavaScript. 
Dibuat oleh pemenang 
12 Maret 2016

Galeri latar belakang geser dengan HTML, CSS dan JavaScript. 
Dibuat oleh Ron Gierlach 
30 November 2015

Solusi penggeser HTML, CSS, dan JavaScript. 
Dibuat oleh Jürgen Genser 
30 September 2015

Penggeser produk yang didukung oleh Sequence.js.  Sequence.js - Kerangka animasi CSS responsif untuk membuat slider unik, presentasi, spanduk, dan aplikasi berbasis langkah lainnya. 
Dibuat oleh Ian Lunn 
15 September 2015

Slider khusus lingkaran kecil. 
Dibuat oleh Bram de Haan 
11 Agustus 2015

Slider GTA V responsif dengan HTML, CSS, dan JavaScript. 
Dibuat oleh Eduard Mayer 
24 Januari 2014

Ini seperti penggeser tetapi berputar berbentuk kubus karena alasan yang tidak diketahui. 
Dibuat oleh Eric Brewer 
4 Desember 2013

Dibuat oleh Hugo DarbyBrown 
28 Agustus 2013
Slider Sederhana

Penggeser hamparan gambar dengan HTML, CSS, dan JavaScript vanilla. 
Dibuat oleh Yugam 
7 Juni 2017

Penggeser gambar unggulan HTML dan CSS. 
Dibuat oleh Joshua Hibbert 
16 Juni 2016
Penggeser Gambar Multi Sumbu
Penggeser gambar multi-sumbu dengan HTML, CSS, dan JavaScript. 
Dibuat oleh Burak Can 
22 Juli 2013

Slider kubus, eksperimen kecil dengan transformasi 3d HTML5/CSS3. 
Dibuat oleh Ilya K. 
26 Juni 2013
Dari penulis: Meskipun ada rumor tentang dugaan “kematian” bagian halaman web yang terlihat tanpa digulir, kebutuhan akan penggeser yang baik belum hilang.  Jujur saja sebentar - slider itu menyenangkan.  Selain itu, tidak ada hal lain, selain memindahkan konten, yang menyebabkan efek “wow” pada pengguna.  Semua penggeser adalah kumpulan beberapa slide yang saling menggantikan, dan sangat penting agar kode penggeser seringan mungkin.  Dalam kasus seperti itulah jQuery akan membantu kita.
 
Lihatlah 20 slider jQuery dari Envato Market dan Anda akan menyadari bahwa ada slider yang lebih dari sekedar blok gambar yang mengalir dengan lancar melaluinya.
 
1. RoyalSlider – Galeri gambar layar sentuh menggunakan jQuery
 
Saat ini, penggeser responsif yang juga ramah layar sentuh memiliki arti lebih dari sebelumnya.  RoyalSlider menggabungkan kedua fitur: daya tanggap dan fungsionalitas layar sentuh.  Pilihan yang bagus karena galerinya ditulis dalam HTML5 dan CSS3.
 
 
Beberapa fitur menarik:
 
Bagaimana cara membuat situs web sendiri?
  
Optimasi SEO
 
Sangat dapat disesuaikan
 
Lebih dari 10 templat pemula
 
Ada fallback untuk transisi CSS3
 
Menurut pendapat saya, fitur paling keren adalah “arsitektur skrip modular”, yang memungkinkan Anda mengecualikan hal-hal yang tidak perlu dari file JS utama, sehingga mengurangi bobot.  RoyalSlider, galeri gambar layar sentuh di JQuery, adalah penggeser JavaScript tangguh yang harus ditambahkan ke perangkat pengembang mana pun.
 
2. Plugin jQuery responsif Slider Revolution
 
Tidak mudah melakukan sesuatu yang "revolusioner" dengan penggeser.  Ketika berbicara tentang slider, ada begitu banyak fitur yang dapat Anda tambahkan ke dalamnya.  Namun, Slider Revolution adalah percobaan yang sangat bagus.  Di antara slider jQuery, instance ini memenuhi semua kemungkinan kebutuhan Anda.
 
 
Daftar fitur penggeser sangat banyak, jadi saya hanya akan mencantumkan yang terbaik:
 
Efek paralaks dan animasi khusus
 
Jumlah lapisan dan slide dengan tautan tidak terbatas
 
siap digunakan, gaya yang dapat disesuaikan secara mendalam
 
dan banyak lagi
 
Kemampuan untuk menambahkan gambar, pemutar video tertanam, dan tautan dari jaringan sosial menjadikan Slider Revolution salah satu opsi paling fleksibel dan dapat disesuaikan di web.
 
3. Plugin slider jQuery adaptif LayerSlider
 
Nama "Plugin slider jQuery adaptif LayerSlider" tidak dapat benar-benar mengevaluasi slider ini. 
200+ transisi 2D dan 3D antar slide akan membuat siapa pun terpesona.
 
 
Beberapa fitur penting:
 
13 skin dan 3 jenis menu
 
Kemampuan untuk menempatkan gambar tetap di atas penggeser
 
Dan penggantian jQuery
 
Dan banyak lagi
 
Seperti penggeser sebelumnya, Anda dapat menambahkan hampir semua konten, bahkan konten multimedia residen HTML5.  LayerSlider menghidupkan slider dan sangat cantik.
 
4. Rotator Spanduk jQuery/Tayangan Slide
 
jQuery Banner Rotator/Slideshow adalah slider yang cukup sederhana yang tidak mengorbankan fungsi utama.
 
 
Kemungkinan:
 
Tooltip, sisipan teks, dll.
 
Pratinjau dan berbagai opsi untuk melihat komponen
 
Timer dengan penundaan untuk satu slider atau semua
 
Beberapa transisi untuk semua slide atau transisi berbeda untuk masing-masing slide
 
jQuery Banner Rotator/Slideshow, dibandingkan dengan slider JQuery lainnya, hanya memiliki kemampuan dasar, tetapi Anda tidak boleh melupakannya.
 
5. All In One Slider – Plugin slider jQuery yang responsif
 
Setiap penggeser yang muncul di Internet memiliki visi uniknya sendiri dan memecahkan masalah apa pun di bidangnya.  Tapi bukan yang ini.  All In One Slider bisa disebut “all inclusive”.
 
 
Saya pikir sebagian besar pengembang dan desainer web memiliki solusi yang terbukti, namun mereka selalu mencari sesuatu yang baru.  Dan “sesuatu yang baru” ini meliputi:
 
Pemutar spanduk
 
Spanduk dengan pratinjau
 
Spanduk dengan daftar putar
 
Penggeser Konten
 
Korsel
 
Semua jenis penggeser mendukung sebagian besar, jika tidak semua, fungsi yang dibutuhkan oleh penggeser jQuery.  Akankah All In One Slider menjadi paket lengkap untuk Anda?
 
6. UnoSlider – Penggeser layar sentuh adaptif
 
Jika penggeser Anda tidak responsif dan tidak mendukung layar sentuh, maka Anda salah memilih penggeser.  UnoSlider benar.
 
 
Penggeser ini telah menemukan tempatnya di antara kesederhanaan dan serangkaian fungsi yang kaya.  Fungsi:
 
Dukungan tema
 
12 tema siap pakai
 
40 transisi
 
dukungan IE6+
 
Semua fitur dengan penekanan pada desain dan gaya, menjadikan UnoSlider penggeser konten luar biasa dengan kemampuan untuk menambahkan tema.
 
7. Master Slider - penggeser layar sentuh jQuery
 
Mencari “satu slider jQuery untuk mengatur semuanya”?  Coba Master Slider – Slider layar sentuh JQuery untuk berbagai ukuran layar...
 
 
Ketika tiba saatnya desain yang bagus, salinan ini adalah salah satu yang terbaik:
 
Lebih dari 25 templat
 
Transisi yang dipercepat perangkat keras
 
Sentuh dan geser dukungan
 
Dan banyak lagi
 
Transisi interaktif, lapisan animasi, dan hotspot pasti akan menarik perhatian Anda.  Master Slider adalah sebuah karya seni.
 
8. TouchCarousel - penggulung dan penggeser konten jQuery
 
TouchCarousel menawarkan dukungan dan pembaruan gratis.  Namun, bukan itu saja fitur slider carousel jQuery yang ringan ini.
 
 
Jika ada kata “sentuhan” pada namanya, Anda dapat menebak bahwa penggesernya sepenuhnya adaptif dan mendukung sentuhan.  Fitur lainnya:
 
Optimasi SEO
 
Putar otomatis cerdas
 
Transisi CSS3 dengan akselerasi perangkat keras
 
UI yang dapat disesuaikan dan 4 skin untuk Photoshop
 
TouchCarousel, karena pengguliran slide fisiknya yang unik, membawa pengalaman seluler ke tingkat yang benar-benar baru.
 
9. Penggeser Tingkat Lanjut - penggeser XML jQuery
 
Slider jQuery tidak hanya dapat digunakan di situs web.  Mereka juga dapat berguna dalam aplikasi web.  Slider Tingkat Lanjut memungkinkan Anda melakukan ini.
 
 
Dengan markup HTML atau XML, penggeser canggih ini memberikan kesan mendalam:
 
Lapisan animasi dan video pintar
 
100+ transisi dan 150+ properti khusus
 
15 skin slider, 7 skin scrollbar, dan dukungan lightbox bawaan
 
Navigasi keyboard, dukungan sentuh, dan penyesuaian penuh
 
Dan banyak lagi
 
Namun, yang paling banyak fitur terbaik Slider Tingkat Lanjut ini adalah API Slider XML jQuery yang menjadikan slider sebagai pilihan ideal untuk aplikasi web Anda.
 
10. Efek Zoom In/Out jQuery Slider Sepenuhnya Responsif
 
Salah satu slider jQuery yang akan membuat Anda menonton demo sebelum mulai membaca tentang fitur-fiturnya.  Anda hanya ingin memahami apa arti “efek memperbesar/memperkecil” ini.
 
 
Efek zoomnya cukup lemah, namun menambahkan kesan kontrol dan sentuhan nyata pada gambar sementara bagian slider lainnya statis.  Fitur khusus penggeser:
 
Transisi lapisan CSS3
 
Opsi akhir animasi untuk lapisan
 
Opsi lebar tetap, layar penuh, dan lebar penuh
 
Teks animasi dengan format HTML dan CSS
 
Kebanyakan penggeser mencoba menggabungkan sebanyak mungkin efek, tetapi jQuery Slider Zoom In/Out Effect Sepenuhnya Responsif hanya memiliki efek Ken Burns, tetapi diterapkan dengan baik.
 
11. Evolusi Korsel jQuery
 
Seperti Advanced Slider - jQuery XML Slider, jQuery Carousel Evolution memiliki API sendiri yang dapat digunakan untuk meningkatkan fungsionalitas atau mengintegrasikan slider ke proyek lain.
 
Bagaimana cara membuat situs web sendiri?
 
Teknologi dan pengetahuan apa yang dibutuhkan saat ini untuk membuat situs web Anda sendiri?  Cari tahu di intensif!
 
 
Dengan gambar, markup HTML, video YouTube dan Vimeo Anda juga akan menerima:
 
Optimasi SEO
 
9 gaya korsel
 
Efek bayangan dan refleksi
 
Ukuran gambar bisa disesuaikan, baik depan maupun belakang
 
jQuery Carousel Evolution adalah carousel sederhana dengan banyak kasus penggunaan.
 
12. Penggeser Seksi
 
Sexy Slider tidak lagi seseksi dulu.  Namun karena usianya, penggeser ini dapat dipercaya.
 
 
Pada pandangan pertama, penggesernya tidak terlihat terlalu mengesankan, tetapi jika Anda menyesuaikannya dengan baik, itu akan sangat cocok dengan desain Anda.  Kemungkinan:
 
Putar otomatis slide
 
Keterangan Gambar
 
Pemutaran slide terus menerus
 
6 efek transisi
 
Sexy Slider menunggu Anda untuk membuka kekuatan dan potensi penuhnya.
 
13. Penggulung Gambar & Konten jQuery dengan Lightbox
 
Dengan semua desain ramah seluler dan dukungan layar sentuh, menyenangkan melihat penggeser jQuery yang tidak melupakan komputer desktop.
 
 
jQuery Image & Content Scroller dengan Lightbox mendukung input keyboard dan roda mouse, serta fitur lainnya:
 
Orientasi horizontal dan vertikal
 
Keterangan teks di dalam atau di luar penggeser
 
Kemampuan untuk mengatur sejumlah slide yang terlihat pada satu waktu
 
Gambar sebaris, Flash, iframe, Ajax, dan konten sebaris
 
Penggeser juga memiliki lightbox bawaan.  Jika diinginkan, di jQuery Image & Content Scroller dengan Lightbox Anda tidak dapat meluncurkan slider itu sendiri, tetapi meluncurkan lightbox secara terpisah.
 
14. Tembus – Rotator/slider spanduk adaptif
 
Kebanyakan slider jQuery memiliki desainnya sendiri.  Anda dapat menyesuaikannya sendiri, tetapi terkadang Anda hanya ingin semuanya ada di dalam penggeser.  Kami persembahkan untuk Anda Tembus.
 
 
Slider memiliki banyak preset.  Anda mungkin hanya perlu mengatur pengaturan tertentu dan itu saja.  Kemungkinan:
 
6 gaya berbeda
 
4 efek transisi
 
2 transisi gesek
 
Tombol dan keterangan yang dapat disesuaikan
 
Seperti yang lain, penggeser ini peka terhadap sentuhan, responsif, dan akselerasi perangkat keras.  Tembus – penggeser dengan desain minimal, yang mengedepankan konten itu sendiri.
 
15. FSS – Plugin Situs Web Geser Layar Penuh
 
Apakah Anda ingin membuat website layar penuh yang terdiri dari slide?  Maka Anda membutuhkan FSS.
 
 
Faktanya, dengan menggunakan penggeser JQuery ini, sangat mudah untuk membuat situs web penggeser layar penuh.  Kemungkinan:
 
dukungan AJAX
 
Scroll bar
 
Dukungan teknologi tautan dalam
 
2 efek transisi yang berbeda
 
Anda juga perlu memperhatikan dukungan keyboard dan panduan 11 halaman.  Namun kesan sebenarnya adalah bobot FSS hanya 5Kb.
 
16. Zozo Accordion – Penggeser layar sentuh adaptif
 
Contoh lain dari penggeser jQuery yang berfokus pada penataan gaya dan berfungsi dengan baik.  Zozo Accordion harus dimiliki oleh mereka yang mencari penggeser akordeon yang bagus dengan kemampuan untuk mengubah gaya.
 
 
Keindahan animasi CSS3 ini juga memiliki fitur yang cukup beragam:
 
Akordeon horizontal dan vertikal
 
HTML5 semantik dan optimasi SEO
 
Dukungan sentuh, keyboard, dan WAI-ARIA
 
Lebih dari 10 skin dan 6 tata letak
 
Dan banyak lagi
 
Di Zozo Accordion dukungan gratis dan pembaruan terus-menerus, serta semua fitur yang ingin Anda lihat di jQuery accordion.
 
17. Plugin Slider OneByOne Responsif jQuery
 
Plugin Slider OneByOne Responsif jQuery lebih seperti animasi sederhana daripada slider.  Alih-alih menampilkan slide satu per satu, instance ini mengisi layar dengan slide selangkah demi selangkah hingga tidak ada lagi ruang tersisa di area tersebut sebelum berpindah ke slide berikutnya.
 
 
Animasi CSS3 bekerja dari bawah Animate.css, ringan, terdiri dari beberapa lapisan dan ramah perangkat seluler.  Berbagai fitur:
 
Ada juga opsi navigasi drag and drop.  Plugin Slider OneByOne Responsif jQuery didukung oleh Twitter Bootstrap Carousel.
 
18. Akordeonza - plugin jQuery
 
Tidak ada penggeser jQuery yang lebih mudah dari ini.  Untuk mengoperasikannya, Anda hanya perlu mengunduh slider sebesar 3Kb, yang menjadikan Accordionza sebagai slider akordeon paling ringan.
 
 
Jika Anda tidak menyukai ketiga opsi gaya tersebut, Anda dapat mengubah sendiri HTML dan CSSnya.  Kemungkinan:
 
Navigasi papan ketik
 
Mudah untuk menyesuaikan efek dan tombol
 
Teknik peningkatan progresif - berfungsi tanpa JavaScript
 
Ingatlah bahwa Accordionza dapat menampilkan banyak variasi konten campuran, sehingga sangat fleksibel.
 
19. mightySlider – Slider serbaguna yang responsif
 
MightySlider adalah penggeser yang sangat kuat.  Ini dapat digunakan tidak hanya sebagai penggeser gambar sederhana, tetapi juga sebagai penggeser searah layar penuh dengan navigasi item menu.  Dengan bantuannya Anda dapat membuat situs satu halaman yang indah.
 
 
Di bawah tenda Anda akan menemukan banyak pilihan:
 
Dukungan keyboard, mouse, dan sentuh
 
Transisi CSS3 dengan akselerasi perangkat keras
 
Bersihkan markup yang valid dan optimasi SEO
 
Jumlah slide, lapisan untuk teks, dan efek yang tidak terbatas
 
API ini sangat kuat dan ramah pengembang, sehingga terbuka berbagai cara penggunaannya.  MightySlider adalah slider jQuery progresif yang luar biasa dengan kode yang bersih dan diberi komentar yang baik.
 
20. Parallax Slider - Plugin jQuery responsif
 
Parallax Slider berfungsi seperti Plugin Slider OneByOne Responsif jQuery dan memungkinkan Anda menganimasikan setiap lapisan secara terpisah dalam satu slide.  Anda dapat menganimasikan semua slide atau bahkan hanya satu slide dengan menambahkan animasi paralaks.
 
 
Termasuk 4 slider jenis yang berbeda, semuanya dengan efek paralaks.  Seperti slider jQuery lainnya, ia memiliki:
 
Dapat disesuaikan sepenuhnya
 
Sentuh dukungan
 
Lapisan yang sepenuhnya responsif dan tidak terbatas
 
Putar otomatis, perulangan, penyesuaian tinggi dan lebar, dan pengatur waktu
 
Lapisan animasi bukan hanya tentang teks atau gambar.  Anda juga dapat menambahkan video YouTube, Vimeo dan HTML5.  Parallax Slider - satu lagi contoh yang baik bagaimana Anda dapat menyimulasikan efek Flash dengan lebih baik daripada Flash itu sendiri, yang juga didukung di semua perangkat.
 
Kesimpulan
 
Sangat menarik untuk melihat bagaimana slider jQuery telah berkembang dari sesuatu yang hanya menggantikan satu gambar dengan gambar lainnya menjadi seperangkat alat kreatif yang sangat besar.  Sekarang ada penggeser 3D, paralaks, penggeser satu halaman penuh, penggeser adaptif, dan yang dapat dilihat di komputer desktop dan ponsel cerdas.
 
Jika Anda tidak menyukai salah satu penggeser dari daftar ini, Anda selalu dapat mengikuti Tutorial Kode jQuery di Envato dan mengembangkan sesuatu yang benar-benar baru dan unik.
 
Atau lihat slider lainnya di Envato Market - ada banyak pilihan.  Apa penggeser jQuery favorit Anda dan mengapa?