JQuery slayderi javob beradi. Oddiy jQuery slayderini yaratish jQuery tasvir slayderi va tavsifi

Muallifdan: Veb-sahifalarning aylantirilmasdan ko'rinadigan qismining "o'limi" haqidagi mish-mishlarga qaramay, yaxshi slayderga bo'lgan ehtiyoj hech qaerda yo'qolmadi. Keling, bir soniya halol bo'laylik - slayderlar qiziqarli. Bundan tashqari, boshqa hech narsa, harakatlanuvchi tarkibdan farqli o'laroq, foydalanuvchida "voy" effektini keltirib chiqarmaydi. Barcha slayderlar bir-birini almashtiradigan bir nechta slaydlar to'plamidir va slayder kodining iloji boricha engil bo'lishi juda muhimdir. Bu erda jQuery yordam beradi.

Envato Market-dan 20 ta jQuery slayderlarini ko'rib chiqing va siz shunchaki slayder bloki emas, balki ko'proq slayderlar mavjudligini ko'rasiz.

1. RoyalSlider - jQuery bilan sensorli ekran tasvirlar galereyasi

Endi sensorli ekranga mos keladigan sezgir slayder avvalgidan ko'ra ko'proq narsani anglatadi. RoyalSlider ikkala xususiyatni birlashtiradi: moslashuvchanlik va sensorli ekranlar bilan ishlash. Galereya HTML5 va CSS3 da yozilgani uchun yaxshi tanlov.

Bir nechta qiziqarli xususiyatlar:

JavaScript. Tez boshlash

SEO optimallashtirish

Yuqori moslash qobiliyati

10 dan ortiq boshlang'ich shablonlari

CSS3 o'tishlari uchun zaxira mavjud

Menimcha, eng zo'r xususiyat "modulli skript arxitekturasi" dir, bu sizga asosiy JS faylidan keraksiz narsalarni o'chirib qo'yish va shu bilan og'irlikni kamaytirish imkonini beradi. RoyalSlider, jQuery sensorli ekranli tasvirlar galereyasi har qanday ishlab chiquvchi asboblar to‘plamida bo‘lishi kerak bo‘lgan mustahkam JavaScript slayderidir.

2. Slider Revolution Responsive jQuery plagini

Slayder bilan "inqilobiy" narsa qilish oson emas. Slayderlar haqida gap ketganda, siz ularga qo'shishingiz mumkin bo'lgan juda ko'p xususiyatlar mavjud. Biroq, Slider Revolution - bu juda yaxshi urinish. jQuery slayderlari orasida ushbu misol barcha mumkin bo'lgan talablaringizga javob beradi.

Slayder funktsiyalari ro'yxati juda uzun, shuning uchun men faqat eng yaxshilarini sanab o'taman:

Parallaks effekti va maxsus animatsiya

Cheksiz qatlamlar va havolalar bilan slaydlar

foydalanishga tayyor, chuqur sozlanishi uslublar

va boshqalar

Rasm, o'rnatilgan video pleer va ijtimoiy media havolalarini qo'shish qobiliyati Slider Revolution-ni Internetdagi eng moslashuvchan va sozlanishi variantlardan biriga aylantiradi.

3. LayerSlider Responsive jQuery slayder plagini

"LayerSlider Responsive jQuery Slider Plugin" sarlavhasi bu slayderga to'g'ri kelmaydi.
200 dan ortiq 2D va 3D slayd o'tishlari har qanday odamning boshini aylantiradi.

Bir nechta diqqatga sazovor xususiyatlar:

13 ta teri va 3 ta menyu turi

Ruxsat etilgan tasvirni slayderning tepasiga joylashtirish imkoniyati

Va jQuery zaxirasi

Va boshqalar

Oldingi slayderda bo'lgani kabi, deyarli har qanday tarkibni, hatto HTML5 rezident multimedia kontentini ham qo'shish mumkin. LayerSlider slayderlarni jonlantiradi va juda chiroyli.

4. jQuery Banner Rotator / Slayd-shou

jQuery Banner Rotator / Slideshow - bu juda oddiy slayder bo'lib, u asosiy funksiyalardan hech birini qurbon qilmaydi.

Imkoniyatlar:

Maslahatlar, matn qo'shimchalari va boshqalar.

Komponentlarni ko'rish uchun oldindan ko'rish va turli xil variantlar

Bitta slayder yoki hamma uchun kechikishli taymer

Barcha slaydlar uchun bir nechta o'tishlar yoki har biri uchun alohida o'tishlar

jQuery Banner Rotator / Slideshow boshqa jQuery slayderlariga nisbatan faqat asosiy xususiyatlarga ega, ammo bu haqda unutmaslik kerak.

5. All In One Slider - Responsive jQuery Slider plagini

Internetda paydo bo'ladigan har qanday slayder o'ziga xos ko'rinishga ega va o'z sohasidagi har qanday muammolarni hal qiladi. Lekin bu emas. All In One Sliderni "hammasini o'z ichiga olgan" deb atash mumkin.

O'ylaymanki, ko'pchilik veb-ishlab chiquvchilar va dizaynerlar tasdiqlangan echimga ega, lekin ular doimo yangi narsalarni qidiradilar. Va bu "yangi narsa" quyidagilarni o'z ichiga oladi:

Banner rotatori

oldindan ko'rish banneri

Pleylist banneri

Kontent slayderi

Karusel

Barcha slayder turlari jQuery slayderlari tomonidan talab qilinadigan funksiyalarning barchasini bo'lmasa ham, ko'pini qo'llab-quvvatlaydi. Hammasi bitta slayderda hammasi inklyuziv bo'ladimi?

6. UnoSlider - Sensorli ekranning sezgir slayderi

Agar slayderingiz sezgir bo'lmasa va sensorli ekranlarni qo'llab-quvvatlamasa, unda siz noto'g'ri slayderga egasiz. UnoSlider to'g'ri.

Ushbu slayder quyoshda soddalik va boy xususiyatlar to'plami o'rtasida o'z o'rnini topdi. Funktsiyalari:

Mavzuni qo'llab-quvvatlash

12 ta oldindan tayyorlangan mavzular

40 ta o'tish

IE6+ qo'llab-quvvatlash

Dizayn va uslubga e'tibor qaratilgan barcha xususiyatlar UnoSlider-ni mavzularni qo'shish qobiliyatiga ega ajoyib kontent slayderiga aylantiradi.

7. Master Slider - jQuery sensorli slayderi

"Hammasini boshqarish uchun bitta jQuery slayderini" qidiryapsizmi? Master Slider-ni sinab ko'ring - turli ekran o'lchamlari uchun jQuery sensorli ekranli slayder…

Yaxshi dizayn haqida gap ketganda, bu misol eng yaxshilaridan biri:

25 dan ortiq shablon

Uskuna tezlashtirilgan o'tishlar

Qo'llab-quvvatlashni bosing va suring

Va boshqalar

Interaktiv o'tishlar, animatsion qatlamlar va faol nuqtalar, albatta, sizning e'tiboringizni tortadi. Master Slider - bu san'at asari.

8. TouchCarousel - jQuery kontentini aylantiruvchi va slayder

TouchCarousel bepul qo'llab-quvvatlash va yangilanishlar bilan o'ziga jalb qiladi. Biroq, bu engil jQuery karusel slayderining barcha xususiyatlari emas.

Agar nomda "tegish" so'zi bo'lsa, slayder to'liq javob beradi va teginishni qo'llab-quvvatlaydi. Boshqa xususiyatlar:

SEO optimallashtirish

Aqlli avtomatik ijro

CSS3 apparat tezlashtirilgan o'tishlari

Moslashtirilgan foydalanuvchi interfeysi va Photoshop uchun 4 ta teri

TouchCarousel, noyob jismoniy slaydni aylantirish tufayli, mobil qurilmalarda tajribaning butunlay yangi darajasidir.

9. Advanced Slider - jQuery XML Slider

jQuery slayderlari nafaqat veb-saytlar uchun ishlatilishi mumkin. Ular veb-ilovalarda ham foydali bo'lishi mumkin. Advanced Slider buni amalga oshirishga imkon beradi.

HTML yoki XML belgilari bilan ushbu kengaytirilgan slayder doimiy taassurot qoldiradi:

Animatsiyalangan qatlamlar va aqlli video

100+ oʻtish va 150+ shaxsiy xususiyatlar

15 slayder terisi, 7 aylantirish paneli terisi va mahalliy yorug'lik qutisini qo'llab-quvvatlash

Klaviatura navigatsiyasi, sensorli yordam va to'liq moslashtirish

Va boshqalar

Biroq, eng yaxshi xususiyat Advanced Slider, jQuery XML Slider API bo'lib, slayderni veb-ilovangiz uchun mukammal tanlov qiladi.

10. jQuery Slider Kattalashtirish/Kichiklashtirish effekti to‘liq javob beradi

Uning xususiyatlari haqida o'qishni boshlashdan oldin demo tomosha qilishni xohlaydigan jQuery slayderlaridan biri. Siz shunchaki bu "kattalashtirish/kichraytirish effekti" nimani anglatishini tushunmoqchisiz.

Masshtablash effekti ancha zaif, lekin slayderning qolgan qismi statik boʻlsada, u boshqaruv hissi va tasvirga haqiqiy teginishni qoʻshadi. Slayder xususiyatlari:

CSS3 qatlam o'tishlari

Qatlamlar uchun animatsiyani tugatish opsiyasi

Ruxsat etilgan kenglik, toʻliq ekran va toʻliq kenglik parametrlari

HTML va CSS formatidagi animatsion matn

Aksariyat slayderlar imkon qadar ko'proq effektlarni to'plashga harakat qiladilar va jQuery Slider Kattalashtirish/Kichiktirish effekti To'liq javob berishda faqat Ken Burns effektiga ega, ammo u yaxshi amalga oshirilgan.

11. jQuery Carousel Evolution

Yuqorida aytib o'tilgan Advanced Slider - jQuery XML Slider singari, jQuery Carousel Evolution ham funksionallikni oshirish yoki slayderni boshqa loyihaga integratsiya qilish uchun ishlatilishi mumkin bo'lgan o'z API-ga ega.

JavaScript. Tez boshlash

Veb-ilovani yaratishning amaliy misoli bilan JavaScript asoslarini bilib oling

Tasvirlar, HTML belgilari, YouTube va Vimeo videolari bilan siz shuningdek:

SEO optimallashtirish

9 ta karusel uslubi

Soya va aks ettirish effektlari

Tasvir hajmini ham old, ham orqa tomondan sozlash mumkin

jQuery Carousel Evolution - bu juda ko'p foydalanishga ega oddiy karusel.

12 seksi slayder

Sexsi Slider avvalgidek sexy emas. Biroq, yoshi tufayli, bu slayder ishonchli.

Bir qarashda, slayder juda ta'sirli emas, lekin u yaxshi tuzilgan bo'lsa, u sizning dizayningizga juda mos keladi. Imkoniyatlar:

Slaydlarni avtomatik ijro etish

Rasm sarlavhalari

Slaydni uzluksiz ijro etish

6 ta o'tish effektlari

Sexsi Slider sizni o'zining to'liq quvvatini ochishingizni va uning salohiyatini ochishingizni kutmoqda.

13. jQuery Image & Content Scroller w/ Lightbox

Ushbu mobil qurilmalar uchun qulay dizaynlar va sensorli ekranni qo'llab-quvvatlagan holda, ish stoli haqida unutmagan jQuery slayderini ko'rish juda yoqimli.

jQuery Image & Content Scroller w/ Lightbox klaviatura kiritish va sichqoncha g'ildiragini qo'llab-quvvatlaydi, jumladan, boshqa xususiyatlar:

Gorizontal va vertikal yo'nalish

Slayder ichida yoki tashqarisida matn sarlavhalari

Bir vaqtning o'zida ko'rinadigan slaydlarning ma'lum sonini o'rnatish imkoniyati

Inline tasvirlar, Flash, iframe, Ajax va inline kontent

Slayderda o'rnatilgan yorug'lik qutisi ham mavjud. Majburiy emas, jQuery Image & Content Scroller w/ Lightbox-da siz slayderni o'zi ishga tushira olmaysiz, lekin yorug'lik qutisini alohida ishga tushiring.

14. Shaffof - Ta'sirchan Banner Rotator / Slayder

Ko'pgina jQuery slayderlari o'z dizayniga ega. Siz uni o'zingiz uchun sozlashingiz mumkin, lekin ba'zida hamma narsa slayder ichida bo'lishini xohlaysiz. Sizning e'tiboringiz Translucent tomonidan taqdim etiladi.

Slayderda juda ko'p oldindan sozlamalar mavjud. Siz shunchaki ma'lum sozlamalarni o'rnatishingiz kerak bo'lishi mumkin va hammasi shu. Imkoniyatlar:

6 xil uslub

4 ta o'tish effektlari

2 marta surish

Moslashuvchan tugmalar va teglar

Boshqalar singari, bu slayder sensorli, sezgir va apparat tezlashtirilgan. Shaffof - bu kontentning o'zini birinchi o'ringa qo'yadigan minimal dizaynga ega slayder.

15. FSS - To'liq ekranli toymasin veb-sayt plagini

Slaydlar bilan to'liq ekranli sayt yaratmoqchimisiz? Keyin sizga FSS kerak.

Aslida, ushbu jQuery slayderidan foydalanib, to'liq ekranli slayder saytini yaratish juda oson. Imkoniyatlar:

AJAX-ni qo'llab-quvvatlash

O‘tkazish paneli

Chuqur ulanish texnologiyasini qo'llab-quvvatlash

2 xil o'tish effektlari

Shuningdek, klaviaturani qo'llab-quvvatlash va 11 sahifalik qo'llanmaga e'tibor qaratish lozim. Biroq, haqiqiy taassurot FSS ning og'irligi, faqat 5Kb.

16. Zozo Accordion - Sensorli ekranli slayder

Ishni yaxshi bajaradigan uslubga yo'naltirilgan jQuery slayderining yana bir misoli. Zozo Akkordeon - uslublarni o'zgartirish qobiliyatiga ega yaxshi akkordeon slayderini izlayotgan har bir kishi uchun majburiydir.

Ushbu CSS3 animatsion go'zalligi ham juda keng imkoniyatlarga ega:

Gorizontal va vertikal akkordeon

Semantik HTML5 va SEO optimallashtirish

Sensorli, klaviatura va WAI-ARIA-ni qo'llab-quvvatlash

10 dan ortiq teri va 6 maket

Va boshqalar

Zozo Accordion bepul qo'llab-quvvatlash va doimiy yangilanishlarga ega, shuningdek jQuery akkordeonida ko'rishni istagan barcha xususiyatlarga ega.

17.jQuery javob beruvchi OneByOne Slider plagini

jQuery Responsive OneByOne Slider plagini slayderdan ko'ra oddiy animatsiyaga o'xshaydi. Bir vaqtning o'zida bitta slaydni ko'rsatish o'rniga, bu misol keyingi slaydga o'tishdan oldin hududda joy qolmaguncha ekranni asta-sekin slaydlar bilan to'ldiradi.

CSS3 animatsiyasi Animate.css ichida ishlaydi, u engil, bir nechta qatlamlarga ega va mobil uchun qulay. Bir nechta xususiyatlar:

Navigatsiyani sudrab olib tashlash imkoniyati ham mavjud. jQuery Responsive OneByOne Slider plagini Twitter Bootstrap karuseli tomonidan quvvatlanadi.

18. Accordionza - jQuery plagini

Bundan osonroq jQuery slayderi yo'q. Ishlash uchun atigi 3 Kb slayder kerak bo'lib, Accordionza akkordeon turidagi eng engil slayderga aylanadi.

Agar sizga uchta uslub opsiyasi yoqmasa, HTML va CSS-ni o'zingiz sozlashingiz mumkin. Imkoniyatlar:

Klaviatura navigatsiyasi

Effekt va tugmalarni sozlash oson

Progressiv takomillashtirish texnikasi - JavaScriptsiz ishlaydi

Yodda tutingki, Accordionza aralash tarkibning ko'p variantlarini ko'rsatishi mumkin, bu esa uni juda moslashuvchan qiladi.

19. mightySlider - sezgir ko'p maqsadli slayder

MightySlider - bu juda kuchli slayder. U nafaqat oddiy tasvir slayderi, balki menyu bandi navigatsiyasi bilan to'liq ekranli bir tomonlama slayder sifatida ham foydalanish mumkin. Uning yordamida siz bir sahifali ajoyib veb-sayt yaratishingiz mumkin.

Kaput ostida siz ko'plab variantlarni topasiz:

Klaviatura, sichqoncha va sensorli yordam

CSS3 apparat tezlashtirilgan o'tishlari

Yaroqli belgilash va SEO optimallashtirishni tozalang

Cheksiz slaydlar, sarlavhalar qatlamlari va effektlar

API juda kuchli va ishlab chiquvchilarga qulay bo'lib, undan foydalanishning turli usullarini ochadi. MightySlider - bu toza va yaxshi sharhlangan kodga ega mukammal progressiv jQuery slayder.

20. Parallax Slider - javob beruvchi jQuery plagini

Parallax Slider jQuery Responsive OneByOne Slider plagini kabi ishlaydi va har bir qatlamni bir xil slaydda alohida animatsiya qilish imkonini beradi. Parallaks animatsiyasini qo'shish orqali barcha slaydlarni yoki hatto bittasini jonlantirishingiz mumkin.

To'plam har xil turdagi 4 ta slayder bilan birga keladi, ularning barchasi parallaks effektiga ega. Boshqa jQuery slayderlari singari u ham mavjud:

To'liq moslashtirish imkoniyati

Tegishli qo'llab-quvvatlash

To'liq javob beruvchi, cheksiz qatlamlar

Avtomatik ijro etish, aylanish, balandlik va kenglikni sozlash va taymer

Animatsiyalangan qatlamlar shunchaki matn yoki tasvir emas. Bundan tashqari, YouTube, Vimeo va HTML5 videolarini qo'shishingiz mumkin. Parallax Slider - bu barcha qurilmalarda qo'llab-quvvatlanadigan Flash effektlarini Flashning o'zidan ham yaxshiroq taqlid qilishning yana bir yaxshi namunasidir.

Xulosa

JQuery slayderlari qanday qilib bitta tasvirni boshqasi bilan almashtiradigan narsadan ulkan ijodiy vositalar to'plamiga aylanganini ko'rish qiziq. Endi 3D slayderlar, parallaks slayderlari, to'liq sahifa slayderlari, sezgir slayderlar va ish stoli kompyuterlarida ham, smartfonlarda ham ko'rish mumkin bo'lganlar mavjud.

Agar sizga ushbu roʻyxatdagi slayderlardan birontasi yoqmasa, siz har doim Envato’da jQuery Code Oʻquv qoʻllanmasidan oʻtib, butunlay yangi va noyob narsani ishlab chiqishingiz mumkin.

Yoki tanlash uchun Envato Marketdagi boshqa slayderlarni tekshiring. Sizning sevimli jQuery slayderingiz nima va nima uchun?

Slayder bir qatorda joylashtirilgan tasvirlarni gorizontal ravishda aylantiradi. Rasmlar bir xil o'lchamda bo'lishi kerak. Tasvirlarni aylantirish avtomatik ravishda yoki oldinga va orqaga tugmalari yordamida amalga oshiriladi. Natijada nima sodir bo'lishini quyidagi misolda ko'rish mumkin.

Ushbu slayderni o'rnatish juda oson. odatdagidek, istalgan natijaga erishish uchun skriptlar va kodlarni amalga oshirish uchun bir necha qadamlarni bajarishingiz kerak.

HTML kodi

Slayderning o'zini ko'rsatmoqchi bo'lgan joyga kelajakdagi slayderimizning HTML kodini qo'shishingiz kerak.

• sl_ctr- slayderning barcha elementlarini o'z ichiga olgan slayderning asosiy konteyneri.
• sldr- tasvirlar bilan konteyner. ichida 4 ta rasm mavjud. Istaganingizcha rasmlarni joylashtirishingiz mumkin.
• prv_b- slaydlarni orqaga siljitish tugmasi.
• nxt_b- slaydlarni oldinga siljitish tugmasi.

CSS uslublari

Sl_ctr(pozitsiya:nisbiy; kenglik:450px; balandlik:300px; toshib ketish:yashirin; ) .sldr(pozitsiya:nisbiy; kenglik:10000px; balandlik:300px; ) .sldr img( float:left; ) .prv_b, .nxt_b( pozitsiya: mutlaq; tepa: 135 piksel; displey: blok; kenglik: 35 piksel; balandlik: 35 piksel; kursor: ko'rsatgich; ) .prv_b: hover, .nxt_b: hover(shaffoflik:.6;) .prv_b( chap:10px; fon: url(images/prv.png) takrorlanmaydi; ) .nxt_b(o‘ngda:10px; fon:url(images/nxt.png) takrorlanmaydi; )

• sl_ctr- biz konteynerimizga slayderning o'lchamlarini beramiz, bu holda kengligi 450 piksel va balandligi 300 piksel. Ushbu konteyner chegarasidan tashqariga chiqadigan hamma narsani kesish uchun overflow:hidden parametri ham o'rnatiladi. Bizning holatda, bu bir qatorda joylashgan tasvirlardir.
• sldr- biz rasmlari bo'lgan konteyner uchun 10000 pikselli katta kenglikni o'rnatdik, shunda biz qancha rasmlar bo'lishidan qat'i nazar, barcha rasmlarni sig'dira olamiz. balandligi, shuningdek, asosiy konteyner kabi, 300 pikselga o'rnatiladi.
• sldr img- biz barcha rasmlarni ketma-ket bo'lishi uchun chapga bosamiz.
• .prv_b, .nxt_b- biz boshqaruv tugmalari uchun umumiy uslublarni o'rnatamiz, so'ngra har biri uchun alohida.

Skriptlarni ulash

Xo'sh, slayderni jonlantiradigan va boshqaradigan skriptning o'zi. Ko'rsatmalardan foydalanib, siz uni qulay usulda ham ulashingiz mumkin.

Keling, skriptdagi asosiy sozlamalarni tahlil qilaylik.

• varsldr = $(".sldr")- biz tasvirlar uchun konteynerimizdan o'zgaruvchini o'rnatdik. Agar siz sinf nomini o'zgartirsangiz, HTML va CSS va skriptda mos kelishi uchun buni juda ehtiyotkorlik bilan bajaring.
• slideWidth = $(".sl_ctr").outerWidth()- slayderimizning kengligini aniqlang.
• slideCount = $(".sldrimg").uzunlik- slaydlar sonini, ya'ni rasmlar kodiga qancha qo'shganingizni aniqlang.
• prv_b = $(".prv_b")- orqaga tugmasi, slaydni boshqarish elementlari bilan blokni aniqlaymiz.
• prv_b = $(".nxt_b")- oldinga tugmasi, slaydni boshqarish bilan blokni aniqlaymiz.
• sldrInterval = 3300- bitta rasm qancha vaqt ko'rsatiladi. 3,3 soniya
• animateTime = 1000- animatsiya vaqti, slaydni o'zgartirish. 1 soniya.
• kurs = 1- siljish yo'nalishi. Bunday holda, tasvirlar chapga siljiydi va bizga o'ngda joylashganlarni ko'rsatadi. Agar siz qiymatni -1 ga qo'ysangiz, yo'nalish o'zgaradi.
• margin = - slideWidth;- slaydning dastlabki ofseti.

Bundan tashqari, agar kursorni ustiga olib kelsangiz, slayder o'z animatsiyasini to'xtatadi.

Agar hamma narsa to'g'ri bajarilgan va sozlangan bo'lsa, slayder allaqachon saytingizda ishlashi kerak. Materiallar murakkab emas, uni o'zingiz va saytdagi aniq vazifalar uchun sozlashingiz mumkin va bu slayder sizni va tashrif buyuruvchilarni quvontiradi.

Hammasi shu, e'tiboringiz uchun rahmat. 🙂

Oddiy, engil (21Kb siqilgan) slayder, hech qanday bog'liqliksiz sof Javascriptda yozilgan, ya'ni. jQuerysiz ishlaydi.

Quyidagi brauzerlarda sinovdan o'tgan:

• Chrome 26.0
• Firefox 20.0
• Safari 5.1.7
• IE10
• Opera 16.0

IE8/9 uchun to'liq qo'llab-quvvatlanmagan (ta'sirlar yo'q).

Xususiyatlari

• Siz sahifaga cheksiz miqdordagi slayderlarni qo'shishingiz mumkin, hatto birini ikkinchisining ichiga joylashtirishingiz mumkin.
• Kontentga qarab o'lchamini o'zgartiradi, lekin o'chirib qo'yish mumkin.
• Klaviatura navigatsiyasi - kursor slayderda bo'lganda, strelkalar bilan slayderlarni almashtirish mumkin.
• Mobil sensorli hodisalarni qo'llab-quvvatlash.

Ulanish

Tegni yopishdan oldin

ulanish kerak slider.js yoki slider.min.js fayl.

HTML belgilash

slider.js id atributiga ega bo'lgan har qanday inline , inline-block , blok elementlari bilan ishlashi mumkin. Siz data-slidr atributiga ega har qanday birinchi darajali asosiy elementlardan foydalanishingiz mumkin, masalan:

• olma
• banan
• kokos

javascript

Ulanishdan keyin slider.js global slayder ob'ekti mavjud bo'ladi. Slayder yaratishning eng oson yo'li:

Slidr.create("slidr-id").start();

Barcha sozlamalar bilan qo'ng'iroq qiling:

Slidr.create("slidr-id", ( keyin: function(e) ( console.log("in: " + e.in.slidr); ), oldin: function(e) ( console.log("out: " + e.out.slidr); ), non bo'laklari: rost, boshqaruv elementlari: "burchak", yo'nalish: "vertikal", o'chirish: noto'g'ri, klaviatura: rost, to'lib ketish: rost, mavzu: "#222", vaqt: ( " kub": "0,5s ease-in" ), teginish: rost, o'tish: "cube" )).start();

Sozlamalar

slidr.js uchun barcha mavjud sozlamalar quyidagi jadvalda keltirilgan.

Parametr	Turi	Avvalboshdan	Tavsif
keyin	funktsiyasi		slaydni o'zgartirgandan keyin qayta qo'ng'iroq qilish
oldin	funktsiyasi		slaydni o'zgartirishdan oldin qayta qo'ng'iroq qilish funktsiyasi
non bo'laklari	bool	yolg'on	Slaydlaringizni boshqarish uchun maydalagichlarni ko'rsating. To'g'ri yoki noto'g'ri .
nazorat qiladi	ip	chegara	Slaydlarni boshqarish uchun o'qlarning joylashuvi. chegara, burchak yoki yo'q.
yo'nalishi	ip	gorizontal	Yangi slaydlar uchun standart yo'nalish. gorizontal yoki h, vertikal yoki v.
so'nish	bool	rost	Slayd o'tishlari uchun o'chirish effektini yoqing. To'g'ri yoki noto'g'ri .
klaviatura	bool	yolg'on	Klaviatura yordamida slaydlarni o'zgartirishni yoqing. To'g'ri yoki noto'g'ri .
toshib ketish	bool	yolg'on	Slayder bloki uchun to'ldirishni yoqing. To'g'ri yoki noto'g'ri .
pauza	bool	yolg'on	Sichqoncha kursoridagi slaydlarni avtomatik ravishda o'zgartirmang (auto() ni ishga tushirish kerak). To'g'ri yoki noto'g'ri .
mavzu	ip	#fff	Slayderning rangini boshqaradi (non bo'laklari va o'qlar). #hexcode yoki rgba(qiymat).
vaqt	ob'ekt	{}	Qo'llash uchun maxsus animatsiya vaqtlari. ("o'tish": "vaqt") .
teginish	bool	yolg'on	Mobil qurilmalarda sensorli boshqaruvni yoqing. To'g'ri yoki noto'g'ri .
o'tish	ip	chiziqli	Slayd o'tish effekti. kub, chiziqli, so'nish yoki yo'q.

Qayta qo'ng'iroqlardan keyin va oldin quyidagi ma'lumotlarni oladi:

( id: "slidr-id", in: ( el: # , slidr: "data-slidr-in", trans: "o'tish-in", dir: "yo'nalish-in" ), tashqariga: ( el: # , slidr: "data-slidr-out", trans: "o'tish-chiqish", dir: "yo'nalish-chiqish" ) )

Slider.js global API

Slidr global nom maydoni quyidagi funksiyalarni ta'minlaydi:

/** * Joriy versiya * @return (string) major.minor.patch. */functionversion()(); /** * Mavjud o'tish effektlari. * O'tishlarning @qaytishi (massiv). */ funktsiyaga o'tish () (); /** * Slidrni yaratadi va qaytaradi. * Ushbu funktsiyani bir xil elementda ikki marta chaqirish allaqachon yaratilgan Slidr obyektini qaytaradi. * Slidr uchun @param (string) element identifikatori. * @param (Object=) opt_settings Slayder uchun sozlamalar. */ funksiya yaratish (id, opt_settings) ();

Slider API

// Slidr-ni maxsus sozlamalar bilan ishga tushirish var s = slidr.create("slidr-api-demo", ( noncrumbs: true, overflow: true )); // Standart o'tish effekti bilan gorizontal slaydlarni qo'shing. // oxiridagi massivning takroriy elementi "bir" Slidr-ga // slaydlarni cheksiz aylantirish imkonini beradi s.add("h", ["bir", "ikki", "uch", "bir"]); // "Kubik" o'tish effekti bilan vertikal slaydni qo'shadi. s.add("v", ["besh", "to'rt", "uch", "besh"], "kub"); // Slayderni ishga tushirish. s.start();

Qisqa kirish

Var s = slidr.create("slidr-api-demo", ( noncrumbs: true, overflow: true )).add("h", ["bir", "ikki", "uch", "bir"]) .add("v", ["besh", "to'rt", "uch", "besh"], "kub") .start();

Slidr.js API funksiyalarining toʻliq roʻyxati quyida keltirilgan.

/** * Slayderni ishga tushiring! * Start() ga qoʻngʻiroq qilishdan oldin hech narsa qoʻshilmagan boʻlsa, avtomatik ravishda yaratiladigan slaydlarni topadi. * @param (string) ishga tushirish uchun opt_start `data-slidr` identifikatori. * @return (bu) */ function start(opt_start) (); /** * Biz sirpanishimizni tekshiring. * @param (string) keyingi yoʻnalish (“yuqoriga”, “pastga”, “chapga”, “oʻngga”) yoki “data-slidr” identifikatori. * @return (mantiqiy) */ funktsiyasi canSlide(keyingi) (); /** * Slayd! * @param (string) keyingi yoʻnalish (“yuqoriga”, “pastga”, “chapga”, “oʻngga”) yoki “data-slidr” identifikatori. * @return (bu) */ funktsiya slide (keyingi) (); /** * Slaydlar to'plamini qo'shadi. * @param (string) yo'nalishi `gorizontal || h` yoki `vertikal || v`. * @param (massiv) identifikatorlari Slidrga qo'shiladigan "ma'lumotlar-slidr" identifikatorlari ro'yxati. Slaydlar Slidrning bevosita bolalari bo'lishi kerak. * @param (string=) opt_transition Slaydlar o'rtasida qo'llaniladigan o'tish yoki foydalanadi sukut bo'yicha.* @param (boolean=) opt_overwrite Agar ziddiyatlar yuzaga kelsa, mavjud slayd xaritalarini/o'tishlarini qayta yozish kerakmi.* @return (bu) */ function add(yo'nalish, ids, opt_transition, opt_overwrite) (); /** * Avtomatik ravishda ma'lum vaqt tugashidan keyin keyingi slaydga o'ting. Agar hali chaqirilmagan bo'lsa start() qo'ng'iroqlari.* @param (int=) opt_msec Har bir slaydga o'tish orasidagi millislar soni. Standart 5000 (5 soniya).* @param (string=) ) opt_direction "yuqoriga", "pastga", "chapga" yoki "o'ngga". Standart "o'ngga".* @param (string=) opt_start Boshlanish uchun `data-slidr` identifikatori (faqat avtomatik chaqirilganda ishlaydi) Slidrni ishga tushirish uchun).* @return (bu) */ funksiya auto(opt_msec, opt_direction, opt_start) (); /** * Agar u yoqilgan bo'lsa, avtomatik o'tishni to'xtating. * @return (bu) */ function stop() (); /** * Maxsus animatsiya vaqtlarini o'rnating. * @param (string|Ob'ekt) o'tish Yoki o'tish nomi (masalan, "kub") yoki ("o'tish": "vaqt") ob'ekti. * @param (string=) opt_timing Yangi animatsiya vaqti (ya'ni "0,5s osonlik"). Agar o'tish ob'ekt bo'lsa, talab qilinmaydi. * @return (bu) */ funksiya vaqti (o'tish, opt_timing) (); /** * Non parchalarini almashtirish. * @return (bu) */ function breadcrumbs() (); /** * Boshqaruvni almashtirish. * @param (string=) opt_scheme Agar mavjud bo'lmasa, yoqish/o'chirish, aks holda tartibni o'zgartirish. "chegara", "burchak" yoki "yo'q". * @return (bu) */ funktsiyani boshqarish (opt_scheme) ();

Slaydga o'tish paytida aylantirilgan sahifalar

Bu zerikarli xato ba'zi brauzerlarda paydo bo'ladi. Uni tuzatish uchun tanaga uslub qo'shishingiz kerak:

Tana (toshib: yashirin; )

Dinamik o'lchamlarni o'zgartirish

Sliderning o'zi tasvirga mos keladigan slayder hajmini o'zgartirish zarurligini "tushunadi". Agar slayder blokining o'lchamlari bo'lsa, Slidr ularni avtomatik ravishda o'zgartirmaydi. Agar min-kenglik va min-balandlik xossalari ko'rsatilgan bo'lsa, slayder ushbu qiymatlarni hisobga olgan holda mazmuniga ko'ra o'z o'lchamini o'zgartiradi. Aks holda, o'lcham avtomatik ravishda amalga oshiriladi.

Avtomatik o'lchamlarni o'zgartirish

Statik o'lchamlar

Slayder boshqaruvlari

Boshqaruv elementlarining joylashuvi quyidagicha:

Har qanday slayder boshqaruvini CSS selektorlari yordamida sozlashingiz mumkin:

chetga .slidr-control.right (kengligi: 50px !muhim; balandlik: 50px !muhim; tepasi: 50% !muhim; chet-usti: -25px !muhim; oʻng: -25px !muhim; chegara radiusi: 25px; fon : url("/static/images/arrow_right.png") 14px 13px takrorlanmaydigan qora; shaffoflik: 0,4; ) chetga .slidr-control.right:hover ( shaffoflik: 1; )

O'qni boshqarish :after pseudo-selektor bilan amalga oshiriladi, shuning uchun uni yashirish uchun quyidagi koddan foydalaning:

// Bitta kontroller ichida bitta o'qni yashirish. chetga .slidr-control.right:after (chegara-rang: shaffof !muhim; ) // Bitta kontroller ichidagi barcha o'qlarni yashirish. chetga .slidr-control:after (chegara-rang: shaffof !muhim; ) // Barcha Slidr strelkalarini yashirish. chetga .slidr-control:keyin (chegara-rang: shaffof !muhim; )

Breadcrumbs Slidr

Breadcrumblarda oddiy HTML belgilari mavjud. Har bir ul butun qatorni, har bir li esa non bo‘lagini bildiradi:

CSS yordamida non parchalarini uslublash:

// Joylashuv, o'lcham, chegara rangi va fon rangini moslashtiring. chetga (o'ngda: 50% !muhim; chet-o'ng: -41px !muhim; ) chetga .slidr-breadcrumbs li (kenglik: 15px !muhim; balandlik: 15px !muhim; chet: 3px !muhim; ) chetga .slidr-breadc li.normal (chegara rangi: oq !muhim; ) chetga .slidr-breadcrumbs li.active (fon rangi: qora !muhim; )

Litsenziya

Ushbu dastur MIT litsenziyasi ostida foydalanish uchun bepul.

Bu jQuery-da yozilgan sezgir sensorli slayder. Ushbu plaginning dvigateli CSS3 animatsiyalaridan foydalanadi, biroq ayni paytda brauzerlarning eski versiyalari uchun zaxiralar taqdim etiladi. Glide.js oddiy va engil.

Foydalanish

1. jQuery-ni qo'shing

Yagona plaginga bog'liqlik jQuery bo'lib, biz avval uni kiritishimiz kerak:

2. Glide.js-ni qo'shing

3. HTML qo'shing

Keling, asosiy uslublarni bog'laymiz.

Keling, slayderning html tuzilishini yig'amiz.

4. Initializatsiya

Standart sozlamalar bilan slayder ishga tushirilmoqda...

... yoki uni o'zingiz uchun moslashtiring

Sozlamalar

Mavjud variantlar ro'yxati:

Parametr	Standart qiymat	Turi	Tavsif
avtomatik	4000	int/bool	Avtomatik aylantirish (o‘chirish uchun noto‘g‘ri)
hoverpauza	rost	bool	Sichqoncha kursorini slayder ustiga olib kelganda avtomatik aylantirishni to'xtatib turing
animatsiya vaqti	500	int	!!! Agar brauzer css3 ni qo'llab-quvvatlamasa, ushbu parametr ishlaydi. Agar css3 brauzer tomonidan qo'llab-quvvatlansa, u holda bu parametr .css faylida o'zgartirilishi kerak!!!
strelkalar	rost	bool/string	O'qlarni ko'rsatish/yashirish/biriktirish. Slayder konteyneridagi strelkalarni ko'rsatish uchun rost. Yashirish uchun yolg'on. Maxsus html kodini biriktirish uchun sinf nomini ham belgilashingiz mumkin (misol: ".class-name")
arrowsWrapperClass	slayder-strelkalar	ip	O'qlar bilan konteynerga tayinlanadigan sinf
arrowMainClass	slayder strelkasi	ip	Barcha o'qlar uchun asosiy sinf
arrowRightClass	slayder-strelka-o'ngga	ip	O'ng strelka uchun sinf
arrowLeftClass	slayder-strelka-chapga	ip	Chap strelka uchun sinf
o'ngga matn	Keyingi	ip	O'ng strelka uchun matn
arrowLeftText	oldingi	ip	Chap strelka uchun matn
nav	rost	bool/string	Slayd navigatsiyasini ko‘rsatish/yashirish/qo‘shish. Ko'rsatish uchun to'g'ri. Yashirish uchun yolg'on
navCenter	rost	bool	Navigatsiya markazi
navClass	slayder-nav	ip	Navigatsiya konteyneri uchun sinf
navItemClass	slider-nav_element	ip	Navigatsiya elementi uchun sinf
navCurrentItemClass	slider-nav__element --joriy	ip	Joriy navigatsiya elementi uchun sinf
klaviatura	rost	bool	Chap/o'ng tugmalarni bosib slaydni aylantiring
sensorli masofa	60	int/bool	Tegish qo'llab-quvvatlash (tegish). Bu xususiyatni oʻchirish uchun “False”.
oldin Init	funktsiya()()	funktsiyasi	Plaginni ishga tushirishdan oldin amalga oshiriladigan qayta qo'ng'iroq
afterInit	funktsiya()()	funktsiyasi	Plagin ishga tushirilgandan so'ng ishga tushadigan qayta qo'ng'iroq
O'tishdan oldin	funktsiya()()	funktsiyasi	Slayderni aylantirishdan oldin ishga tushadigan qayta qo'ng'iroq
O'tishdan keyin	funktsiya()()	funktsiyasi	Slayder aylantirilgandan so'ng ishlaydigan qayta qo'ng'iroq

API

APIdan foydalanish uchun oʻzgaruvchiga glide yozing.

var glide = $(".slider").glide().data("api_glide");

API usullari endi siz uchun mavjud.

Glide.jump(3, console.log("Vuu!"));

• .current() - Joriy tomon raqamini qaytaring
• .play() - Avtomatik aylantirishni boshlash
• .pause() - Avtomatik aylantirishni to'xtatish
• .keyingi (qayta qo'ng'iroq) - slayderni oldinga aylantiring
• .prev(qayta qo'ng'iroq) - slayderni orqaga aylantiring
• .jump(masofa, qayta qo'ng'iroq) - Muayyan slaydga o'tish
• .nav(target) - Muayyan elementga navigatsiyani biriktirish (masalan: "tana", ".class", "#id")
• .arrows(target) - O'qlarni ma'lum bir elementga biriktirish (masalan: "tana", ".class", "#id")

Moslashuvchan yoki, agar xohlasangiz, sezgir veb-dizayn endi boshqa dizayn tendentsiyasi emas, u allaqachon veb-saytlarning ko'p qirraliligini, turli xil foydalanuvchi qurilmalari ekranlarida uyg'un vizual idrok etishni ta'minlaydigan veb-saytlarni ishlab chiqish standartining o'ziga xos turidir. Yaqinda moslashuvchan shablonni ishlab chiqishda men umumiy dizayn uslubini buzmasdan ma'lum slayderlar va tasvir galereyalarini birlashtirishda turli qiyinchiliklarga duch keldim. Endi hamma narsa ancha sodda, tarmoqda juda ko'p tayyor echimlar mavjud va ayniqsa quvonarlisi shundaki, ularning aksariyati bepul, ochiq manba hisoblanadi.

Taklif etilayotgan vositalarning xilma-xilligi tufayli men yaqinda paydo bo'lgan va hech qanday cheklovlarsiz tarqatiladigan sezgir jQuery tasvir slayderlarining eng diqqatga sazovor ishlanmalari haqida qisqacha ma'lumot tuzdim, ya'ni. mutlaqo bepul.

WOW slayder

Ajoyib vizual effektlar to'plami (aylanishlar, uchishlar, loyqalar, spirallar, panjurlar va boshqalar) va ko'plab tayyor shablonlarga ega sezgir jQuery tasvir slayderi. WOW Slider-ning o'rnatilgan sahifani joylashtirish ustasi yordamida bir necha daqiqada osongina ajoyib slayd-shoularni yaratishingiz mumkin. Ishlab chiquvchining sayti rus tilida plaginni o'rnatish va ishlatish uchun barcha kerakli hujjatlarni, plaginning ajoyib jonli misollarini o'z ichiga oladi. Mustaqil Wordpress plagini va Joomla moduli ham yuklab olish mumkin. Ishonchim komilki, ko'pchilik yangi boshlanuvchilar uchun ham, ilg'or veb-ustalar uchun ham ushbu ajoyib slayderni yoqtiradi.

HiSlider

HiSlider - HTML5, Jquery slayder va rasm galereyasi, mashhur tizimlar - WordPress, Joomla, Drupal ishlaydigan saytlarda shaxsiy foydalanish uchun mutlaqo bepul plagin. Ushbu oddiy, ammo juda funktsional vosita yordamida siz osongina ajoyib va ​​jonli slayd-shoularni, ajoyib taqdimotlarni va saytlaringiz sahifalarida yangi xabarlar e'lonlarini yaratishingiz mumkin. Slayder uchun bir nechta tayyor shablon va terilar, ajoyib tarkibga o'tish (o'zgartirish) effektlari, turli multimedia kontentini chiqarish: YouTube va Vimeo-dan videolar, moslashuvchan foydalanuvchi sozlamalari va boshqalar...

Nivo slayder

Nivo Slider - yaxshi eski, mavzu bo'yicha hammaga yaxshi ma'lum, eng chiroyli va ishlatish uchun qulay tasvir slayderlaridan biri. jQuery Nivo Slider plaginini MIT litsenziyasi ostida yuklab olish va ishlatish bepul. WordPress uchun alohida plagin ham mavjud, ammo afsuski, u allaqachon to'langan va buning uchun bitta litsenziya uchun 29 dollar to'lashingiz kerak bo'ladi. WP mavzu fayllari bilan sehrgarlik qilish va Nivo Slider plaginining bepul jQuery versiyasini blogingizga biriktirish yaxshiroqdir, chunki tarmoqda buni qanday qilish haqida etarli ma'lumot mavjud.
Funktsionallikka kelsak, hamma narsa bunga mos keladi. U jQuery v1.7+ kutubxonasidan, chiroyli o'tish effektlaridan, oddiy va juda moslashuvchan sozlamalardan, moslashtirilgan tartib, avtomatik tasvirni kesish va boshqalardan foydalanadi.

Slayder g'oyasi Apple mahsulotlarini taqdim etishning barcha uslubiga ma'lum bo'lgan ishlab chiquvchilardan ilhomlangan, bu erda oddiy animatsiya effekti bilan tanlangan toifani bosish orqali bir nechta kichik narsalar (rasmlar) o'zgaradi. Codrops sizga ushbu slayderni qanday yaratish bo'yicha batafsil o'quv qo'llanmasini, Html belgilashning to'liq tartibini, CSS qoidalari to'plamini va bajariladigan jQuery plaginini, shuningdek, slayderdan foydalanishning ajoyib jonli misolini taqdim etadi.

Slayder slayder

JQuery va CSS3-dagi to'liq ekranli tasvir slayderi + plaginni veb-sayt sahifalariga integratsiya qilish bo'yicha batafsil qo'llanma. Maqsad, keyingi yoki oldingi tarkibga o'tishda joriy slaydni ma'lum kontent bilan ochishdir. JQuery va CSS animatsiyalari yordamida siz slaydlar o'rtasida noyob o'tishlarni yaratishingiz mumkin. Ta'sirchan slayder tartibi turli turdagi foydalanuvchi qurilmalari ekranlarida bir xil darajada yaxshi ko'rinishini ta'minlaydi.

Elastik kontent slayderi

U joylashgan asosiy konteyner hajmiga qarab kenglik va balandlikni avtomatik ravishda sozlaydigan kontent slayderi. Amalga oshirishda juda oddiy va sozlamalarda moslashuvchan, JQuery tomonidan boshqariladigan slayder, pastki qismida navigatsiya bilan, ekran o'lchami pastga qarab o'zgartirilganda, navigatsiya piktogramma shaklida ko'rsatiladi. Juda batafsil hujjatlar (yaratish bo'yicha qo'llanma) va foydalanishning jonli misollari.

3D stack slayderi

3D tekisligidan o'tishlari bilan tasvirlarni ko'rsatadigan slayderning eksperimental versiyasi. Tasvirlar ikkita gorizontal stekga bo'linadi, navigatsiya strelkalari yordamida har bir keyingi tasvirni o'zgartirish va ko'rish holatiga o'tish amalga oshiriladi. Umuman olganda, hech qanday maxsus narsa yo'q, lekin g'oyaning o'zi va bajarish texnikasi juda qiziq.

Juda oddiy, 100% sezgir va to'liq ekranli jQuery tasvir slayderi. Slayderning ishi jQuery magic bilan birgalikda CSS o'tishlariga (o'tish xususiyatiga) asoslangan. Maksimal kenglik sukut bo'yicha 100% ga o'rnatiladi, shuning uchun ekran o'lchami o'zgarganda tasvirlar hajmi o'zgaradi. Dizaynda maxsus animatsiya effektlari va burmalar yo'q, hamma narsa oddiy va silliq ishlash uchun o'tkir.

Minimal slaydlar

Nomi hammasini aytadi, bu men uchratgan eng yengil va minimalist jQuery tasvir slayderlaridan biri (1kb plagin). ResponsiveSlides.js- Konteyner ichidagi elementlardan foydalangan holda slayd-shou yaratuvchi kichik jQuery plagini. Keng ko'lamli brauzerlar, jumladan IE ning barcha versiyalari, mashhur progress tormozi, IE6 va undan yuqori versiyalar bilan ishlaydi. Ish ishonchliligi uchun CSS3 o'tishlarini javascript bilan birgalikda ishlatadi. Tartibsiz ro'yxat yordamida oddiy belgilash, o'tish va vaqt oralig'ini sozlash, slaydlarni almashtirishni avtomatik va qo'lda boshqarish, shuningdek bir vaqtning o'zida bir nechta slayd-shoularni qo'llab-quvvatlash. Mana shunday jirkanch "chaqaloq".

Kamera

Kamera veb-sayt sahifalari uchun bepul jQuery slayd-shou plagini, ko'plab o'tish effektlariga ega engil slayder, 100% sezgir tartib va ​​juda oddiy sozlamalar. U har qanday foydalanuvchi qurilmalari (kompyuter monitorlari, planshetlar, smartfonlar va mobil telefonlar) ekranlariga juda mos tushadi. O'rnatilgan videoni namoyish qilish imkoniyati. Slaydni avtomatik o'zgartirish va tugmalar va tasvir eskizlari bloki orqali qo'lda boshqarish. Yilni dizayndagi deyarli to'liq rasmlar galereyasi.

bxSlider jQuery

Yana bir juda oddiy jQuery sezgir slayder. Slaydlar har qanday tarkib, video, rasm, matn va boshqa elementlarni o'z ichiga olishi mumkin. Kengaytirilgan sensorli ekranni qo'llab-quvvatlash. CSS animatsiya o'tishlaridan foydalanish. Slayd-shou taqdimotining ko'p turli xil variantlari va ixcham tasvir galereyalari. Avtomatik va qo'lda boshqarish. Slaydlarni tugmalar yordamida va eskizlarni tanlash orqali almashtiring. Kichik manba fayl hajmi, sozlash va amalga oshirish juda oson.

Flex Slider 2

FlexSlider 2 - Bir xil nomdagi slayderning yangilangan versiyasi, yaxshilangan sezgirlik, skriptni kichiklashtirish va qayta ishlash/qayta chizishni minimallashtirish. Plagin asosiy slayderni, eskizlari bilan slaydlarni boshqarish boshqaruvlarini, o'rnatilgan chap-o'ng o'qlarni va tugmachaga o'xshash pastki navigatsiya panelini o'z ichiga oladi. Videoni slaydlarda ko'rsatish qobiliyati (vimeo), moslashuvchan parametr sozlamalari (o'tishlar, dizayn, vaqt oralig'i), to'liq moslashtirilgan tartib.

Galleriya

Yuqori sifatli tasvir galereyalari va slayderlarni yaratish uchun taniqli va juda mashhur javob beruvchi jQuery plagini. Slayder interfeysi boshqaruv paneli tufayli vizual ravishda tanish video pleerga o'xshaydi, plagin bir nechta turli mavzularni o'z ichiga oladi. Ommabop xizmatlardan o'rnatilgan video va rasmlarni qo'llab-quvvatlash: Flickr, Vimeo, YouTube va boshqalar. O'rnatish va foydalanish bo'yicha batafsil hujjatlar.

buta mevasi

Oddiy, hech qanday muammosiz bepul jQuery tasvir slayderi sezgir veb-dizayn uchun maxsus yozilgan. Blueberry ochiq manbali eksperimental jQuery plaginidir. Minimalistik dizayn, hech qanday effekt yo'q, faqat ma'lum vaqtdan keyin bir-birini almashtiradigan silliq qalqib chiquvchi tasvirlar. Bu juda oddiy, o'rnating, ulaning va o'ting ...

jQuery popeye 2.1

Lightbox elementlari bilan juda ixcham jQuery tasvir slayderi. Moslashuvchan o'lchamlari tufayli uni har qanday konteynerga sig'dirish juda oson, eskizlar ko'rinishidagi bitta postda, kursorni ustiga olib borsangiz yoki ustiga bossangiz, kattaroq tasvir va boshqaruv elementlari bo'lgan layt qutisi faollashadi. Mahsulotlar yoki yangiliklar e'lonlarini taqdim etish uchun bunday slayderni yon panellarga joylashtirish qulay. Katta hajmdagi ma'lumotlarga ega saytlar uchun ajoyib yechim.

Ketma-ketlik

Kengaytirilgan CSS3 o'tishlari bilan bepul javob beruvchi slayder. Minimalistik uslub, 3 ta mavzu, Har bir ramka gorizontal yo'nalishda siljiydi, markazda paydo bo'ladi, rasm chapga, sarlavha o'ngga, eskizlar pastki o'ng burchakda takrorlanadi. Har bir kadrda ko'rish uchun mahsulot ko'rinishlarini sahifalash. Boshqaruvda orqaga va oldinga tugmalari ham mavjud. Barcha zamonaviy brauzerlarni qo'llab-quvvatlash.

Suring

Funktsionallik va sozlamalar nuqtai nazaridan juda oddiy rasm slayderi, sozlamalardan slaydlar tezligining o'zgarishi, qo'lda rejimning ulanishi (boshqaruv tugmalari faollashtirilgan), doimiy slayd-shou. Ushbu slayder bo'lishga haqli va u meni faqat mavjudligi bilan o'ziga tortdi, men bu ishlanmada o'zim uchun unchalik qiziq narsa topmadim, ehtimol men yomon ko'rganman)))

Tasvirga sezgir slayder

Vladimir Kudinov o'rtoqlaridan shunday go'zal, moslashuvchan tasvir slayderi. Qattiq, yaxshi mo'ljallangan vosita tasviriy misollar va yaratish, o'rnatish va ishlatish bo'yicha batafsil ko'rsatmalar bilan ta'minlangan. Ta'sirchan dizayn, yoqimli yashil tugmalar va o'qlar, hamma narsa juda yaxshi va xotirjam, bosimsiz.

FractionSlider

Rasmlar va matnli slaydlar uchun parallaks effektiga ega bepul jQuery slider plagini. Slayd animatsiyasi har bir vaqt va animatsiya sozlamalarida to'liq nazoratga ega bo'lgan bir nechta namoyish qiymatlariga ega. Slaydda bir vaqtning o'zida bir nechta elementlarni jonlantirish qobiliyati. Siz turli xil animatsiya usullarini o'rnatishingiz, slaydlarni o'chirish yoki ma'lum bir yo'nalishdan o'tishlarni o'rnatishingiz mumkin. Avtomatik displey va rasm ustiga kursorni olib o'tayotganda ochiladigan navigatsiya strelkalari yordamida qo'lda boshqarish. 10 turdagi slayd-shou animatsiya effektlari va boshqalar...

Ko'rib chiqish juda keng bo'lib chiqdi, ammo ko'rib chiqilayotgan mahsulotlarning ko'pligi tufayli etarli ma'lumotga ega emas. Siz to'g'ridan-to'g'ri ishlab chiquvchilar sahifalarida ma'lum bir plaginning funksionalligining barcha tafsilotlari va batafsil tavsiflarini topishingiz mumkin. Umid qilamanki, bu kimgadir o'z saytlari sahifalarida rangli tasvir slayderlarini yaratish uchun juda to'g'ri vositani topishni osonlashtirdi.

Ruslashtirilgan shablonlar bilan ishlash yaxshi bo'lishi haqida hech o'ylab ko'rganmisiz? Bir daqiqa o'ylab ko'ring. Ingliz tilidagi andozalar bilan ishlash vaqtni behuda sarflamaysiz. Endi topishingiz mumkin bo'lgan haqiqat bilan sizni xursand qilishga shoshilamiz. Ularning har biri uchun matn qo'lda yozilgan. Va, albatta, barcha tayyor echimlardan foydalanish juda oson.

Hurmat bilan, Endryu