Rasm galereyalari va slayderlar jQuery-ning eng mashhur formatlaridan biridir. Shuning uchun, istalgan narxda saytga kerakli vizual tarkibni qo'shishingiz mumkin.

Galereya va slayderlar tomonni kamroq jozibador qiladi, ammo baribir xabarni etkazish uchun zarur bo'lgan barcha rasmlarni qo'shishga imkon beradi. Jigarrang hid, ayniqsa, onlayn-do'konlar uchun yomon bo'ladi.

Bugungi maqoladan biz siz uchun eng chiroyli rasm galereyalari va jQuery slayderlarini to'pladik.

Ularni o'rnatish uchun siz faqat tanlangan plaginni bosh qismiga qo'shishingiz kerak HTML sahifalar jQuery kutubxonasi bilan birgalikda o'rganing va ularni hujjatlar bilan birga o'rganing (faqat bir necha qator kodlar).

Ushbu elementlardan qaysi biri sizning loyihangizga mos kelishini tanlang.

1. Bootstrap Slider

Bootstrap Slider – bepul, mobil qurilmalar uchun optimallashtirilgan, aylantiriladigan nuqta va chegirmalar bilan tasvir slayderi. Ular har qanday ekranda va istalgan brauzerda ajoyib ko'rinadi. Slayderlarga rasmlar, videolar, matnlar, eskizlar va tugmalar qo'shishingiz mumkin.

2. Mahsulotni ko'rib chiqish slayderi

Mahsulotni ko'rib chiqish slayderi jQuery-ning to'liq imkoniyatlarini o'z ichiga oladi va har qanday interfeysga mos keladi. Shuningdek, ushbu plagin kodining ravshanligi va tozaligi sizni xursand qiladi.

3. Kengaytiriladigan rasmlar galereyasi

Kengaytiriladigan rasmlar galereyasi - bu ayiqning bir marta bosilishi bilan to'liq ekranli galereyaga aylanadigan qiziqarli plagin. Siz undan "Biz haqimizda" bo'limi uchun yoki mahsulotlar haqidagi ma'lumotlarni ko'rib chiqish uchun foydalanishingiz mumkin.

4. Fotorama

Fotorama ish stoli va ish stoli uchun ishlaydigan jQuery galereya plaginidir. mobil brauzerlar. U turli xil navigatsiya imkoniyatlarini taklif etadi: eskizlar, aylantirish, oldinga va orqaga tugmalari, avtomatik slayd-shou displeyi va markerlar.

5. Immersiv slayder

Immersive Slider sizga Google TV slayderiga o'xshash noyob slaydni ko'rish tajribasini yaratishga imkon beradi. Asosiy fotosuratlaringizga diqqatni qaratmoqchi bo'lgan fon rasmlarini o'zgartirishingiz mumkin.

6. Eng kam

Eng kichik - ajoyib jQuery ajoyib galereya yaratishga yordam beradigan plagin. Kursorni tasvir ustiga olib borganingizda, matn paydo bo'ladi va uni bosganingizda, matn butun ekranda paydo bo'ladi.

7. Sürgülü panellar shabloni

Ushbu plagin portfel uchun ideal. Kontent tanlovlariga mos keladigan gorizontal (vertikal ravishda kichik ekranlarda) ko'rsatiladigan tasvirlar bloklarini yaratishingiz mumkin.

8. Squeezebox portfolio shabloni

Squeezebox Portfolio Shabloni portfellar uchun harakat effektlarini taqdim etadi. Kursorni asosiy tasvir (yoki blok) ustiga olib borganingizdan so'ng, bog'langan elementlar paydo bo'ladi.

9. Tasvirlarni aralashtirish

Tasvirlarni aralashtirish - bu quvnoq plagin bo'lib, kursorni ustiga olib borganingizda o'zgaruvchan tasvirlar galereyasini yaratishga imkon beradi.

10. Bepul jQuery Lightbox plagini

Ozod jQuery Lightbox Plagin sahifada bir yoki bir nechta rasmni ko'rsatishga yordam beradi. Ularni kattalashtirish va kerakli o'lchamga aylantirish ham mumkin.

11. PgwSlider – jQuery uchun javob beruvchi slayder

PgwSlider - minimal tasvir slayderi. jQuery kodi juda muhim emas, shuning uchun ushbu plaginning mashhurligi sizni xursand qiladi.

12. Tarqalgan polaroidlar galereyasi

Tarqalgan polaroidlar galereyasi tekis dizayndagi ajoyib slayderdir. Tasvir aralashtirilganda uning elementlari xaotik tarzda parchalanadi, bu zerikarli ko'rinadi.

13. Bouncy Content Filter

Bouncy kontent filtri - mukammal yechim bu portfel uchun. Ushbu plagin foydalanuvchilarga tezda bir toifadan ikkinchisiga o'tish imkonini beradi.

14. Oddiy jQuery Slider

Oddiy jQuery Slider o'z nomiga mos keladi. Ushbu plagin o'z ichiga oladi JavaScript elementlari, HTML5 va CSS3. Namoyishda siz hech qanday matnga kirish imkoniga ega bo'lmaysiz, lekin agar siz bir nechta o'zgarishlar qilsangiz, vizual tarkibni qo'shishingiz mumkin.

15. Glide JS

Glide JS – oddiy, salqin va salqin jQuery slayderi. O'rnatish oson, lekin plagin juda ko'p joy egallamaydi.

16. Parallaks bilan to'liq ekranli drag-slayder

Tasvirlar va matnlarni ko'rsatish qobiliyatiga ega ushbu jozibali jQuery slayderi har qanday veb-saytga mos keladi. U muxlislarni engil parallaks effekti va matnning to'liq namoyishi bilan xursand qiladi.

Slayder ko'rinishida galereya rasmlari. Ushbu yakunlash uchun materialni tayyorlashni boshlaganimda, aniq materialda mavzuni qoldirib, ikkita nomuvofiqlik bo'ladi deb o'yladim. tasvir galereyalari dunyo kabi eski va allaqachon talabga ega. Ajablanarlisi shundaki, agar terining tirnash xususiyati bilan mening ko'z o'ngimda odob nima ekanligini bilish mumkin bo'lsa, chegara yo'q edi. Bu aloqaning natijasi ajoyib emas edi, lekin mening fikrimcha, nusxalar etarli bo'ladi. Ular orasida adaptiv ham bor galereya rasmlari shunday qilib men galereyalar.
Gapirishdan oldin, oldingi mavzuda men WordPress uchun bir nechta galereya plaginlarini to'pladim, shuning uchun WordPressda veb-saytingiz bo'lsa, menimcha, siz juda xursand bo'lasiz.

1. Galereyani birlashtiring

2. Eskiz karuseli bilan sezgir tasvirlar galereyasi

4. jQuery bilan to'liq sahifa tasvirlar galereyasi

5. jQuery bilan slayder galereyasi

6. Galereya

Listoppad 4, 2019 yil Post yangilandi

Yuriy Nimetz

Slayder yoqilgan toza CSS+ bonusli slayder

CSS slayderlari Javascript slayderlaridan ancha ustundir. Ushbu afzalliklardan biri tortishishning suyuqligidir. Katta o'lchamdagi slayderlar uchun tasvirlar nafaqat (turli ekranlar uchun optimallashtirish yo'q), balki skriptlarni yaratish uchun ham yaxshi soat sarflanadi. Ale u statti Siz sof CSS yordamida ko'proq slayderlar yaratasiz.

Saytdagi slayderlar haqida nimalarni bilaman:

1. CSS3 tasvir slayderi

Slaydlar, radio tugmalar bo'ylab harakatlanish uchun ishlatiladigan CSS slayderi. Ushbu radio tugmalar slayder ostida joylashgan. Radio tugmalaridan tashqari, navigatsiya chap va o'ng strelkalar yordamida ishlaydi. Bunga rioya qilish uchun, tasvirlar bir vaqtning o'zida qayta tasavvur qilinganligi sababli, psevdo-sinflar vikorizatsiya qilinadi: tekshiriladi.

2. Eskizlar bilan CSS3 slayderli displey

Oldingi CSS slayderiga qo'shimcha ravishda, bu erda pastki qismdagi radio tugmalar o'rniga barcha tasvirlarning kengaytirilgan eskizlari mavjud bo'lib, ular rasm galereyasi yaratilganda ham qo'lda sodir bo'ladi. Tasvirlar boshqa effekt bilan o'zgaradi: ular asta-sekin kattalashadi.

3. CSS bilan galereya

Va CSS-dagi bu eksa slayderi sotiladigan sahifalar uchun juda mos keladi. Qoidaga ko'ra, ko'plab veb-ishlab chiquvchilar ochilish sahifalarini ishlab chiqishda (sahifalarni sotish) eng boshida slayderni joylashtiradilar, shunda siz birinchi ekranda (aylanmasdan) ushbu sahifadagi hamma uchun mavjud bo'lgan barcha imtiyozlarni darhol olishingiz mumkin. . Bundan tashqari, bu slayder moslashuvchan, bu ham jim.

4. Hech qanday harakat qilmasdan CSS-da slayder

Men darhol ta'kidlashni istardimki, bu slayder g'alaba xabari emas! Orqa fonda, bosh tasviri (slayd) yonida yana 2 ta slaydni ko'rishingiz mumkin. Noxush hid o‘zgacha olib tashlandi. Slaydlarni o'zgartirish oddiy rejimda amalga oshiriladi: boshida ikkita slayd ochiladi va keyinchalik asosiy bo'ladigan slayd markazda joylashgan. Keyin slayd kattalashadi va boshqalarning oldiga qo'yiladi.

5. Javob beruvchi CSS3 slayderi

Boshqaruvlari radio tugmalariga asoslangan yana bir moslashuvchan slayder. Ushbu slayder qanday ko'rinishiga hayron bo'ling turli xil qo'shimcha binolar ah - Siz brauzer oynasini mustaqil ravishda o'zgartirishingiz mumkin yoki slayderning yon tomonida kompyuter, planshet yoki smartfonda slayderni qanday ko'rishingizni bosadigan turli xil qurilmalarning maxsus belgilari mavjud.

***BONUS Slayder***

Yuqorida keltirilgan barcha slayderlarga qo'shimcha ravishda, men sizni yana bittasi bilan xursand qilmoqchiman. Ushbu slayder tasvirlar galereyasini yaratish uchun juda mos keladi. Agar nima qilish kerakligini so'z bilan tushuntira olmasangiz, videodagi hamma narsani hayratda qoldirgan ma'qul:

Visnovok

Slayderlar yordamida siz tasvir galereyalarini chiroyli tarzda loyihalashingiz, ularni yanada ixchamroq joylashtirishingiz, slayderni sotayotgan sahifangizning birinchi ekraniga (sahifaning aylantirmasdan ko'rish mumkin bo'lgan qismi) joylashtirishingiz va darhol asosiyni ko'rsatishingiz mumkin. olib qo'yilgan foyda. Slayderlarni muzlatishning ko'plab usullarini topishingiz mumkin, ammo bir narsa aniq - ular to'g'ri ishlatilganda hidlanadi.

Statistik ma'lumotlar tomonidan tekshirilgan ballar.

Moslashuvchan yoki agar xohlasangiz, sezgir veb-dizayn nafaqat zamonaviy dizayn tendentsiyasi, balki veb-saytlarning ko'p qirraliligini, turli xil iste'molchi qurilmalari ekranlarida uyg'un vizual uyg'unlikni ta'minlaydigan veb-saytlarni ishlab chiqish standartidir. Yaqinda, rivojlanish davrida moslashuvchan shablon, Men ushbu va boshqa slayderlar va tasvir galereyalarini asl dizayn uslubini buzmasdan birlashtirishning turli qiyinchiliklariga duch keldim. Endi hamma narsa ancha sodda, hech bo'lmaganda bittasi juda ko'p sonli tayyor echimlarni tushunadi va ularning ko'pchiligini maxfiy chiqish kodi bilan erkin foydalanishni ta'minlash ayniqsa muhimdir.

Taqdim etilgan vositalarning xilma-xilligi tufayli men har doim paydo bo'ladigan va hamma joyda hech qanday chegaralarsiz ko'rsatiladigan tasvirlarni ko'rsatish uchun moslashtirilgan jQuery slayderlarining eng muhim ishlanmalariga qisqacha nazar tashladim. mutlaqo bepul.

WOW slayder

Moslashuvchan jQuery slayderi ajoyib vizual effektlar to'plamiga (aylanishlar, voleybollar, spredlar, spirallar, panjurlar va boshqalar) ega va benuqson tarzda namoyish etiladi. tayyor shablonlar. WOW Slider-ga o'rnatilgan yon panelni kiritish ustasi yordamida siz kasalliklarni davolash uchun osongina va osonlik bilan mo''jizaviy slayd-shoularni yaratishingiz mumkin. Chakana sotuvchining veb-saytida rus plaginini o'rnatish va ishlatish bo'yicha barcha kerakli hujjatlar, plaginning mo''jizaviy jonli ilovasi mavjud. Yuklab olish uchun ham mavjud Wordpress plagin Joomla uchun modul. Ushbu ajoyib slayder yangi boshlanuvchilar uchun ham, g'oyani o'ylab topgan veb ustalari uchun ham juda ko'p narsalarni taklif qilishi bilan tabriklaymiz.

HiSlider

HiSlider - HTML5, JQuery slayderi va rasm galereyasi, mutlaqo xarajatsiz plagin mashhur tizimlar ostida saytlarda maxsus dizayn uchun - WordPress, Joomla, Drupal. Ushbu oddiy, ammo funktsional vosita yordamida siz ko'p harakat qilmasdan saytlaringiz sahifalarida ajoyib slayd-shoularni, samarali taqdimotlarni va yangi yangiliklar e'lonlarini yaratishingiz mumkin. Slayder uchun o'nlab tayyor shablon va terilar, jozibali o'tish effektlari (o'zgarishlar), turli multimedia kontentlarini ko'rsatish: , YouTube va Vimeo-dan videolar, quyonlar sozlash koristuvach va boshqalar...

Nivo slayder

Nivo Slider - bu yaxshi eski, uni hamma biladiganlar yaxshi biladi, tarixdagi eng chiroyli va eng oddiy tasvir slayderlaridan biri. JQuery Nivo Slider plagini MIT litsenziyasi ostida kengaytirilgan foydalanish va yanada rivojlantirish uchun bepul. Bu, shuningdek, WordPress uchun ajoyib plagin, lekin afsuski, u ham to'lanadi va bitta litsenziya uchun 29 dollar turadi. Eng yaxshi narsa WP fayllari bilan biroz vaqt o'tkazish va Nivo Slider plaginining bepul jQuery versiyasini blogingizga biriktirish, shuning uchun siz etarli ma'lumot olishingiz mumkin.
Funktsionallikka kelsak, hamma narsa tartibda. Ish uchun biz jQuery v1.7+ kutubxonasidan, ajoyib o'tish effektlaridan, oddiy va oson sozlashlardan, moslashtirilgan tartib, avtomatik tasvirni kesish va boshqalardan foydalanamiz.

Slayder g'oyasi Vistavi uslubini yaxshi biladigan chakana sotuvchilardan ilhomlangan. Apple mahsulotlari, oddiy animatsiya effekti bilan tanlangan toifani bosish orqali bir qator kichik ob'ektlar o'zgaradi. Codrops sizga slayderni qanday yaratish bo'yicha hisobotni, HTML tartibining yangi tartibini, CSS qoidalari to'plamini va jQuery-ni o'zgartiruvchi plaginni, shuningdek, maxsus slayderning ajoyib jonli misolini taqdim etadi.

Slit Slayder

To'liq ekranli slayder JQuery va CSS3 + hisobot vositasi yordamida sayt tomonida plagin integratsiyasi bilan ko'rsatiladi. G'oya, keyingi yoki oldingi joyga o'tishdan oldin ochiq oqim slaydni oldingi tarkib bilan kesishdir. JQuery yordam uchun CSS animatsiyalari Slaydlar o'rtasida noyob o'tishlarni yaratishingiz mumkin. Moslashuvchan slayder tartibi uning ekranlarda yaxshi ko'rinishini ta'minlaydi turli xil turlari Koristuvalnitskiy qo'shimcha binolari.

Elastik kontent slayderi

Slayder mavjud bo'lib, u kengaytirilgan idishning o'lchamlariga ko'ra avtomatik ravishda kenglik va balandlikni moslashtiradi. JQuery-da ishlaydigan oddiy va moslashtirilgan slayderni qo'shing, pastki qismida navigatsiya bilan, ekran o'lchamini o'zgartirganingizda, navigatsiya piktogramma shaklida ko'rsatiladi. Hujjatlar juda ma'lumotli (yaratish darsi) va vikoristanning jonli qo'llanilishi.

3D Stack Slayder

Slayderning eksperimental versiyasi 3D tekisligidan o'tishlari bilan tasvirlarni namoyish etadi. Rasmlar ikkita gorizontal ustunga bo'lingan; navigatsiya strelkalari yordamida siz teri tasvirini bir ko'rinishdan ikkinchisiga o'zgartirishingiz va ko'chirishingiz mumkin. Bunda alohida narsa yo'q, lekin sharbatni olish uchun Vikonannyaning o'zi g'oyasi va texnikasi.

Juda oddiy, 100% sezgir va to'liq ekranli jQuery tasvir slayderi. Slayderning ishi jQuery sehri bilan bog'liq holda CSS o'tishlariga (o'tish kuchi) asoslangan. Maksimal kenglik qiymati 100% ga o'rnatiladi, shuning uchun rasmlarning o'lchami ekran o'lchamidagi o'zgarishlarga qarab o'zgaradi. Dizaynda maxsus animatsiya effektlari mavjud emas, hamma narsa oddiy va uzluksiz ishlash uchun mo'ljallangan.

Minimal slaydlar

Ism o'z-o'zidan tushunarli, ehtimol bu jQuery tasvir slayderlarining eng engil va minimalistlaridan biri (1kb plagin). ResponsiveSlides.js- konteyner o'rtasida slayd-shou, vizual elementlarni yaratadigan kichik JQuery plagini. Keng ko'lamli brauzerlar, shu jumladan IE ning barcha versiyalari bilan ishlaydi - IE6 va undan tashqarida mashhur taraqqiyot galasi. Robot ishonch hosil qilish uchun JavaScript bilan birgalikda CSS3 o'tishlarini ishlatadi. Tartibga solinmagan roʻyxatni osongina saralang, oʻtish va vaqt oraligʻini sozlang, slaydlarni avtomatik va qoʻlda almashtiring va bir vaqtning oʻzida bir nechta slayd-shoularni qoʻllab-quvvatlang. Aks - shvidky "malyuk" o'qi.

Kamera

Kamera xarajatsiz jQuery veb-sayt sahifalarida slayd-shoularni tashkil qilish uchun plagin, nolga o'tish effektlari bilan engil slayder, 100% moslashuvchan tartib va ​​hatto oddiyroq sozlashlar. U har qanday kompyuter qurilmalari (kompyuter monitorlari, planshetlar, smartfonlar va boshqalar) ekranlariga ajoyib tarzda joylashadi. mobil telefonlar). Yuklab olingan videoni namoyish qilish imkoniyati. Slaydlarni avtomatik ravishda o'zgartirish va qo'shimcha tugmachalarni qo'lda ishlatish va tasvir eskizlari bloki. Bundan tashqari, ixcham vikondan olingan rasmlarning to'liq galereyasi mavjud.

bxSlider jQuery

jQuery'dagi yana bir oddiy moslashuvchan slayder. Slaydlar har qanday tarkib, video, rasm, matn va boshqa elementlarni o'z ichiga olishi mumkin. Kengaytirilgan qo'llab-quvvatlash sensorli ekranlar. Vikoristannaya CSS o'tish animatsiyalar. Slayd-shou va ixcham tasvir galereyalari taqdimotida juda ko'p turli xil variantlar mavjud. Avtomatik va qo'lda boshqarish. Qo'shimcha tugmalar yordamida slaydlarni aralashtirish va eskizlarni tanlash. Chiqish faylining kichik hajmi, sozlash va amalga oshirish uchun yanada sodda.

FlexSlider 2

FlexSlider 2 Yangilangan versiya javob tezligini oshirish, skriptni minimallashtirish va qayta tuzish/qayta bo'yashni minimal darajaga qisqartirish bilan bitta nomli slayder. Plagin asosiy slayderni, qo'shimcha eskizlar uchun slaydni boshqarishni boshqarishni, chapdan o'ngga o'qlarni va tugmalar ko'rinishidagi pastki navigatsiya panelini o'z ichiga oladi. Videoni slaydlarda (vimeo) ko'rsatish imkoniyati, parametrlarni moslashuvchan sozlash (o'tishlar, dizayn, soat oralig'i), to'liq moslashtirilgan tartib.

Galleriya

Yuqori sifatli galereyalar va tasvir slayderlarini yaratish uchun mashhur, moslashuvchan jQuery plaginiga xush kelibsiz. Slayder interfeysi butunlay original video pleerni vizual tarzda eslatadi va plagin bir qator turli dizayn mavzularini o'z ichiga oladi. Mashhur xizmatlardan yuklab olingan video va rasmlarni qo'llab-quvvatlash: Flickr, Vimeo, YouTube va boshqalar. Sozlash va wiki-dan batafsil hujjatlar.

Buta mevasi

Maxsus sezgir veb-dizayn uchun yozilgan oddiy, hech qanday xarajatsiz JQuery tasvir slayderi. Blueberry yopiq manba kodi bilan eksperimental JQuery plaginidir. Minimalistik dizayn, hech qanday effekt yo'q, shunchaki qisqa vaqt ichida birin-ketin o'zgartirilishi mumkin bo'lgan silliq birlashtirilgan rasmlar. Hammasi juda oddiy: o'rnating, ulang va o'ting.

jQuery popeye 2.1

Lightbox elementlari bilan ko'rsatilgan juda ixcham jQuery slayderi. Kichkina o'lchami tufayli uni istalgan konteynerga, eskizlar ko'rinishidagi bitta yozuvga joylashtirish juda oson, kursorni sichqoncha ustiga olib borganingizda yoki ustiga bosganingizda, layt qutisi kattaroq rasm va elementlar bilan faollashadi. Nya tomonidan nazorat qilinadi. Mahsulotlarni taqdim etish va yangi mahsulotlarni e'lon qilish uchun bunday slayderni boshqa panellarga joylashtirish oson. Ko'p ma'lumotga ega saytlar uchun ajoyib yechim.

Ketma-ketlik

Kengaytirilgan CSS3 o'tishlari bilan bepul moslashuvchan slayder. Minimalist uslub, 3 ta dizayn mavzusi, Teri ramkasi gorizontal holatda, markazda paydo bo'ladi, rasm chapga, sarlavha o'ngga, miniatyuralar pastki o'ng burchakda takrorlanadi. Terida ko'rish uchun yon tomondan mahsulotlarning ko'rinishi. Boshqaruv, shuningdek, orqaga va oldinga tugmalarini o'z ichiga oladi. Hamma narsa uchun qo'llab-quvvatlash joriy brauzerlar.

Suring

Funktsionallik va sozlamalarga ega bo'lgan juda oddiy rasm slayderi, slaydlarni o'zgartirish tezligidagi o'zgarishlar mavjudligini sozlash, qo'lda rejimga ulanish (boshqarish tugmalari faollashtirilgan), uzluksiz slayd-shou. Ushbu slayder bo'lish huquqiga ega bo'lishi mumkin va undan kamroq foyda ko'rishi mumkin, chunki bu tadqiqotda ayniqsa foydali hech narsa olmagan, ehtimol bu yomon hazildir)))

Tasvirga sezgir slayder

Volodimir Kudinov va uning hamkasblaridan bunday ajoyib, moslashuvchan tasvir slayderi. Yaxshi, yaxshi saqlangan asbob, umid qilinmoqda dumba bilanі hisobot berish bo'yicha ko'rsatmalar zí yaratish, o'rnatish va vikoristannya. Moslashuvchan dizayn, yoqimli tugmalar va yashil o'qlar, hamma narsa yaxshi va xotirjam ishlaydi, bosimsiz.

FractionSlider

Tasvirlar va matnli slaydlar uchun parallaks effektli bepul jQuery slider plagini. Slaydlar animatsiyasi soat va animatsiyaning teri parametrlarini to'liq nazorat qilish bilan displey qiymatini oshiradi. Slaydda bir nechta elementlar uchun animatsiya qilish imkoniyati. Siz turli xil animatsiya usullarini o'rnatishingiz, slaydlar yaratishingiz yoki to'g'ridan-to'g'ri qo'shiqdan o'tishingiz mumkin. Avtomatik displey va qo'shimcha navigatsiya strelkalarini qo'lda navigatsiya qilish, bu tasvir ustiga surilganda birlashadi. 10 turdagi animatsiya effektlari, slaydlar va boshqalar.

Dunyo bo'ylab qarash juda boy, ammo ko'rib chiqiladigan mahsulotlarning ko'pligi tufayli unchalik ma'lumotga ega emas. Barcha tafsilotlar va batafsil tavsiflar funktsional imkoniyatlar Siz u yoki bu plaginni to'g'ridan-to'g'ri sotuvchining sahifalarida topishingiz mumkin. Hech kim o'z veb-saytlari sahifalarida rangli tasvir slayderlarini yaratish uchun juda kerakli vositani qidirayotganini bilmayman.

Agar biz bu haqda o'ylasak, ruslashtirilgan shablonlar bilan ishlash biz uchun yomon bo'larmidi? Bir zum o'ylab ko'ring. Men ingliz tilidagi shablonlar bilan bir soat ishladim. Endi uni TemplateMonster bozorida topishingiz mumkinligi bilan sizni xursand qilishga shoshilamiz. Ularning har biri uchun matn qo'lda yozilgan. Va, albatta, barcha tayyor echimlar vikoristan uchun juda oddiy.

Hurmat bilan Andrey

1. Ajoyib jQuery slayd-shousi

JQuery texnologiyasidan foydalangan holda ajoyib slayd-shou.

2. jQuery plagini "Scale Carousel"

jQuery yordamida masshtablangan slayd-shou. Slayd-shou uchun o'lchamlarni o'zingizga mos ravishda o'rnatishingiz mumkin.

3. jQuery plagini "slideJS"

Matn tavsifi bilan slayder displey.

4. “JSliderNews” plagini

5. CSS3 jQuery slayderi

Kursorni navigatsiya strelkalari ustiga olib borganingizda, keyingi slaydning dumaloq eskizi paydo bo'ladi.

6. Yaxshi jQuery "Taqdimot sikli" slayderi

Rasm mavjudligi ko'rsatkichi bilan jQuery slayderi. Slaydlarni avtomatik o'zgartirish o'tkazildi.

7. jQuery plagini “Parallax Slider”

Fonda volumetrik effektli slayder. Ushbu slayderning tayog'i bir nechta to'plardan tashkil topgan fonga joylashtiriladi, ularning har biri o'zgaruvchan suyuqlik bilan aylanadi. Natijada volumetrik effektga taqlid qilinadi. Bu juda chiroyli ko'rinadi, uni o'zingiz ham aylantira olasiz. Effekt Opera kabi brauzerlarda yanada yumshoqroq ko'rinadi, Gugl xrom,IE.

8. Yangi, engil jQuery slayderi "bxSlider 3.0"

"Misollar" bo'limidagi demo sahifasida siz hamma narsa uchun ko'rsatmalarni topishingiz mumkin Mumkin variantlar Ushbu plaginning Vikoristan.

9. jQuery tasvir slayderi, plagin "slideJS"

Loyihangizni chindan ham yoritadigan zamonaviy jQuery slayderi.

10. jQuery slayd-shou plagini “Easy Slides” v1.1

Slayd-shou yaratish uchun oddiy jQuery plagini.

11. “jQuery Slidy” plagini

Turli ilovalar uchun engil jQuery plagini. Slaydlarni avtomatik o'zgartirish o'tkazildi.

12. Slaydni avtomatik o'zgartirishga ega jQuery CSS galereyasi

"Oldinga" yoki "Orqaga" strelkalarini bosmasangiz, galereya avtomatik ravishda aylanadi.

13. jQuery slayderi "Nivo Slider"

To'g'ri kodga ega juda professional, aniq, engil plagin. O'zgaruvchan slaydlarning ko'plab turli effektlari uzatildi.

14. jQuery slayderi "MobilySlider"

Yangi slayder. Turli effektlarga ega jQuery slayder, tasvirni o'zgartiring.

15. jQuery plagini “Slider²”

Slaydni avtomatik o'zgartirishga ega engil slayder.

16. Yangi javascript slayderi

Ko'rsatish uchun slayderni avtomatik ravishda o'zgartiring.

Slaydlarni avtomatik almashtirish bilan slayd-shoularni amalga oshirish uchun plagin. Siz qo'shimcha eskiz rasmlarini ko'rsatishni boshqarishingiz mumkin.

jQuery CSS Slayder NivoSlider plagini yordamida ko'rsatiladi.

19. jQuery slayderi “jShowOff”

Birgalikda aylanish uchun plagin. Uchta navigatsiya opsiyasi: navigatsiyasiz (slayd-shou formatini avtomatik o'zgartirish bilan), tugma ko'rinishida navigatsiya, tasvir eskizi ko'rinishida navigatsiya.

20. "Shutter Effect Portfolio" plagini

Fotosuratchi portfelini loyihalash uchun yangi jQuery plagini. Galereya tasvirni o'zgartirishning oddiy effektini amalga oshirdi. Fotosuratlar birma-bir o'zgarib, linzalarni yopishga o'xshash effekt beradi.

21. Engil javascript CSS slayderi "TinySlider 2"

Rasm slayderini amalga oshirish javascript va CSS-dan foydalanadi.

22. “Tinycircleslider” til slayderi

Zamonaviy dumaloq slayder. Tasvirlar orasidagi o'tish yurak qoziqlariga o'xshash doirani qoziq bo'ylab sudrab borish orqali amalga oshiriladi. Dizaynda yumaloq elementlardan foydalansangiz, u veb-saytingizga juda mos tushadi.

23. jQuery yordamida tasvir slayderi

Yengil slayder "Slider to'plami". Turli xil Vikonanni uchun slayderni ko'rish: vertikal va gorizontal. Shuningdek, amalga oshirildi turli qarashlar Tasvirlar o'rtasida navigatsiya: "Oldinga" va "Orqaga" tugmalari yordamida, sichqonchaning g'ildiragidan foydalanib, slaydni sichqonchani bosish orqali.

24. "Slayder to'plami" miniatyura galereyasi

"Slayder to'plami" galereyasi. Eskizlarni aylantirish ham vertikal, ham gorizontal ishlaydi. Sichqoncha g'ildiragidan foydalanib, sichqonchani bosish yoki kursorni eskiz ustiga olib borish orqali tasvirlar o'rtasida harakat qilishingiz mumkin.

25. "Slider Kit" o'rniga jQuery slayderi

JQuery yordamida vertikal va gorizontal kontent slayderi.

26. jQuery slayd-shou "Slider to'plami"

Slaydni avtomatik almashtirish bilan slayd-shou.

27. Engil professional javascript CSS3 slayderi

2011-yilda yaratilgan jQuery va CSS3-ga asoslangan toza slayder.

Eskizlar bilan jQuery slayd-shousi.

29. jQuery slayd-shoularini oson qiling

Navigatsiya tugmalari bilan slayd-shou.

30. Neumovirn slayd-shou jQuery “Skitter”

JQuery plagini "Skitter" ajoyib slayd-shou yaratish uchun. Tasvirlarni o'zgartirishda plagin turli animatsiya effektlarining 22 (!) turini qo'llab-quvvatlaydi. Slaydlar bo'ylab harakatlanish uchun ikkita variantdan foydalanishingiz mumkin: qo'shimcha slayd raqamlaridan foydalanish va qo'shimcha eskizlardan foydalanish. Namoyishda hayratga tushish oson, bu juda aniq kashfiyot. Ko'rib chiqiladigan texnologiyalar: CSS, HTML, jQuery, PHP.

31. "Noqulay" slayd-shou

Funktsional slayd-shou. Slaydlar quyidagicha ko'rinishi mumkin: oddiy tasvirlar, sarlavhali rasmlar, maslahatlar bilan tasvirlar, videolar. Navigatsiya qilish uchun siz slayd raqamlaridagi strelkalar va klaviaturadagi o'ng/chap qo'l tugmalaridan foydalanishingiz mumkin. Slayd-shou bir nechta variantlarda taqdim etiladi: eskizli va eskizsiz. Barcha variantlarni ko'rib chiqish uchun Demo #1 - Demo #6 orqali o'ting va biz uni demo sahifasida hayvonga chiqaramiz.

Slayderning tasviri siz tasavvur qilganingizdek juda original dizaynga ega. Slaydni o'zgartirish animatsiyalangan. Siz strelkalar yordamida tasvirlar orasida harakat qilishingiz mumkin. Avtomatik o'zgartirish ham mavjud bo'lib, bu erda siz Play/To'xtatib turish tugmasi yordamida tugmani bosishingiz va ovozni ochishingiz mumkin.

JQuery slayderini animatsiya qilish. Brauzer oynasi o'lchamini o'zgartirganingizda fon rasmlari avtomatik ravishda o'zgaradi. Teri tasvirlari uchun tavsifga ega blok ko'rsatiladi.

34. jQuery va CSS3 yordamida "Flux Slider" slayderi

Yangi jQuery slayder. Slaydlarni almashtirishda bir qator ajoyib animatsion effektlar.

35. jQuery plagini “jSwitch”

JQuery animatsion galereyasi.

Slaydlarni avtomatik o'zgartirish bilan jQuery'da osonroq slayd-shou.

37. “SlideDeck 1.2.2” plaginining yangi versiyasi

Professional kontent slayderi. Slaydni avtomatik ravishda o'zgartirish imkoniyatlari, shuningdek slaydlar orasida harakat qilish uchun sichqoncha g'ildiragidan foydalanish imkoniyati mavjud.

38. jQuery slayderi “Sudo Slider”

jQuery yordamida engil tasvir slayderi. Amalga oshirishning ko'plab variantlari mavjud: tasvirni gorizontal va vertikal ravishda o'zgartirish, slayd raqami bo'yicha ko'rsatmalar bilan va sarlavhasiz, tasvirni o'zgartirishning turli effektlari. Ê funktsiyasi avtomatik o'zgartirish slaydlar. Amalga oshirish uchun dastur ko'rsatmalarini demo sahifasida topish mumkin.

39. jQuery CSS3 slayd-shousi

Eskizli slayd-shoular slaydni avtomatik o'zgartirish rejimini qo'llab-quvvatlaydi.

40. jQuery Flux Slider

Shaffof effektlar bilan slayderni ko'rsatish.

41. Oddiy jQuery slayderi

JQuery yordamida zamonaviy tasvir slayderi.