ko'rish uchun zarur bo'lgan minimal z-indeksini o'rnatish orqali:

Slayder (pozitsiya: nisbiy; z-indeks: 0;)

Hammasi shu, aslida. Qolgan narsa - elementlarimizni quyidagi CSS -kod bilan joylashtirish va biz xursand bo'lishimiz mumkin:

Slayder (pozitsiya: nisbiy; z-indeks: 0;) .slider kiritish (ko'rsatish: yo'q;) .slider yorlig'i (pastda: 10px; ko'rsatish: inline-blok; z-indeks: 2; kenglik: 26px; balandlik: 27px; fon: # f4f4f5; chegara: 1px qattiq # e6e6e6; chegara-pastki rang: #bfbfbf; chegara radiusi: 4 piksel; quti-soya: ichki 0 1 piksel 0 #ffffff, 0 1 piksel 2 piksel # 000000; matnni tekislash: markaz; kursor: ko'rsatgich; shrift: 14px / 27px arial, tahoma; rang: # 333;) .slider .selector_list (pozitsiya: mutlaq; pastki: 15 piksel; o'ng: 15 piksel; z-indeks: 11;) .slider .item (pozitsiya: nisbiy; kenglik: 100%;) .slider .item ~ .item (pozitsiya: mutlaq; yuqori: 0 piksel; chap: 0 piksel;)

Siz CSS3 -da Javascriptsiz shunday sezgir slayderga ega bo'lishingiz kerak.

Hozirgi vaqtda slayder - karusel - bu sizning biznesingiz uchun veb -sayt, portfel yoki boshqa manbalarga ega bo'lishingiz kerak. To'liq ekranli tasvir slayderlari bilan bir qatorda, gorizontal karusel slayderlari har qanday veb -dizaynga juda mos keladi.

Ba'zida slayder sayt sahifasining uchdan bir qismini egallashi kerak. Bu erda karusel slayder o'tish effektlari va sezgir tartiblar bilan ishlatiladi. Elektron tijorat saytlari karusel slayderidan foydalanib, bir nechta fotosuratlarni alohida xabarlar yoki sahifalarda namoyish etadi. Slayder kodi sizning xohishingizga ko'ra erkin ishlatilishi va o'zgartirilishi mumkin.

Foydalanish JQuery bilan HTML5 va CSS3, siz o'z sahifalaringizni o'ziga xos effektlar bilan ta'minlab, ularni yanada qiziqarli qilishingiz va tashrif buyuruvchilar e'tiborini saytning ma'lum bir maydoniga qaratishingiz mumkin.

Slick - zamonaviy slayder plagini - karusel

Silliq Bu bepul jquery plaginidir, uni ishlab chiquvchilar ularning echimlari slayderning barcha talablarini qondiradi deb da'vo qiladilar. Javob beradigan slayder- karusel "" da ishlashi mumkin. plitkalar"Mobil qurilmalar uchun va sudrab tashla"Ish stoli versiyasi uchun.

O'tish effektini o'z ichiga oladi " parchalanish", Qiziqarli imkoniyat" markaziy rejim», Avtomatik aylantirish bilan rasmlarni dangasa yuklash. Yangilangan funksiya slaydlar va slayd filtrini qo'shishni o'z ichiga oladi. Plaginni sizning talablaringizga muvofiq sozlashingiz uchun hamma narsa.

Owl Carousel 2.0 - jQuery - sensorli plagin

Bu plagin o'z arsenalida yangi boshlanuvchilar uchun ham, tajribali ishlab chiquvchilar uchun ham keng imkoniyatlarga ega. Bu karusel slayderining yangilangan versiyasi. Uning salafiga aynan shu nom berilgan.

Slayderda umumiy funktsiyani yaxshilash uchun o'rnatilgan plaginlar mavjud. Animatsiya, videoni ijro etish, slayderni avtomatik ijro etish, dangasa yuklanish, avtomatik balandlikni sozlash asosiy xususiyatdir.

Qo'llab -quvvatlash qobiliyatlari sudrab va tushirish plaginni mobil qurilmalarda qulayroq ishlatish uchun kiritilgan.
Plagin hatto mobil qurilmalarning kichik ekranlarida ham katta tasvirlarni ko'rsatish uchun juda mos keladi.

Sahifaga slayderni joylashtirishga imkon beradigan juda kichik, ammo juda boy funktsional jquery plagini - kichik yadroli va sayt resurslarini ko'p sarflamaydigan karusel. Plagin vertikal va gorizontal slayderlarni, animatsiyalarni ko'rsatish va galereyadan rasmlar to'plamini yaratish uchun ishlatilishi mumkin.

AnoSlide - jQuery uchun juda ixcham javob beradigan slayder

Ultra ixcham jQuery slayder- karusel, uning funksionalligi oddiy slaydernikidan ancha ko'p. U bitta tasvirni oldindan ko'rish, ko'p tasvirli karusel displeyi va sarlavhaga asoslangan slayderni o'z ichiga oladi.

Boyqush karuseli - Jquery slayder - karusel

- qo'llab -quvvatlanadigan slayder sensorli ekranlar va texnologiya sudrab tashla osonlik bilan birlashtiriladi Html- kod. Plagin - bu maxsus tayyorlangan belgisiz chiroyli karusellarni yaratishga imkon beruvchi eng yaxshi slayderlardan biri.

3D galereya - karusel

Foydalanadi 3D- asoslangan o'tish CSS- uslublar va ozgina Javascript kod

Ajoyib 3D karusel. Ko'rinib turibdiki, bu hali beta -versiya, chunki men hozir u bilan bir nechta muammolarni topdim. Agar siz o'z slayderlaringizni sinab ko'rish va yaratishga qiziqsangiz, bu karusel katta yordam beradi.

Bootstrap yordamida karusel

Ta'sirli slayder - bu sizning yangi veb -saytingizga mos keladigan texnologiyadan foydalangan holda karusel.

Bootstrap - Moving Box karusel slayder ramkasiga asoslangan

Portfel va biznes saytlarida eng ko'p so'raladi. Ushbu turdagi karusel slayderlari ko'pincha har qanday saytlarda uchraydi.

Bu kichkina slayder har qanday ekran o'lchamlari bo'lgan qurilmalarda ishlashga tayyor. Slayder dumaloq va karusel rejimlarida ishlashi mumkin. Kichkina doira boshqa turdagi slayderlarga muqobil sifatida taqdim etilgan. O'rnatilgan qo'llab-quvvatlash mavjud operatsion tizimlar IOS va Android.

Dumaloq rejimda slayder juda qiziqarli ko'rinadi. Usulni qo'llab -quvvatlash mukammal tarzda amalga oshiriladi sudrab tashla va avtomatik slaydni aylantirish tizimi.

Kuchli, sezgir, karusel slayder zamonaviy veb -sayt uchun juda mos keladi. Har qanday qurilmada to'g'ri ishlaydi. Gorizontal va vertikal rejimlar mavjud. Uning hajmi atigi 1 KB ga kamaytirilgan. Ultra ixcham plagin ham mukammal silliq o'tishga ega.

Voy - slayder - karusel

Veb -saytingiz uchun original slayderni yaratishga yordam beradigan 50 dan ortiq effektlarni o'z ichiga oladi.

Slayder qanday moslashishini ko'rish uchun brauzer oynasining o'lchamini o'zgartiring. Bxslider 50 dan ortiq sozlash variantlari bilan birga keladi va har xil o'tish effektlari bilan o'z xususiyatlarini namoyish etadi.

jCarousel - jQuery rasmlaringizni ko'rishni tashkil etishga yordam beradigan plagin. Siz misolda ko'rsatilgan bazadan osongina maxsus rasm karusellarini yaratishingiz mumkin. Slayder javob beradi va mobil platformalarda ishlash uchun optimallashtirilgan.

Scrollbox - jQuery plagini

O'tish qutisi slayderni yaratish uchun ixcham plagin - karusel yoki matnni aylantirish chizig'i. Asosiy xususiyatlar orasida sichqonchani to'xtatish bilan vertikal va gorizontal o'tish mavjud.

Oddiy slayder - karusel. Agar sizga tezkor plagin kerak bo'lsa, bu 100%bajaradi. Faqat slayderning ishlashi uchun zarur bo'lgan asosiy funktsiyalar bilan birga keladi.

Flexisel: javob beradigan jQuery slayder plagini - karusel

Yaratuvchilar eski maktab plaginidan ilhom olib, uning nusxasini mobil va planshetli qurilmalarda slayderning to'g'ri ishlashiga qaratdilar.

Mobil qurilmalarda ishlashda sezgir tartib brauzer oynasining o'lchamiga qarab farq qiladi. past va yuqori aniqlikdagi ekranlarda ishlash uchun juda moslashtirilgan.

Elastislid - sezgir slayder - karusel

Qurilmaning ekran o'lchamiga mukammal moslashadi. Siz ma'lum bir piksellar sonida ko'rsatiladigan rasmlarning minimal sonini belgilashingiz mumkin. Vertikal siljitish effekti bilan biriktirilgan o'rashdan foydalangan holda rasm galereyasi karusel slayder sifatida yaxshi ishlaydi.

Dan erkin tarqatiladigan slayder Woothemes... Bu eng yaxshi javob beradigan slayderlardan biri hisoblanadi. Plagin bir nechta shablonlarni o'z ichiga oladi va yangi foydalanuvchilar uchun ham, mutaxassislar uchun ham foydali bo'ladi.

Ajoyib karusel

Ajoyib karusel- sezgir tasvir slayderini yoqish jQuery... Kabi ko'plab saytlarni boshqarish tizimlarini qo'llab -quvvatlaydi WordPress, Drupal va Joomla... Qo'llab -quvvatlaydi Android va IOS va operatsion tizimlarning ish stoli versiyalari hech qanday muvofiqlik muammosiz. O'rnatilgan ajoyib karusel shablonlari slayderni vertikal, gorizontal va dumaloq rejimda ishlatishga imkon beradi.

Vaqt bir joyda turmaydi va u bilan birga taraqqiyot. Bu Internetning kengligiga ham ta'sir qildi. Siz allaqachon qanday o'zgarganini ko'rishingiz mumkin tashqi ko'rinish saytlar, sezgir dizayn ayniqsa mashhur. Va shu munosabat bilan bir nechta yangilar paydo bo'ldi. jquery uchun javob beradigan slayderlar, galereyalar, karusellar yoki shunga o'xshash plaginlar.
1. Javob beradigan gorizontal xabarlar slayder

O'rnatishning batafsil ko'rsatmalari bilan moslashuvchan gorizontal karusel. U oddiy uslubda qilingan, lekin siz xohlagan uslubda yasashingiz mumkin.

2. Glide.js saytidagi slayder

Ushbu slayder har qanday saytga mos keladi. Bu bilan Glide.js ishlatiladi ochiq manba... Slayder ranglarini osongina o'zgartirish mumkin.

3. Tiltli slayd -shou

Javob beradigan kontent slayder. Bu slayderning diqqatga sazovor joyi - tasvirlarning 3d effekti, shuningdek, tasodifiy tartibda tashqi ko'rinishning har xil animatsiyasi.

4. HTML5 tuvali yordamida slayder

Interaktiv zarralar bilan juda chiroyli va ta'sirli slayder. Bu HTML5 kanvas yordamida amalga oshiriladi,

5. "Tasvirlarni o'zgartirish" slayder.

Morfing effektli slayder (bir ob'ektdan ikkinchisiga silliq o'tish). Ushbu misolda slayder veb -ishlab chiqaruvchining portfeli yoki veb -studiyasi uchun portfel sifatida yaxshi ishlaydi.

6. Dumaloq slayder

Rasmni aylantirish effektiga ega aylana shaklidagi slayder.

7. Bulaniq fon slayder

Kommutatsiya va fonni xiralashtiruvchi moslashtiruvchi slayder.

8. Moslashuvchan moda slayder

Oddiy, engil va sezgir veb -sayt slayder.

9. Slicebox - jQuery 3D tasvir slayder(YANGILANGAN)

Tuzatishlar va yangi xususiyatlarga ega Slicebox slayderining yangilangan versiyasi.

10. Bepul animatsion javob beruvchi tasvirlar tarmog'i

JQuery plagini moslashuvchan tasvirlar tarmog'ini yaratadi, u turli animatsiyalar va vaqtlardan foydalangan holda rasmlarni almashtiradi. Bu saytdagi fon yoki dekorativ element sifatida yaxshi ishlashi mumkin, chunki biz yangi tasvirlarning ko'rinishini va ularning o'tishini sozlashimiz mumkin. Plagin bir nechta versiyalarda yaratilgan.

11. Flexslider

Universal bepul plagin saytingiz uchun. Ushbu plagin bir nechta slayder va karusel variantlari bilan birga keladi.

12. Foto ramka

Fotorama- bu universal plagin... U juda ko'p sozlamalarga ega, hamma narsa tez va oson ishlaydi, slaydlarni to'liq ekranda ko'rish imkoniyati mavjud. Slayderni belgilangan o'lchamda ham, sezgir holda ham, eskiz bilan ham, bo'lmasdan ham, dumaloq aylantirish bilan ham, bo'lmasdan ham va boshqalardan foydalanish mumkin.

P.S.Men slayderni bir necha marta qo'ydim va menimcha, bu eng yaxshilaridan biri

13. Bepul va sezgir 3D galereyali eskizli slayder.

Eksperimental galereya slayder 3DPanelLayout mash va qiziqarli animatsiya effektlari bilan.

14. CSS3 uchun slayder

Ta'sirli slayder CSS3 yordamida silliq kontent oqimi va engil animatsiya yordamida yaratilgan.

15. Vay Slayder

Vay slayder bu ajoyib tasvirlar slayderidir vizual effektlar.

17. Elastik

Slayd eskizlari bilan to'liq javob beradigan elastik slayder.

18. Yarim

Bu CSS3 animatsiyasidan foydalanadigan to'liq ekranli sezgir slayder. Slayder ikkita versiyada qilingan. animatsiya g'ayrioddiy va chiroyli.

19. Moslashtirilgan foto galereya plus

Yuklangan rasmlar bilan oddiy bepul slayder galereyasi.

20. WordPress uchun javob beradigan slayder

WP uchun javob beradigan bepul slayder.

21. Parallaks tarkibidagi slayder

Parallaks effektli slayder va har bir elementni boshqarish CSS yordamida 3.

22. Musiqani bog'laydigan slayder

Ochiq kodli JPlayer yordamida slayder. Bu slayder musiqiy taqdimotga o'xshaydi.

23. jmpress.js bilan slayder

Javob beradigan slayder jmpress.js -ga asoslangan va shuning uchun siz slaydlarda ba'zi ajoyib 3D effektlardan foydalanishga imkon beradi.

24. Tez suring slayd -shou

Tez slaydni almashtirish bilan slayd -shou. Slaydlar harakatlanishni yoqadi.

25. CSS3 bilan tasvir akkordeoni

CSS3 yordamida tasvirlar akkordeoni.

26. Sensorli optimallashtirilgan galereya plagini

Bu sensorli qurilmalar uchun optimallashtirilgan sezgir galereya.

27.3D galereyasi

3D devor galereyasi- 3D effekti ko'rinadigan Safari brauzeri uchun yaratilgan. Boshqa brauzerda ko'rilganda, funksionallik yaxshi bo'ladi, lekin 3D effekti ko'rinmaydi.

28. Pagination slayder

JQuery UI slayder bilan sezgir sahifalash slayder. g'oya oddiy navigatsiya kontseptsiyasidan foydalanishdir. Barcha rasmlarni orqaga qaytarish yoki slayd bilan siljitish mumkin.

29. JQuery bilan tasvirni montaj qilish

Ekranning kengligiga qarab tasvirlarning avtomatik joylashuvi. Portfel saytini ishlab chiqishda juda foydali narsa.

30.3D galereyasi

CSS3 va jQuery -dagi oddiy 3D dumaloq slayder.

31. To'liq ekran rejimi css3 va jQuery -da 3D effekti bilan

Chiroyli o'tish bilan to'liq ekranli slayder.

Agar siz saytingizga yuqori sifatli jQuery tasvir slayderini qo'shishingiz kerak bo'lsa, unda siz ushbu maqolada tavsifni topasiz. kerakli plaginlar... JQuery JavaScript -ni ishlashni ancha osonlashtirgan bo'lsa -da, bizga veb -dizayn jarayonini tezlashtirish uchun plaginlar kerak.

Biz ushbu plaginlarning ba'zilariga o'zgartirishlar kiritishimiz va saytimizning maqsadlariga mos keladigan yangi slayderlarni yaratishimiz mumkin.

Boshqa slayderlar uchun sarlavhalar, rasmlar qo'shish va slayder bilan birga keladigan slaydni o'zgartirish effektlarini tanlash kifoya. Bu plaginlarning barchasi batafsil hujjatlar bilan ta'minlangan, shuning uchun ularga yangi effektlar yoki xususiyatlarni qo'shish oson. Agar siz tajribali jQuery dasturchisi bo'lsangiz, siz hatto voqealarga asoslangan tetiklarni o'zgartirishingiz mumkin.

Veb -loyihalar uchun, agar siz plagin yoki skriptni qo'llasangiz, sezgir dizayn kabi so'nggi tendentsiyalar juda muhimdir. Bu elementlarning barchasi ushbu plaginlarning har birini juda moslashuvchan qiladi. 2014 yilda paydo bo'lgan hamma narsa ushbu ro'yxatga kiritilgan.

JQuery rasm slayderlari

Jssor javob beradigan slayder

Yaqinda men bu funktsional jQuery slayderini uchratdim va u o'z vazifasini juda yaxshi bajarayotganini o'z ko'zlarim bilan ko'rdim. U ochiq kodli slayder kodi orqali kengaytirilishi mumkin bo'lgan cheksiz imkoniyatlarga ega:

• Moslashuvchan dizayn;
• 15 dan ortiq sozlash variantlari;
• 15 dan ortiq tasvirni o'zgartirish effektlari;
• Rasm galereyasi, karusellar, to'liq ekran o'lchamlarini qo'llab -quvvatlash;
• Vertikal banner rotatori, slaydlar ro'yxati;
• Video qo'llab -quvvatlash.

Demo | Yuklab oling

PgwSlider - bu JQuery / Zepto -ga asoslangan sezgir slayder

Ushbu plaginning yagona maqsadi - rasmlarning slayd -shoularini ko'rsatish. Bu juda ixcham, chunki jQuery fayllari hajmi atigi 2,5 KB, bu esa yuklashni juda tezlashtiradi:

• Javob berish tartibi;
• SEO optimallashtirish;
• Turli xil brauzerlar tomonidan qo'llab -quvvatlanadi;
• Tasvirni oddiy almashtirish;
• Arxiv hajmi atigi 2,5 KB.

Demo | Yuklab oling

Jquery vertikal yangiliklar slayder

Chap tarafdagi postlar ro'yxati va o'ngdagi tasviri bo'lgan yangiliklar manbalari uchun mo'ljallangan moslashuvchan va foydali jQuery slayder:

• Moslashuvchan dizayn;
• Yangiliklarni almashtirish uchun vertikal ustun;
• Kengaytirilgan sarlavhalar.

Demo | Yuklab oling

Vallop slayder

Bu slayderda JQuery mavjud emas, lekin men uni tanishtirmoqchiman, chunki u juda ixcham va sahifalarni yuklash vaqtini sezilarli darajada qisqartirishi mumkin. Agar sizga yoqsa, menga xabar bering:

• Javob berish tartibi;
• Oddiy dizayn;
• Slaydlarni o'zgartirish uchun turli xil variantlar;
• JavaScript -ning minimal kodi;
• Hajmi atigi 3 KB.

Demo | Yuklab oling

Yassi uslubdagi Polaroid galereyasi

Hujjat uslubidagi moslashuvchan tartib va ​​chiroyli dizaynga ega galereya ko'pchiligingizni qiziqtirishi kerak. Planshetlar va katta displeylar uchun ko'proq mos keladi:

• Javob beradigan slayder;
• Tekis dizayn;
• Slaydlarning tasodifiy o'zgarishi;
• Manba kodiga to'liq kirish.

Demo | Yuklab oling

A-slayder

Demo | Yuklab oling

HiSlider - HTML5, jQuery va WordPress rasm slayderlari

HiSlider yangi bepul jQuery slayder plaginini taqdim etdi, uning yordamida siz ajoyib o'tishlar bilan turli xil rasm galereyalarini yaratishingiz mumkin:

• Javob beradigan slayder;
• Dasturlash bilimlari talab qilinmaydi;
• Bir nechta ajoyib shablonlar va terilar;
• Chiroyli o'tish effektlari;
• Turli platformalarni qo'llab -quvvatlash;
• WordPress, Joomla, Drupal bilan mos keladi;
• Tarkibni ko'rsatish qobiliyati har xil turlari: tasvirlar, YouTube video va Vimeo videolari;
• Moslashuvchan moslashuvchanlik;
• Foydali qo'shimcha funktsiyalar;
• Cheksiz kontent ko'rsatiladi.

Demo | Yuklab olish

Vay slayder

WOW Slider - bu javob beradigan jQuery slayder ajoyib vizual tasvirlar ( dominolar, burish, xiralashtirish, teskari aylantirish va miltillash, uchib ketish, ko'rlar) va professional shablonlar.

WOW Slider -ga o'rnatish ustasi keladi, bu sizga kodni o'tmasdan yoki rasmlarni tahrir qilmasdan bir necha soniya ichida ajoyib slayderlarni yaratishga imkon beradi. Joomla va WordPress uchun plagin versiyalari ham yuklab olish mumkin:

• To'liq javob berish
• Barcha brauzerlar va barcha turdagi qurilmalarni qo'llab -quvvatlash;
• Qo'llab -quvvatlash sensorli qurilmalar;
• WordPress -ga oson o'rnatish;
• Moslashtirishda moslashuvchanlik;
• SEO uchun optimallashtirilgan.

Demo | Yuklab olish

Nivo Slider - bu bepul jQuery plagini

Nivo Slider butun dunyoda eng chiroyli va ishlatish uchun qulay rasm slayder sifatida tanilgan. Nivo Slider plagini bepul va MIT litsenziyasi ostida chiqariladi:

• JQuery 1.7 yoki undan yuqori versiyasini talab qiladi;
• Chiroyli o'tish effektlari;
• Sozlash uchun oddiy va moslashuvchan;
• Ixcham va moslashuvchan;
• Ochiq manba;
• Kuchli va oddiy;
• Turli xil shablonlar;
• Avtomatik rasm kesish.

Demo | Yuklab olish

Texnik hujjatlar bilan oddiy jQuery slayder

Bu g'oya Apple -ning slayderlaridan ilhomlangan, unda bir nechta kichik elementlar har xil animatsion effektlar bilan chiqib ketishi mumkin. Ishlab chiquvchilar ushbu kontseptsiyani hisobga olgan holda amalga oshirishga harakat qilishdi minimal talablar"uchib ketish" elementlari turli toifalarni ifodalovchi onlayn -do'kon uchun oddiy dizayn yaratish.

• Javob berish tartibi;
• Minimalistik dizayn;
• Yiqilish va slaydlarni o'zgartirishning turli xil ta'siri.

Demo | Yuklab olish

To'liq o'lchamli jQuery tasvir slayder

Sahifa kengligining 100 foizini egallaydigan va mobil qurilmalar ekranlarining o'lchamiga moslashtiradigan juda oddiy slayder. Bu CSS o'tishlari bilan ishlaydi va tasvirlar langar bilan "yig'ilgan". Agar siz rasmga havola berishni xohlamasangiz, langarni almashtirish yoki olib tashlash mumkin.

O'rnatilganda, slayder ekran kengligining 100% gacha kengayadi. Bundan tashqari, u avtomatik ravishda slayd tasvirlarining hajmini kamaytirishi mumkin:

• JQuery javob beradigan slayder;
• To'liq o'lchamli;
• Minimalistik dizayn.

Demo | Yuklab olish

Elastik tarkibli slayder + qo'llanma

Elastik tarkibli slayder asosiy elementning o'lchamiga qarab kenglik va balandlikni avtomatik ravishda sozlaydi. Bu oddiy jQuery slayder. U tepada slayd maydonidan, pastda esa navigatsiya yorlig'i panelidan iborat. Slayder kengligi va balandligini ota -ona konteynerining o'lchamiga mos ravishda moslashtiradi.

Diagonal kichik ekranlarda ko'rilganda, navigatsiya yorliqlari kichik piktogrammalarga aylanadi:

• Moslashuvchan dizayn;
• Sichqonchani bosish orqali aylantirish.

Demo | Yuklab olish

Bepul 3D stack slayder

3D formatidagi tasvirlarni aylantiradigan eksperimental slayder. Ikkita qoziq qog'oz varaqlariga o'xshaydi, ularni aylantirish paytida tasvirlar slayder markazida ko'rsatiladi:

• Moslashuvchan dizayn;
• O'tkazish;
• 3D effektlar.

Demo | Yuklab olish

JQuery va CSS3 + qo'llanmasi bilan jihozlangan to'liq ekranli slayder

Bu darslik sizga burilish bilan slayderni qanday yaratishni ko'rsatib beradi: keyingi yoki oldingi tasvirni ochayotganda joriy slaydni kesish va ko'rsatish. JQuery va CSS animatsiyasidan foydalanib, biz noyob o'tish effektlarini yaratishimiz mumkin:

• Moslashuvchan dizayn;
• Split o'tish;
• To'liq ekranli slayder.

Demo | Yuklab olish

Unislider - bu juda kichik jQuery slayder

Keraksiz qo'ng'iroqlar va hushtak va belgilar yo'q, hajmi 3 KB dan kam. Slaydlar uchun har qanday HTMLdan foydalaning, uni CSS bilan kengaytiring. Unslider bilan bog'liq hamma narsa GitHub -da joylashgan:

• Turli xil brauzerlarni qo'llab -quvvatlash;
• Klaviaturani qo'llab -quvvatlash;
• Balandlikni sozlash;
• Moslashuvchan dizayn;
• Sensorli kirishni qo'llab -quvvatlash.

Demo | Yuklab oling

Minimal javob beradigan slaydlar

Oddiy va ixcham plagin ( hajmi faqat 1 Kb), bu konteyner ichidagi elementlardan foydalangan holda javob beradigan slayderni yaratadi. ResponsiveSLides.js bilan ishlaydi katta miqdor brauzerlar, shu jumladan IE6 va undan keyingi barcha IE versiyalari:

• To'liq javob berish
• Hajmi 1 KB;
• JavaScript orqali ishlash qobiliyatiga ega CSS3 o'tish;
• Belgilangan ro'yxat yordamida oddiy belgilash;
• O'tish effektlari va bitta slaydni ko'rish davomiyligini sozlash qobiliyati;
• Bir nechta slayd -shou yaratish qobiliyatini qo'llab -quvvatlaydi;
• Avtomatik va qo'lda aylantirish.

Demo | Yuklab olish

Kamera - bepul jQuery slayder

Kamera - bu ko'plab o'tish effektlari, sezgir joylashuvi bo'lgan plagin. O'rnatish oson, mobil qurilmalar tomonidan qo'llab -quvvatlanadi:

• To'liq javob beradigan dizayn
• Imzo;
• Video qo'shish qobiliyati;
• 33 xil rangdagi piktogramma.

Demo | Yuklab olish

SlidesJS, javob beradigan jQuery plagini

SlidesJS - bu sensorli va CSS3 -ga o'tishni qo'llab -quvvatlaydigan, javob beradigan jQuery plaginlari (1.7.1 va undan yuqori). Tajriba qiling, loyihangizga SlidesJS-ni qanday qo'shishni aniqlashga yordam beradigan ba'zi tayyor misollarni sinab ko'ring:

• Moslashuvchan dizayn;
• CSS3 -ga o'tish;
• Sensorli qurilmalarni qo'llab -quvvatlash;
• O'rnatish oson.

Demo | Yuklab oling

BX Jquery slayder

Bu bepul javob beradigan jQuery slayder:

• To'liq javob beradi - har qanday qurilmaga moslashadi;
• Slaydlarning gorizontal, vertikal o'zgarishi;
• Slaydlar rasm, video yoki HTML mazmunini o'z ichiga olishi mumkin;
• Sensorli qurilmalar uchun kengaytirilgan qo'llab -quvvatlash;
• Slayd animatsiyalari uchun CSS o'tishidan foydalanish ( apparat tezlashuvi);
• Callback API va to'liq ochiq usullar;
• Kichik fayl hajmi;
• Amalga oshirish oson.

Demo | Yuklab olish

FlexSlider 2

Eng yaxshi javob beradigan slayder. Yangi versiya ish tezligini, ixchamlikni oshirish uchun o'zgartirildi.

Demo | Yuklab oling

Galleria - JavaScript -ga asoslangan sezgir rasmlar galereyasi

Galleria millionlab saytlar tomonidan yuqori sifatli rasm galereyalarini yaratish uchun ishlatiladi. Uning ishi haqidagi ijobiy sharhlar soni jadvaldan tashqarida:

• To'liq bepul;
• To'liq ekran ko'rinishi;
• 100% javob beradi;
• Dasturlash tajribasi talab qilinmaydi;
• IPhone, iPad va boshqa sensorli qurilmalarni qo'llab -quvvatlash;
• Flickr, Vimeo, YouTube va boshqalar;
• Bir nechta mavzular.

Demo | Yuklab oling

Blueberry - bu oddiy javob beradigan jQuery tasvir slayderidir

Javobli veb -dizayn uchun maxsus yozilgan jQuery tasvir slayderini tanishtirish. Blueberry - bu ochiq manbali eksperimental tasvir slayder plagini manba kodi sezgir andozalar bilan ishlash uchun maxsus yozilgan.

Ushbu qo'llanmada biz oddiyni yaratamiz javob beradigan sahifa sarlavha bilan bezatilgan, unda tasvirlar o'ngdan chapga siljiydi. Bizning yechimimiz JavaScript -ni ishlatmaydi, slayd -shou ko'pchilik tomonidan qo'llab -quvvatlanadigan CSS3 animatsiyalariga asoslangan zamonaviy brauzerlar: Firefox 15+, Chrome 22+, Safari 5.1+, Opera 12.1+ va IE10.

1 -qadam - tayyorgarlik

Bizga 4 ta katta rasm kerak bo'ladi (bizning misolimizda o'lchami 1200 piksel x 390 piksel). Gorizontal slayder uchun biz Photoshop-da 4800 x 390 pikselli tasvirni tayyorlaymiz, barcha rasmlarimizni gorizontal ravishda birin-ketin joylashtiramiz va natijani veb-formatida saqlaymiz (" gorizontal slayder.jpg”).

2 -qadam - HTML

Biz aslida sarlavhamiz uchun fon-joylashuv xususiyatini jonlantiramiz. Sarlavhaning o'zi juda oddiy belgiga ega:

Batz bilan

Sahifaning to'liq kodi quyidagicha ko'rinadi:

Batz bilan

Qadam 3. Mobil qurilmalar uchun CSS

Biz mobil qurilmalar uchun uslublarni aniqlashni boshlaymiz. Keling, dizayn bazasini o'rnatamiz va keyin katta ekranlar uchun shablon kengaytmalarini qo'shamiz. Dars matnida faqat asosiy xususiyatlar berilgan, kodni to'liq manbada ko'rish mumkin:

Asosiy (kenglik: 90%; min-kenglik: 300 piksel; maksimal kenglik: 1200 piksel; chekka: 0 avtomatik; to'ldirish tepasi: 1em; rang: # 504331) sarlavha (matnni tekislash: markaz; pozitsiya: nisbiy;) h1 ( shrift o'lchami: 2.75em; fon: oq; displey: inline-blok; to'ldirish: 0 10 piksel; chekka-pastki: .25em;) h1: keyin (tarkib: ""; balandlik: 2 piksel; displey: blok; pozitsiya: mutlaq ; chap: 0; o'ng: 0; tepa: .5em; z-indeks: -1; chegara-tepa: 1px qattiq # 504331; chegara-pastki: 1px qattiq # 504331;). havolalar (fon: url (../) rasmlar / map.png) pastki markazda takrorlanmaydi; to'ldirish-pastki: 177 piksel;)

Qadam 4. Katta ekranlar uchun uslublar

Katta ekranli bo'limlarda .main va . ekran boshqacha ko'rsatilishi kerak. Bo'lim . havola kengligi 300 pikselni tashkil qiladi va o'ng yon panel va bo'lim sifatida joylashtiriladi .main chapda qoladi. Bo'limlarni ajratish uchun biz ikkita chiziq qo'shamiz. Ekranning kengligi 1024 pikseldan kattaroqligini aniqlash uchun @media so'rovidan foydalanamiz:

@media faqat ekran va (min-kengligi: 1024 piksel) (.mavzu (pozitsiya: nisbiy;). asosiy (chegara-o'ng: 320px; to'ldirish: .5em 20px .5em 0; / * ikki qatorli * / chegara-o'ng) : 1px qattiq # 504331; quti soyasi: 2 piksel 0 oq, 3 piksel 0 # 504331;). Havolalar (pozitsiya: mutlaq; o'ng: 0; tepa: 0; kenglik: 300 piksel; matnni tekislash: o'ng;))

5 -qadam: sarlavhali rasmlar

O'quv qo'llanmamizning asosiy qismi ustida ishlashni boshlaymiz: sarlavhadagi javob beradigan CSS slayder. Keling, avval javob berishga harakat qilaylik fon rasmi.

Sarlavha (fon: url (../ rasmlar / slayder-gorizontal.jpg) 0 pastki takrorlash-x; fon o'lchami: 400%; to'ldirish-pastki: 32,5%;)

Foiz sifatida ko'rsatilgan ikkita qiymatdan foydalanish (mulk uchun 400%) fon hajmi va pastki to'ldirish uchun 32,5%) ekran o'lchamidan qat'i nazar, sarlavha fon to'g'ri ko'rsatiladi.

Nega 400%? Bizda 4 ta slayd bor, shuning uchun u sarlavhada fon tasvirining 1/4 qismini ko'rsatadi. Ya'ni, fon hajmi sarlavhadan 4 barobar kengroq bo'lishi kerak.

Nima uchun 32,5%? Biz fonni sarlavhaning pastki qismiga joylashtiramiz. Fon tasvirining balandligi 390 piksel, individual slaydning kengligi 1200 piksel, 390/1200 = 0.325, ya'ni balandligi kenglikning 32,5%.

6 -qadam. Animatsiya

Biz mulkni jonlantiramiz fon pozitsiyasi... Ikkinchi tasvir xususiyatini ko'rsatish uchun fon pozitsiyasi muhim bo'lishi kerak 33.33333% pastda, uchinchi - 66,66667% pastda va to'rtinchisi 100% pastki... Birinchi rasm xususiyat qiymati bilan ko'rsatiladi fon pozitsiyasi teng 0 pastki yoki Pastki qismi 133.33333%(biz takrorlashni o'rnatamiz takrorlash-x).

Har bir tasvir 25% "shon -shuhrat" vaqtiga ega. Birinchisi 0 dan 25%gacha, ikkinchisi 25%dan 50%gacha, uchinchisi 50%dan 75%gacha, oxirgi 75%dan 100%gacha ko'rsatiladi. O'tishlarni tasvirning chiqish vaqtining 25% tugashidan oldin (5% qiymatidan foydalangan holda) rasm biroz siljiy boshlagani uchun o'rnatdik. Bu shunday ko'rinadi @keyframes:

@keyframes h_slide (0% (fon-pozitsiyasi: 0% past;) 20% (fon-pozitsiyasi: 0% pastki;) 25% (fon-pozitsiyasi: 33.33333% pastki;) 45% (fon-pozitsiyasi: 33.33333% past) ;) 50% (fon pozitsiyasi: 66.66667% past;) 70% (fon pozitsiyasi: 66.66667% past;) 75% (fon pozitsiyasi: 100% past;) 95% (fon pozitsiyasi: 100% past;) 100% (fon pozitsiyasi: pastda 133,33%;))

E'tibor bering, siz brauzer prefikslarini qo'shishingiz kerak: @ -webkit -keyframes (Chrome, Safari, iOS Safari, Android uchun) va @ -moz -keyrames (Firefox 15 uchun).

Quyida to'liq sarlavha kodi keltirilgan. Bizning "h_slide" animatsiyamiz har 24 soniyada (har bir slayd uchun 6 soniya) cheksiz tsiklda takrorlanadi. Vaqt funktsiyasi muhim yengillik shuning uchun o'tish oxirida har bir slayd sekinlashadi.

Sarlavha (matnni tekislash: o'rtada; pozitsiya: nisbiy; fon: url (../ tasvirlar / slayder-gorizontal.jpg) 0 pastki takrorlash-x; fon o'lchami: 400%; to'ldirish-pastki: 32,5%; -webkit- animatsiya: h_slide 24s cheksiz-cheksiz; -moz-animatsiya: h_slide 24s cheksiz-cheksiz; animatsiya: h_slide 24s osonlik-cheksiz cheksiz;)