Satu dari cara yang efektif Menarik perhatian pengguna di halaman situs adalah pembuatan animasi yang bergerak. Elemen animasi membantu lebih jelas memberi tahu kami dan menunjukkan kepada pengguna tentang produk Anda. Terakhir kali, panel perjalanan mendapatkan popularitas besar, serta sejumlah efek lain yang muncul saat menggulir atau ditekan ke dalam gambar. Mereka juga dikenal sebagai slider, carousel dan meninggalkan panel. Artikel ini membahas penciptaan slider tipe carousel adaptif, dengan efek yang lancar dari kontrak otomatis.
Hari ini, jaringan berisi ratusan ulasan dengan referensi untuk solusi siap pakai, tetapi, kebanyakan dari mereka mengandung banyak fungsi yang tidak digunakan yang secara signifikan mengurangi kinerja slider, serta memperlambat pemuatan situs secara signifikan secara keseluruhan. Pengembang web profesional selalu berusaha membuat fleksibel dalam pengaturan produk perangkat lunak., dengan ambang batas pustaka dan plugin tambahan. Itulah sebabnya karya skrip kami melibatkan persyaratan minimum untuk mengorganisir slider tersebut. Fungsi kerja memungkinkan Anda untuk mengatur interval switching, kecepatan, serta pemilihan slide tertentu. Di bawah ini adalah deretan permanen, mengatur pekerjaan slider itu sendiri.
timelist. - kecepatan switching slide
TimeView. - Waktu ditunjukkan
Radiobut. - Tombol di bawah slide, untuk navigasi cepat. Secara default, nilai sebenarnya, jika menggunakan FALSE, tombol akan hilang.
Dan sekarang mari kita mulai! Buat dan buka file index.htm.
Dalam kode yang dikirim, seperti yang kita lihat tidak ada yang rumit, slider-wrap. Menentukan umum Dan garis slider di tengah layar. Parameter slide aktif. Setel ukuran dan tinggi gambar sesuai dengan panjangnya. DAN slider. Hanya menunjukkan gambar aktif.
Sekarang buat dan buka file. gaya.css. dan menangis markup yang kita butuhkan:
@Import URL ("https://fonts.googLeapis.com/css?family\u003dopen+sans|roboto"); Tubuh (Warna: # 4F4F5A; Font-Face: "Roboto", SAN-SERIF; Ukuran font: 16px; Padding: 0; margin: 0 # slider-wrap (lebar maks: 800px; Margin-TOP: 80px;) # Aktif-slide (Lebar: 100%; Tampilan: Posisi: Relatif; Overflow: Tersembunyi; -WebKit-Pengguna-Select: Tidak ada; -moz- Pilih pengguna: tidak ada; -O-user-pilih: tidak ada; pengguna-pilih: tidak ada;) #slider (posisi: relatif; lebar: calc (100% * 4); 0; kiri: 0; Margin: 0; ; padding: 0; -webkit-transisi: 1s; -O-transisi: 1s; Transisi: 1S; -WebKit-Transition-timing-Fungsi: fungsi-in-in-infungsi: Kemudahan: -Out; fungsi-waktu transisi: kemudahan-keluar;) .Slide (lebar: calc (100% / 4); daftar-gaya: tidak ada; tampilan: inline; float:) .slide img (lebar:). 100%;) .radio-button (margin-top: 10px; text-align: center;) .radio-tapi .ctrl-Select (margin: 2px; display: inline-block; lebar: 16px; ovllow: 16px; : tersembunyi; teks-indentasi: -9999px; latar belakang: URL (radiobg.p Ng) pusat bawah tidak berulang; ) .Radio-tapi .ctrl-Select: hover (cursor: pointer; posisi latar belakang: pusat tengah;) .radio-tetapi .ctrl-select.odoctive (posisi latar: bagian atas; #prewbutton (display). : blok; lebar: 40px; tinggi: 100%; Posisi: absolute; top: 0; overflow: tersembunyi; teks-indentasi: -999px; latar belakang: URL ("arrowbg.png") No-Rever; Opacity: 0.5 ; z-index: 3; garis besar: tidak ada! Penting;) #prewbutton (kiri: 10px;) #NextButton (kanan: 10px; latar belakang: URL (arrowbg.png) pusat kanan tidak berulang;) #prewbutton: hover, # NextButton: Hover (Opacity: 1;)
Dalam gaya gaya slider-wrap. Propashite. lebar – panjang maksimum Fotomu.
Dalam gaya gaya #Slider (lebar: calc (100% * 4);) dan .slide (lebar: calc (100% / 4);) Tentukan jumlah gambar di slider Anda. Dalam contoh kami, mereka 4.
Jika panah maju / kembali ke visibilitas slider Anda dapat dibuat tidak terlihat dan mereka akan muncul ketika Anda melayang. Untuk melakukan ini dalam parameter pREWBUT. dan nextbut., Atur nilai properti opacity 0.
Sekarang buat dan buka file kami. slider.js.di mana akan ada kode slider. Jangan lupa untuk menghubungkan perpustakaan jQuery.
$ (Dokumen) .Ready \u003d 700; var timeView \u003d 5000; var radiobut \u003d true; var slidenum \u003d 1; slidetime var; slidecount \u003d $ ("# slider .slide"). Panjang; var animslide \u003d fungsi (panah) (Slidetime); jika (panah \u003d\u003d "Next") (jika (slidenum \u003d\u003d slidecount) (slidenum \u003d 1;) lain (slidenum ++) translateTh \u003d - $ ("# active-slide") .width () * (Slidenum - 1); $ ("# slider"). CSS (("Transform": "Terjemahkan (" + translatwidth + "px, 0)"));) lain jika (arrow ") (jika (slidenum \u003d\u003d 1) (slider \u003d slidecount;) lain (sliderum- \u003d 1) TranslateTh \u003d - $ ("# active-slide"). Lebar () * (slidenum - 1); $ ("#slider"); CSS (("Transform": "Terjemahkan (" + translatwidth + "px, 0)"));) Lainnya (slidenum \u003d panah; translatnya \u003d - $ ("# aktif-slide"). Lebar () * (slidenum - 1); $ ("slider"). CSS (("Transform": "Terjemahkan (" + translateWidth + "PX, 0)"));) $ (". Ctrl-Select.Active") .RemoveClass (" Aktif "); $ (". Ctrl-Select "). Persamaan (slidenum - 1) .addclass (" aktif ");) if (radiobut) (var $ lautan \u003d $ ("<>") .prependto (" # aktif-slide "); $ (" # NextButton "). Klik (fungsi (); Kembalikan Salah;)) $ (" # prewbutton "). Klik (Fungsi (" ("PRESSLIDE (" "); Kembalikan Salah;))) Var Adderspan \u003d" "; $ (" slide "). Masing-masing (Fungsi (Indeks) (Adderspan + \u003d" "+ indeks +""; }); $("
Fungsi slide. Membutuhkan tiga jenis nilai: Selanjutnya, Prew, Nilai Numerik. Parameter berikutnya beralih slide berikut, PREW mengembalikan yang sebelumnya, dan nilai numerik adalah slide yang ditentukan yang dipilih melalui tombol Radio Slide.
Slider yang disajikan menggunakan gambar dari sumber daya web https://pixabay.com/.
Jika Anda perlu menambahkan jQuery-slider berkualitas tinggi ke situs Anda, maka di artikel ini Anda akan menemukan deskripsi plugin yang diperlukan. Terlepas dari kenyataan bahwa jquery telah melakukan pekerjaan secara signifikan dengan JavaScript. Kami masih membutuhkan plugin untuk mempercepat proses membuat desain web.
Kami dapat membuat perubahan pada beberapa plugin ini dan membuat slider baru yang jauh lebih menjawab tugas situs kami.
Untuk slider lain, cukup tambahkan berita utama, gambar, dan pilih efek untuk mengubah slide yang datang dengan slider. Semua plugin ini disertai dengan dokumentasi terperinciJadi tambahkan efek atau fungsi baru kepada mereka tidak akan banyak kesulitan. Anda bahkan dapat mengubah pemicu tergantung pada peristiwa, jika Anda seorang programmer jQuery yang berpengalaman.
Tren terbaru, seperti desain adaptif, sangat penting untuk proyek web, terlepas dari apakah Anda menerapkan plugin atau skrip. Semua elemen ini membuat masing-masing plugin ini sangat fleksibel. Segala sesuatu yang terjadi pada tahun 2014 termasuk dalam daftar ini.
Gambar jquery-slider
Slider responsif JSSOR.
Baru-baru ini, saya menemukan jQuery fungsional ini -colder, dan saya bisa meyakinkan yang pertama untuk memastikan bahwa ia mengatasi pekerjaannya dengan sangat baik. Ini berisi kemungkinan tak terbatas yang dapat diperluas dengan mengorbankan kode sumber buka slider:
- Desain adaptif;
- Lebih dari 15 pengaturan;
- Lebih dari 15 efek pergeseran gambar;
- Galeri gambar, korsel, dukungan untuk ukuran layar penuh;
- Spanduk rotator vertikal, daftar slide;
- Dukungan video.
Demo | Unduh.
Pgwslider - slider berbasis jquery / zepto adaptif
Satu-satunya tugas dari plugin ini adalah untuk menunjukkan slide gambar. Ini sangat kompak, karena ukuran file jQuery hanya 2,5 KB, yang memungkinkan Anda memuatnya dengan sangat cepat:
- Tata letak adaptif;
- Optimasi SEO;
- Dukungan dengan browser yang berbeda;
- Transisi gambar sederhana;
- Ukuran arsip hanya 2,5 kb.
Demo | Unduh.
Slider Berita Vertikal JQuery
Slider jquery-slider yang fleksibel dan bermanfaat, dirancang untuk sumber daya berita dengan daftar publikasi di sisi kiri dan kesimpulan gambar di sebelah kanan:
- Desain adaptif;
- Kolom switching berita vertikal;
- Berita utama.
Demo | Unduh.
Slider wallop.
Slider ini tidak mengandung jQuery, tetapi saya ingin menyajikannya, karena sangat kompak dan memungkinkan Anda untuk secara signifikan mengurangi waktu untuk mengunduh halaman. Beri tahu saya jika Anda menyukainya:
- Tata letak adaptif;
- Desain sederhana;
- Berbagai opsi untuk mengubah slide;
- Kode JavaScript minimum;
- Ukuran hanya 3Kb.
Demo | Unduh.
Galeri Polaroid bergaya datar
Galeri dengan gaya tersebar di atas meja dokumen dengan tata letak yang fleksibel dan desain yang indah Harus menarik banyak dari Anda. Lebih cocok untuk tablet dan tampilan besar:
- Slider adaptif;
- Desain datar;
- Perubahan slide acak;
- Akses penuh ke kode sumber.
Demo | Unduh.
A-slider.
Demo | Unduh.
HISLIDER - HTML5, JQUERY dan gambar slider WordPress
Hislider memperkenalkan plugin slider jquery gratis baru, yang dengannya Anda dapat membuat berbagai gambar galeri dengan transisi fantastis:
- Slider adaptif;
- Tidak memerlukan pengetahuan pemrograman;
- Beberapa template dan kulit luar biasa;
- Efek transisi yang indah;
- Dukungan untuk berbagai platform;
- Kompatibilitas dengan WordPress, Joomla, Drupal;
- Kemampuan untuk menampilkan konten berbagai jenis: Gambar, video YouTube, dan Videa Videa;
- Pengaturan fleksibel;
- Fungsi tambahan yang berguna;
- Volume tak terbatas dari konten yang ditampilkan.
Demo | Unduh.
Slider WoW.
Slider WoW adalah adaptif jquery slider. Gambar dengan luar biasa efek visual (domino, belok, blur, kudeta dan flash, keberangkatan, tirai) dan templat profesional.
WoW Slider hadir dengan wizard instalasi, yang memungkinkan Anda membuat slider fantastis dalam hitungan detik tanpa perlu memahami kode dan mengedit gambar. Juga tersedia untuk mengunduh versi plug-in Joomla dan WordPress:
- Sepenuhnya adaptif;
- Dukungan untuk semua browser dan semua jenis perangkat;
- Dukungan untuk perangkat sensorik;
- Instalasi sederhana pada wordpress;
- Fleksibilitas dalam pengaturan;
- Seo-Dioptimalkan.
Demo | Unduh.
NIVO Slider - Plugin JQuery-Plugin Gratis
Nivo Slider diketahui seluruh dunia sebagai slider gambar yang paling indah dan mudah digunakan. Plugin NIVO Slider gratis dan dirilis di bawah lisensi MIT:
- JQuery 1.7 ke atas;
- Efek transisi yang indah;
- Sederhana dan fleksibel dalam pengaturan;
- Kompak dan adaptif;
- Buka kode;
- Kuat dan sederhana;
- Beberapa templat yang berbeda;
- Pemangkasan gambar otomatis.
Demo | Unduh.
Slider JQuery Sederhana dengan dokumentasi teknis
Gagasan ini terinspirasi oleh slider Apple di mana beberapa elemen kecil dapat terbang dengan efek animasi yang berbeda. Pengembang mencoba mewujudkan konsep ini sehubungan dengan persyaratan Minimum Untuk membuat desain sederhana dari toko online, di mana elemen "keberangkatan" adalah kategori yang berbeda:
- Tata letak adaptif;
- Desain minimalis;
- Berbagai efek kehilangan dan pergeseran slide.
Demo | Unduh.
Slider gambar jquery ukuran penuh
Slider yang sangat sederhana yang menempati 100% dari lebar halaman dan menyesuaikan dengan ukuran layar perangkat seluler. Ini bekerja dengan transisi CSS, dan gambar "pas" dengan binatang. Jangkar dapat diganti atau dihapus jika Anda tidak ingin mengikat tautan ke gambar.
Saat menginstal, slider terungkap pada lebar layar 100%. Ini juga dapat secara otomatis mengurangi ukuran gambar slide:
- Adaptif jQuery -slider;
- Ukuran penuh;
- Desain minimalis.
Demo | Unduh.
Slider konten elastis + miliki
Konten elastis slidener secara otomatis menyesuaikan lebar dan tinggi tergantung pada ukuran elemen induk. Ini adalah slider jquery sederhana. Ini terdiri dari zona slide di atas, dan panel tab navigasi di bagian bawah. Slider menyesuaikan lebar dan tinggi sesuai dengan ukuran wadah induk.
Saat melihat di layar kecil secara diagonal, tab navigasi diubah menjadi ikon kecil:
- Desain adaptif;
- Gulir dengan klik mouse.
Demo | Unduh.
Slider stack 3d gratis
Slider eksperimental, berjalan-jalan gambar dalam 3D. Dua tumpukan menyerupai tumpukan kertas, dari mana saat menggulir gambar ditampilkan di tengah slider:
- Desain adaptif;
- Flip-transformasi;
- Efek 3D.
Demo | Unduh.
Slider Celah Fullscreen Berdasarkan jQuery dan CSS3 + Manual
Dari manual, Anda akan belajar cara membuat slider dengan sorotan: Idenya adalah untuk "memotong" dan menampilkan slide saat ini dalam formulir ini, saat Anda membuka gambar berikut atau sebelumnya. Menggunakan jQuery dan CSS - animasi, kita dapat membuat efek transisi yang unik:
- Desain adaptif;
- Perpecahan transisi;
- Slider layar penuh.
Demo | Unduh.
Unislider - Slider JQuery yang sangat kecil
Tidak ada bellow dan penandaan yang tidak perlu, ukuran kurang dari 3KB. Gunakan kode HTML apa pun untuk slide Anda, perluas dengan menggunakan CSS. . Semua yang terkait dengan Unslider terletak di GitHub:
- Dukungan untuk berbagai browser;
- Dukungan keyboard;
- Setinggi penyesuaian;
- Desain adaptif;
- Dukungan untuk input sensorik.
Demo | Unduh.
Slide responsif minimal
Plugin sederhana dan kompak ( ukuran hanya 1 kb), yang menciptakan slider adaptif menggunakan elemen di dalam wadah. ResponsivesLides.js berfungsi S. jumlah besar Browser, termasuk semua versi IE dari IE6 ke atas:
- Sepenuhnya adaptif;
- Ukuran 1 kb;
- Transisi CSS3 dengan kemungkinan startup melalui javascript;
- Markup sederhana menggunakan daftar yang ditandai;
- Kemampuan untuk mengkonfigurasi efek transisi dan durasi tampilan satu slide;
- Mendukung kemampuan untuk membuat beberapa tayangan slide;
- Otomatis dan gulir tangan.
Demo | Unduh.
Kamera - Slider JQuery Gratis
Kamera adalah plugin dengan banyak efek transisi, tata letak adaptif. Sederhana dalam pengaturan, didukung oleh perangkat seluler:
- Desain sepenuhnya adaptif;
- Tanda tangan;
- Kemampuan untuk menambah video;
- 33 ikon warna berbeda.
Demo | Unduh.
Slidejs, plugin adaptif jQuery
SlideJS adalah plugin adaptif untuk jQuery (1.7.1 dan di atas) dengan dukungan untuk perangkat sensorik dan transisi CSS3. Bereksperimenlah dengannya, coba beberapa contoh siap pakai yang akan membantu Anda mengetahui cara menambahkan slidejs ke proyek Anda:
- Desain adaptif;
- CSS3 -Produksi;
- Dukungan untuk perangkat sensorik;
- Sederhana dalam pengaturan.
Demo | Unduh.
Bx jquery slider.
Ini adalah slider jquery adaptif gratis:
- Sepenuhnya adaptif - menyesuaikan ke perangkat apa pun;
- Perubahan horizontal, vertikal slide;
- Slide mungkin berisi gambar, video atau html -content;
- Dukungan diperpanjang untuk perangkat sensorik;
- Menggunakan CSS-Transforms untuk animasi slide ( akselerasi perangkat keras);
- API panggilan balik dan metode publik sepenuhnya;
- Ukuran file kecil;
- Mudah diimplementasikan.
Demo | Unduh.
Flexslider 2.
Slider adaptif terbaik. Versi baru Itu diselesaikan untuk meningkatkan kecepatan pekerjaan, kekompakan.
Demo | Unduh.
Galleria - Galeri Foto Adaptif berdasarkan Javascript
Galleria digunakan pada jutaan situs untuk membuat galeri gambar dalam kualitas tinggi. Jumlah ulasan positif tentang karyanya hanya bergulir:
- Sepenuhnya gratis;
- Mode tampilan layar penuh;
- 100% adaptif;
- Tidak diperlukan pengalaman pemrograman;
- Mendukung iPhone, iPad dan perangkat sentuh lainnya;
- Flickr, Vimeo, YouTube dan banyak lagi;
- Beberapa topik.
Demo | Unduh.
Blueberry - Slider Gambar JQuery Simple Adaptive
Saya hadir kepada Anda jQuery-slider gambar, ditulis khusus untuk desain web adaptif. Blueberry adalah plugin eksperimental dari slider gambar sumber terbuka, yang ditulis secara khusus untuk bekerja dengan template adaptif.
4 November 2019 Rekaman telah diperbarui
Yury Jerman.
Slider di Slider Bonus CSS + Murni
Slider CSS memiliki beberapa keuntungan atas slider pada JavaScript. Salah satu keunggulan ini adalah kecepatan unduhan. Tidak hanya gambar untuk slider digunakan. ukuran besar (Jika tidak ada optimasi untuk layar yang berbeda), itu juga dihabiskan untuk mengunduh skrip untuk beberapa waktu. Tetapi dalam artikel Anda hanya akan melihat slider pada CSS murni.
Itulah yang saya temukan di situs tentang masalah slider:
1. Slider Gambar CSS3
Slider pada CSS, yang menggunakan slide tombol radio untuk menavigasi. Kolam radio ini berada di bawah slider. Selain itu, selain kolam radio, navigasi dilakukan dengan menggunakan penembak di sebelah kiri dan kanan. Untuk melacak gambar apa yang sekarang ditampilkan - Pseudo-Schools digunakan: diperiksa.
2. Slider Miniatur CSS3
Berbeda dengan slider masa lalu pada CSS, di sini alih-alih pool radio di bagian bawah adalah thumbnail dari semua gambar, yang juga nyaman saat membuat galeri gambar. Gambar diganti dengan semacam efek: menghilang dengan lancar sambil meningkat.
3. Galeri pada CSS
Tetapi slider ini pada CSS sangat cocok untuk menjual halaman. Sebagai aturan, banyak pengembang web dalam pengembangan pinjaman (menjual halaman) menempatkan slider di awal sehingga di layar pertama (tanpa gulir), pengunjung segera melihat semua manfaat yang ada di halaman ini. Selain itu, slider ini adaptif, yang juga menyenangkan.
4. Slider pada CSS tanpa tautan
Segera saya ingin melihat bahwa slider ini tidak menggunakan tautan! Secara default, selain gambar utama (slide), 2 slide lebih terlihat. Mereka terletak di belakang yang utama. Perubahan slide terjadi dalam mode yang indah: pertama dua slide dipindahkan dan slide menjadi pusat, yang kemudian akan menjadi yang utama. Kemudian slide meningkat dan ditempatkan di depan sisanya.
5. Slider adaptif pada CSS3
Slider adaptif lain yang kendalinya didasarkan pada radiokopter. Untuk melihat bagaimana slider ini akan melihat perangkat yang berbedaah - Anda dapat secara independen mengubah jendela browser, atau pada halaman slider ada ikon khusus perangkat yang berbeda, mengklik di mana Anda akan melihat akan melihat slider di komputer Anda, tablet atau pada smartphone Anda.
*** Bonus Slider ***
Selain semua slider, yang disajikan di atas, saya ingin menyenangkan Anda dengan yang lain. Slider ini sangat cocok untuk membuat galeri gambar. Kata-kata tidak menjelaskan apa yang dia lakukan, jadi lebih baik menonton semuanya di video:
Keluaran
Dengan bantuan slider, Anda dapat merancang galeri gambar dengan indah dengan menempatkan mereka lebih kompak, masukkan slider di layar pertama (bagian dari halaman yang terlihat tanpa menggulir) Jual halaman untuk segera menunjukkan pengunjung ke manfaat utama akan menerima. Anda masih dapat menemukan banyak cara di mana Anda dapat menerapkan slider, tetapi satu hal yang jelas persis - mereka bermanfaat dengan penggunaan yang tepat.
Poin yang ditinjau dalam artikel.
Halo semuanya. Slider yang sangat keren yang ingin saya sampaikan kepada Anda. Ooo ... aku melihatmu benar-benar lupa tentang aku. Ya, ya, saya sudah pergi, mungkin selama enam bulan atau setahun dan saya benar-benar tidak tahu bagaimana membuat dirinya keluar setiap hari pada artikel (meskipun benar-benar nyata). Nah, oke, bukan tentang pidato sekarang ini. Slider disediakan oleh Tympanus Codrops dan bekerja pada HTML5, CSS3 dan TweenMax.js.
Slider tidak berputar ke kanan kiri dan bukan dari atas ke bawah, tetapi secara diagonal. Panah navigasi terletak di sudut kiri atas dan di kanan bawah. Juga, navigasi dilakukan dengan menekan prevni di kanan dan kiri. Semua animasi sangat halus dan berfungsi dengan baik di semua browser modern. Setiap elemen individu dari slider memiliki halaman sendiri yang terbuka saat menekan. Halaman memiliki foto, judul dan teks.
Slider sempurna untuk galeri, portofolio artis, fotografer, pematung, singkatnya, siapa pun yang terlibat dalam kegiatan kreatif dan ia memiliki karya yang ingin ia tunjukkan di situs tersebut. Galeri di situs museum, pameran akan terlihat bagus.
Menghubungkan galeri
Hubungkan galeri tidak akan sulit
Unduh file
Pertama, Anda hanya perlu mengunduh sumber dari situs saya untuk tautan langsung. Dari arsip Anda perlu menuangkan ke akar situs IMG, Folder CSS dan JS
Hubungkan file CSS dan JS
Kemudian hubungkan skrip dan gaya. Gaya terhubung dengan menambahkan ke tag
Kode selanjutnya.
dan skrip ke bawah halaman ke tag penutup