Ketika digunakan secara terpisah, CSS3 dan jQuery menyediakan berbagai kemampuan. Tapi jika digunakan bersama-sama... Maka mereka bisa membuat efek yang sangat mengesankan. Terkadang muncul permasalahan bagaimana cara yang lebih baik dan kreatif menata beberapa gambar atau foto dengan tema yang sama dalam satu tempat. Sebagai opsi, Anda dapat membuat penggeser (terutama karena jumlahnya sangat banyak). Namun pada tutorial kali ini kita akan membuat galeri 3D interaktif menggunakan CSS3 dan jQuery. Untuk mengetahui dengan cepat dan menerapkan penggeser di situs web Anda, saya sarankan mengunduh versi demo (juga tersedia di berita lengkap) dan melakukannya dengan analogi pada contoh.

Contoh nyatanya dapat dilihat di sini:

Unduh

Bagian HTML - Slider jQuery yang menarik

Wadah dengan kelas utama akan digunakan untuk menampilkan latar belakang. Dan kemudian di dalam blok dengan pengidentifikasi immersive_slider Anda dapat menambahkan slide sebanyak yang Anda butuhkan. Tombol untuk berpindah antar slide dapat dihilangkan jika Anda tidak membutuhkannya:

bagian jQuery

Seperti yang mungkin Anda perhatikan saat melihat contoh penggeser, ada beberapa . Semua pengaturan untuk transisi ini ada pada fungsi di atas. Mari kita lihat pengaturan ini:

• animasi— nilai yang menentukan bagaimana slide akan berubah. Menerima nilai "fade", "slide", atau "bounce". Dan untuk membuat perubahan vertikal pada slide, Anda harus memasukkan "slideUp" atau "bounceUp".
• slideSelector— pemilih untuk memilih blok dengan slide.
• wadah— properti ini mendefinisikan wadah utama yang latar belakangnya akan berubah.
• cssBlur Ini adalah fitur uji coba. Jika Anda tidak ingin menyetel blur, jangan setel properti ini.
• penomoran halaman— mengaktifkan navigasi.
• mulai otomatis— memulai tayangan slide secara otomatis.

Penggeser ini mudah dipasang dan jika Anda mengetahuinya, Anda dapat dengan mudah mengonfigurasinya dan mencapai hasil yang diinginkan. Agar penggeser ini berfungsi, Anda hanya memerlukan beberapa elemen, yang sekarang akan kita pertimbangkan secara berurutan.

markup HTML

Semuanya sangat sederhana di sini, Anda hanya perlu menambahkan daftar UL di awal, tepat setelah tag tubuh.

Hanya ada tiga baris dalam daftar li, yaitu slider dirancang untuk 3 gambar, jika Anda membutuhkan lebih banyak, maka langkah pertama adalah menambahkan jumlah baris yang diperlukan. Mari kita lanjutkan.

gaya CSS

Ini mungkin bagian terpenting dari pekerjaan ini, karena cara kerja penggeser kita bergantung pada CSS. Buka file gaya situs Anda dan tambahkan kode berikut ke dalamnya.

Body_slides( gaya daftar:tidak ada; margin:0; padding:0; z-index:-2; latar belakang:#000;) .body_slides, .body_slides:after( posisi: tetap; lebar:100%; tinggi:100% ; atas:0px; kiri:0px;) .body_slides:after ( konten: ""; latar belakang: url transparan(gambar/pola.png) ulangi kiri atas;).body_slides li( lebar:100%; tinggi:100%; posisi: mutlak; kiri: 0; pengulangan latar belakang: tidak ada; -webkit-animasi: 18 detik linier tak terbatas; -o-animasi: anim_slides 18 detik linier tak terbatas; linier tak terbatas 0s; 1.jpg) ) .body_slides li:nth-child(2)( -webkit-animation-delay: 6.0s; -moz-animation-delay: 6.0s; background-image: url(images/2. jpg) ) . body_slides li:nth-child(3)( -webkit-animation-delay: 12.0s; -moz-animation-delay: 12.0s; background-image: url(images/3.jpg) ) @-webkit -keyframes anim_slides ( 0% (opasitas:0;) 6% (opasitas:1;) 24% (opasitas:1;) 30% (opasitas:0;) 100% (opasitas:0;) ) @-moz-keyframes anim_slides ( 0% (opasitas:0;) 6% (opasitas:1;) 24% (opasitas:1;) 30% (opasitas:0;) 100% (opasitas:0;) )

Jika Anda memahami CSS, maka tidak akan sulit bagi Anda untuk memahami apa yang bertanggung jawab atas apa. Saya akan memberi tahu Anda minimalnya, karena tidak ada gunanya mengajarkan CSS.

Daftar kami dengan slide memiliki kelas tubuh_slide. Itu diberikan gaya untuk penampilan dan pengaturan umum.

Selanjutnya kita memiliki elemen semu - :setelah, yang mendefinisikan lapisan tambahan dan pola berupa titik-titik ditumpangkan di atas latar belakang. Ini dilakukan dengan menggunakan gambar yang jalurnya ditentukan gambar/pola.png. Jika Anda memiliki jalur lain, harap tunjukkan dengan benar.

.body_slides li:anak ke-n(1)- ini adalah slide pertama secara berurutan dan memiliki gambar latar belakang. Berikutnya adalah anak ke-n (2), selain gambar diberikan waktu lain yaitu sama dengan 6 detik. Artinya, akan muncul 6 detik setelah slide pertama. Berikutnya adalah anak ke-n (3), akan muncul enam detik lagi, sehingga mempunyai waktu 12 detik. Jika Anda perlu menambahkan slide ke-4, tambahkan anak ke-n(4) dan seharusnya sudah memiliki waktu 18 detik. Saya pikir ini sudah jelas.

Selanjutnya Anda perlu menentukan waktu animasi penuh, sekarang sudah diatur tubuh_slide dan sama dengan 18 detik. Jika ditambah 4 slide maka akan sama dengan 24 dan seterusnya. Kalau kamu jago matematika harusnya bisa, yang penting jangan sampai salah karena slidernya tidak akan berfungsi sama sekali. Jika diinginkan, Anda dapat mempercepat atau memperlambat dengan mengatur waktu yang diinginkan.

bingkai utama anim_slides- ini adalah tampilan dan hilangnya slide. Awalnya, slide itu transparan dan diberi syarat - opacity:0;. Saat salah satu slide diputar, slide pertama kali muncul, lalu mulai menjadi transparan lagi dan menghilang sama sekali, dan yang baru muncul di tempatnya. Jika Anda ingin mengubah kecepatan kemunculan atau hilangnya, ubah persentasenya - ini adalah persentase dari total waktu.

Pengaturan lainnya sesuai keinginan dan kebutuhan - latar belakang umum, sekarang hitam, jalur ke gambar, posisi, level lapisan, dll. Kelebihan slider ini adalah sederhana dan tidak menggunakan skrip dan seluruh perpustakaan, jika dibuat menggunakan - jQuery. Saya sangat berharap jika Anda ingin mengubah gambar latar belakang, penggeser CSS ini akan membantu Anda.

Itu saja, terima kasih atas perhatiannya. 🙂

Temdo Slider adalah alat yang ampuh dan mudah digunakan untuk membuat slider yang indah untuk situs web Anda. Fitur utama penggeser:

• Anda dapat memilih gambar atau video apa pun sebagai latar belakang setiap slide.
• Gambar hamparan tambahan
• Animasi bergulir
• Animasi saat mengganti slide

Jika Anda perlu membuat penggeser "klasik" yang indah (latar belakang, tidak lebih dari dua lapisan grafis tambahan, judul, subjudul, teks dan tidak lebih dari dua tombol pada setiap slide), disarankan untuk menggunakan Temdo Slider, terutama jika Anda membutuhkannya penggeser layar penuh dan video latar belakang.

Membuat Penggeser

Untuk membuat slider baru, di menu sebelah kiri Dashboard WordPress, pilih Penggeser > Tambahkan slide baru:

Jenis slide

Pengaturan dasar slide adalah jenis latar belakang (gambar atau video). Bergantung pada pilihan parameter ini, antarmuka pengaturan slide berubah: saat memilih video alih-alih sekelompok pengaturan Latar belakang statis sebuah grup muncul Latar belakang animasi.

Latar belakang geser

Pilih gambar latar belakang untuk slide Anda. Ingatlah bahwa gambar latar belakang akan direntangkan hingga memenuhi seluruh lebar layar (dengan tetap mempertahankan rasio aspek). Oleh karena itu, disarankan untuk menggunakan gambar Full HD (1920 x 1080 piksel). Jika Anda ingin penggeser tidak menempati seluruh tinggi layar, Anda perlu mengatur ketinggian di pengaturan penggeser.

Gambar hamparan

Gunakan opsi ini untuk melapisi gambar tambahan dengan latar belakang transparan atau semi transparan di atas gambar latar belakang utama. Gambar yang dilapis akan direplikasi di seluruh permukaan slide sebagai tekstur.

Animasi Latar Belakang

Aktifkan opsi ini jika Anda ingin menganimasikan gambar latar belakang. Setelah diaktifkan, jenis animasi berikut akan tersedia:

• Pembesaran relatif terhadap pusat (default)
• Pembesaran relatif terhadap sudut kiri atas
• Pembesaran relatif terhadap sudut kanan atas
• Pembesaran relatif terhadap sudut kiri bawah
• Pembesaran relatif terhadap sudut kanan bawah

Video latar belakang

Slider Temdo mendukung format video webm, mp4 dan ogg.

Untuk menggunakan video sebagai latar belakang, Anda harus mengunggahnya terlebih dahulu ke perpustakaan media situs Anda. Untuk melakukan ini, di panel kiri Dashboard WordPress, pilih File media > Tambahkan yang baru. Setelah video selesai diunduh, salin URL-nya ke papan klip dan kembali mengedit slide. Rekatkan jalur ke file video dari clipboard ke bagian pengaturan slide yang sesuai. Disarankan agar Anda menggunakan video dalam ketiga format tersebut bila memungkinkan untuk mendukung sebanyak mungkin browser modern.

Properti geser

Bagian ini menetapkan parameter dasar slide:

• Desain Header: Anda dapat memilih desain terang untuk dipadukan dengan latar belakang gelap, atau desain gelap untuk mengkontraskan header dengan latar belakang terang.
• Warna Navigasi: Pilih warna untuk panah kiri-kanan dan titik navigasi di bagian bawah penggeser
• Menggulir ke suatu bagian: menampilkan panah yang bila diklik akan menggulir halaman ke lokasi yang ditentukan. Masukkan nama untuk jangkar, misalnya '#contact'
• Jangan tampilkan judul: Aktifkan opsi ini jika Anda tidak ingin judul ditampilkan pada slide ini.
• Jangan tampilkan bayangan judul: Matikan bayangan judul untuk slide ini.
• Animasi Grafis: Pilih dari dua efek animasi untuk grafik slide Anda
• Animasi Konten: Pilih dari dua cara untuk menganimasikan judul, subjudul, teks, dan tombol

Mengatur gaya konten slide

Pengaturan gaya konten teks slide (judul, subjudul dan teks) diatur dalam grup pengaturan yang sesuai:

• Judul slide
• Geser subjudul
• Geser teks

Di setiap grup ini, Anda dapat mengatur parameter font, warna, ukuran, dan gaya lainnya untuk setiap elemen.

Grafik dan grafik SVG

Di sini Anda dapat mengunduh elemen grafis tambahan (), serta grafik vektor dalam format SVG. Untuk masing-masing elemen ini, Anda dapat mengatur tautan yang akan terbuka ketika Anda mengklik elemen tersebut.

Tombol pada slide

Di bagian ini Anda dapat mengatur parameter untuk satu atau dua tombol:

• Teks tombol
• Link
• Animasi arahkan kursor
• Ikon

Animasi slide saat menggulir

Di bagian ini, Anda dapat mengaktifkan dan menonaktifkan animasi saat menggulir seluruh konten slide atau elemen slide individual. Jika diinginkan (dan terampil), Anda dapat menyempurnakan animasi menggunakan gaya CSS.

Menyimpan slide

Sebelum menyimpan slide, tambahkan slide ke satu atau lebih penggeser dengan mencentang kotak yang sesuai di bagian Penggeser. Jika Anda belum memiliki bilah geser apa pun, klik tautannya + Tambahkan penggeser baru:

Jika Anda perlu menambahkan penggeser gambar jQuery berkualitas tinggi ke situs Anda, maka di artikel ini Anda akan menemukan deskripsi plugin yang diperlukan. Meskipun JQuery telah membuat bekerja dengan JavaScript menjadi lebih mudah, kita masih memerlukan plugin untuk mempercepat proses desain web.

Kita dapat melakukan perubahan pada beberapa plugin ini dan membuat slider baru yang jauh lebih sesuai dengan tujuan situs kita.

Untuk penggeser lainnya, Anda cukup menambahkan judul, gambar, dan memilih efek transisi slide yang disertakan dengan penggeser. Semua plugin ini hadir dengan dokumentasi terperinci, jadi menambahkan efek atau fungsi baru ke dalamnya tidaklah sulit. Anda bahkan dapat mengubah pemicu berbasis peristiwa jika Anda seorang programmer JQuery berpengalaman.

Tren terkini seperti desain responsif sangat penting untuk proyek web, baik Anda mengimplementasikan plugin atau skrip. Semua elemen ini membuat masing-masing plugin ini sangat fleksibel. Segala sesuatu yang keluar pada tahun 2014 termasuk dalam daftar ini.

penggeser gambar jQuery

Slider Responsif Jssor

Saya baru-baru ini menemukan penggeser JQuery yang kuat ini dan dapat melihat secara langsung bahwa ia melakukan tugasnya dengan sangat baik. Ini berisi kemungkinan tak terbatas yang dapat diperluas melalui kode sumber terbuka penggeser:

• Desain adaptif;
• Lebih dari 15 opsi penyesuaian;
• Lebih dari 15 efek perubahan gambar;
• Galeri gambar, carousel, dukungan ukuran layar penuh;
• Rotator spanduk vertikal, daftar slide;
• Dukungan video.

Demo | Unduh

PgwSlider - penggeser responsif berdasarkan JQuery / Zepto

Satu-satunya tugas plugin ini adalah menampilkan slide gambar. Ini sangat ringkas, karena file JQuery hanya berukuran 2,5 KB, sehingga dapat dimuat dengan sangat cepat:

• Tata letak adaptif;
• optimasi SEO;
• Dukungan untuk browser yang berbeda;
• Transisi gambar sederhana;
• Ukuran arsipnya hanya 2,5 KB.

Demo | Unduh

Slider Berita Vertikal Jquery

Slider JQuery yang fleksibel dan berguna yang dirancang untuk sumber berita dengan daftar publikasi di sisi kiri dan gambar ditampilkan di sebelah kanan:

• Desain adaptif;
• Kolom vertikal untuk berpindah berita;
• Header diperluas.

Demo | Unduh

Penggeser Pukulan

Penggeser ini tidak mengandung jQuery, tetapi saya ingin menyajikannya karena sangat ringkas dan dapat mengurangi waktu pemuatan halaman secara signifikan. Beri tahu saya jika Anda menyukainya:

• Tata letak adaptif;
• Desain sederhana;
• Berbagai pilihan perubahan slide;
• Kode JavaScript minimal;
• Ukurannya hanya 3KB.

Demo | Unduh

Galeri Polaroid bergaya datar

Galeri bergaya dokumen yang tersebar di meja dengan tata letak yang fleksibel dan desain yang indah pasti menarik bagi banyak dari Anda. Lebih cocok untuk tablet dan layar besar:

• Penggeser adaptif;
• Desain datar;
• Perubahan slide secara acak;
• Akses penuh ke kode sumber.

Demo | Unduh

A-Penggeser

Demo | Unduh

HiSlider – Penggeser gambar HTML5, jQuery dan WordPress

HiSlider telah memperkenalkan plugin slider jQuery gratis baru yang dengannya Anda dapat membuat berbagai galeri gambar dengan transisi fantastis:

• Penggeser adaptif;
• Tidak memerlukan pengetahuan pemrograman;
• Beberapa templat dan skin menakjubkan;
• Efek transisi yang indah;
• Dukungan untuk berbagai platform;
• Kompatibel dengan WordPress, Joomla, Drupal;
• Kemampuan untuk menampilkan berbagai jenis konten: gambar, video YouTube, dan video Vimeo;
• Pengaturan yang fleksibel;
• Fitur tambahan yang berguna;
• Jumlah konten yang ditampilkan tidak terbatas.

Demo |Unduh

Wow Penggeser

WOW Slider adalah penggeser gambar jQuery responsif dengan efek visual luar biasa ( domino, memutar, mengaburkan, membalik dan mem-flash, terbang keluar, tirai) dan templat profesional.

WOW Slider hadir dengan wizard instalasi yang memungkinkan Anda membuat slider fantastis dalam hitungan detik tanpa harus memahami kode atau mengedit gambar. Versi plugin untuk Joomla dan WordPress juga tersedia untuk diunduh:

• Sepenuhnya responsif;
• Mendukung semua browser dan semua jenis perangkat;
• Dukungan untuk perangkat sentuh;
• Instalasi mudah di WordPress;
• Fleksibilitas dalam konfigurasi;
• Dioptimalkan untuk SEO.

Demo |Unduh

Nivo Slider – plugin jQuery gratis

Nivo Slider dikenal di seluruh dunia sebagai penggeser gambar terindah dan mudah digunakan. Plugin Nivo Slider gratis dan dirilis di bawah lisensi MIT:

• Membutuhkan JQuery 1.7 dan lebih tinggi;
• Efek transisi yang indah;
• Sederhana dan fleksibel untuk dikonfigurasi;
• Kompak dan adaptif;
• Sumber terbuka;
• Kuat dan sederhana;
• Beberapa templat berbeda;
• Pemangkasan gambar otomatis.

Demo |Unduh

Slider jQuery sederhana dengan dokumentasi teknis

Idenya terinspirasi oleh penggeser Apple, di mana beberapa elemen kecil dapat terbang dengan efek animasi berbeda. Para pengembang mencoba menerapkan konsep ini, dengan mempertimbangkan persyaratan minimum untuk membuat desain toko online sederhana, di mana elemen “terbang” mewakili berbagai kategori:

• Tata letak adaptif;
• Desain minimalis;
• Berbagai efek drop-out dan perubahan slide.

Demo |Unduh

Penggeser gambar jQuery ukuran penuh

Penggeser yang sangat sederhana yang menempati 100% lebar halaman dan menyesuaikan dengan ukuran layar perangkat seluler. Ia bekerja dengan transisi CSS, dan gambar “ditumpuk” bersama dengan jangkar. Jangkar dapat diganti atau dilepas jika Anda tidak ingin melampirkan link ke gambar.

Saat dipasang, penggeser meluas hingga 100% lebar layar. Itu juga dapat secara otomatis mengurangi ukuran gambar slide:

• Penggeser JQuery adaptif;
• Ukuran penuh;
• Desain minimalis.

Demo |Unduh

Penggeser Konten Elastis + tutorial

Elastic Content Slider secara otomatis menyesuaikan lebar dan tinggi berdasarkan dimensi elemen induk. Ini adalah penggeser jQuery sederhana. Ini terdiri dari area slide di bagian atas, dan bilah tab navigasi di bagian bawah. Penggeser menyesuaikan lebar dan tingginya sesuai dengan dimensi wadah induk.

Jika dilihat pada layar diagonal kecil, tab navigasi berubah menjadi ikon kecil:

• Desain adaptif;
• Klik mouse bergulir.

Demo |Unduh

Penggeser Tumpukan 3D Gratis

Penggeser eksperimental yang menelusuri gambar dalam 3D. Kedua tumpukan tersebut menyerupai tumpukan kertas, yang ketika digulir, gambar akan ditampilkan di tengah penggeser:

• Desain adaptif;
• Balik - transisi;
• Efek 3D.

Demo |Unduh

Slider Celah Layar Penuh berdasarkan tutorial JQuery dan CSS3 +

Tutorial ini akan menunjukkan cara membuat slider dengan twist: idenya adalah untuk “memotong” dan menampilkan slide saat ini saat Anda membuka gambar berikutnya atau sebelumnya. Menggunakan animasi JQuery dan CSS, kita dapat membuat efek transisi yang unik:

• Desain adaptif;
• Transisi terpisah;
• Penggeser layar penuh.

Demo |Unduh

Unislider - penggeser jQuery yang sangat kecil

Tidak ada fitur tambahan yang tidak perlu, ukurannya kurang dari 3KB. Gunakan kode HTML apa pun untuk slide Anda, perluas dengan CSS. Segala sesuatu yang berhubungan dengan Unslider dihosting di GitHub:

• Dukungan untuk berbagai browser;
• Dukungan papan ketik;
• Penyesuaian ketinggian;
• Desain adaptif;
• Dukungan masukan sentuh.

Demo | Unduh

Slide Responsif Minimal

Plugin sederhana dan ringkas ( ukurannya hanya 1 KB), yang membuat penggeser responsif menggunakan elemen di dalam wadah. ResponsiveSLides.js bekerja dengan berbagai browser, termasuk semua versi IE dari IE6 dan yang lebih baru:

• Sepenuhnya responsif;
• Ukuran 1 KB;
• Transisi CSS3 dengan kemampuan dijalankan melalui JavaScript;
• Markup sederhana menggunakan daftar berpoin;
• Kemampuan untuk menyesuaikan efek transisi dan durasi menonton satu slide;
• Mendukung kemampuan untuk membuat beberapa tayangan slide;
• Pengguliran otomatis dan manual.

Demo |Unduh

Kamera - penggeser jQuery gratis

Kamera adalah plugin dengan banyak efek transisi dan tata letak responsif. Mudah diatur, didukung oleh perangkat seluler:

• Desain sepenuhnya responsif;
• Tanda tangan;
• Kemampuan untuk menambahkan video;
• 33 ikon warna berbeda.

Demo |Unduh

SlidesJS, plugin jQuery responsif

SlidesJS adalah plugin responsif untuk JQuery (1.7.1 dan lebih tinggi) dengan dukungan untuk perangkat sentuh dan transisi CSS3. Bereksperimenlah dengannya, coba beberapa contoh siap pakai yang akan membantu Anda mengetahui cara menambahkan SlidesJS ke proyek Anda:

• Desain adaptif;
• transisi CSS3;
• Dukungan untuk perangkat sentuh;
• Mudah diatur.

Demo | Unduh

Penggeser BX Jquery

Ini adalah slider jQuery responsif gratis:

• Sepenuhnya responsif - beradaptasi dengan perangkat apa pun;
• Perubahan slide horizontal dan vertikal;
• Slide dapat berisi gambar, video, atau konten HTML;
• Dukungan yang diperluas untuk perangkat sentuh;
• Menggunakan Transisi CSS untuk Animasi Slide ( akselerasi perangkat keras);
• Callback API dan metode yang sepenuhnya publik;
• Ukuran file kecil;
• Mudah diterapkan.

Demo |Unduh

Penggeser Fleksibel 2

Slider responsif terbaik. Versi baru telah ditingkatkan untuk meningkatkan kecepatan dan kekompakan.

Demo | Unduh

Galleria - Galeri foto responsif berbasis JavaScript

Galleria digunakan di jutaan situs web untuk membuat galeri gambar berkualitas tinggi. Jumlah ulasan positif tentang karyanya sungguh luar biasa:

• Sepenuhnya gratis;
• Mode tampilan layar penuh;
• 100% adaptif;
• Tidak diperlukan pengalaman pemrograman;
• Dukungan untuk iPhone, iPad, dan perangkat sentuh lainnya;
• Flickr, Vimeo, YouTube, dan lainnya;
• Beberapa topik.

Demo | Unduh

Blueberry - penggeser gambar jQuery responsif sederhana

Saya mempersembahkan kepada Anda penggeser gambar jQuery yang ditulis khusus untuk desain web responsif. Blueberry adalah plugin penggeser gambar sumber terbuka eksperimental yang ditulis khusus untuk bekerja dengan templat responsif.

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 slider jquery adaptif, 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

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 kode sumber terbuka JPlayer. 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 browser 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.