Boshlash uchun ushbu maqola veb-sahifalar uchun tasvirni aylantiruvchi slayderni qanday yaratishni tushuntirish maqsadida yozilgan. Ushbu maqola hech qanday tarzda tarbiyaviy xususiyatga ega emas, u faqat bizning ko'rib chiqilayotgan ob'ektimizni qanday amalga oshirish mumkinligiga misol bo'lib xizmat qiladi. Siz ushbu maqolada keltirilgan koddan bunday ishlanmalar uchun shablon sifatida foydalanishingiz mumkin, umid qilamanki, men yozganlarimning butun mohiyatini o'quvchiga etarlicha batafsil va tushunarli tarzda etkaza olaman.
Va endi nuqtaga kelsak, yaqinda men bitta saytga slayderni qo'yishim kerak edi, lekin men Internetda tayyor skriptlarni qidirganimda, men arziydigan narsa topolmadim, chunki. ba'zilari men kerak bo'lganda ishlamadi, boshqalari esa konsolda xatosiz umuman boshlamadi. Foydalanish jQuery plaginlari slayder uchun bu menga juda qiziq emasdek tuyuldi, chunki. Garchi men bu bilan muammoni hal qilsam ham, men ushbu mexanizmning ishlashi haqida hech qanday tushunchaga ega bo'lmayman va plaginni bitta slayder uchun ishlatish unchalik maqbul emas. Men ham egri skriptlarni tushunishni xohlamadim, shuning uchun men slayder uchun o'z skriptimni yozishga qaror qildim, uni o'zim kerak bo'lganda belgilayman.
Birinchidan, biz slayderning o'zi mantig'i haqida qaror qabul qilishimiz kerak va keyin amalga oshirishni davom ettirishimiz kerak, bu bosqichda ushbu mexanizmning ishlashini aniq tushunish juda muhim, chunki usiz biz aniq ishlaydigan kodni yoza olmaymiz. biz xohlagan tarzda.
Bizning asosiy ob'ektimiz bo'ladi ko'rish oynasi, ya'ni bizning rasmlarimiz qanday aylanayotganini ko'radigan blok, unda biz bo'lamiz slaydni o'rash, bu bir qatorda joylashgan barcha tasvirlarni o'z ichiga olgan va ichidagi o'rnini o'zgartiradigan bizning blokimiz bo'ladi ko'rish oynasi.
Bundan tashqari, ichki tomonlarda ko'rish oynasi, vertikal ravishda o'rtada, oldinga va orqaga tugmalari bo'ladi, bosilganda, biz ham o'z o'rnimizni o'zgartiramiz. slaydni o'rash nisbatan ko'rish oynasi, bu bilan rasmlarni aylantirish effektini keltirib chiqaradi. Va nihoyat, oxirgi ob'ekt pastki qismida joylashgan bizning navigatsiya tugmalarimiz bo'ladi ko'rish oynasi.
Ularni bosganimizda, biz shunchaki ushbu tugmaning seriya raqamiga qaraymiz va siljitish orqali yana kerakli slaydga o'tamiz. slaydni o'rash(o'zgartirish o'zgartirish orqali amalga oshiriladi CSS xususiyatlarini o'zgartirish, uning qiymati doimiy ravishda hisoblab chiqiladi).
O'ylaymanki, yuqorida aytganlarimdan keyin bularning barchasining mantig'i aniq bo'lishi kerak, lekin agar biron bir joyda tushunmovchiliklar mavjud bo'lsa, unda hamma narsa kodda tozalanadi, sizga ozgina sabr kerak.
Endi yozamiz! Birinchidan, keling, o'zimizni ochamiz indeks fayli va u erda bizga kerak bo'lgan belgini yozing:
Ko'rib turganingizdek, hech qanday murakkab narsa yo'q slayder uchun blok Bizning slayderimiz joylashtiriladigan bir xil blok bo'lib xizmat qiladi, uning ichida allaqachon mavjud ko'rish oynasi, unda bizning slaydni o'rash, aka ichki ro'yxat, bu erda li slaydlar va img- ularning ichidagi rasmlar. Iltimos, barcha tasvirlar bir xil o'lchamda yoki hech bo'lmaganda nisbatlarda bo'lishi kerakligiga e'tibor bering, aks holda slayder egri ko'rinadi. uning o'lchamlari bevosita tasvirning nisbatlariga bog'liq.
Endi biz hamma narsani stilize qilishimiz kerak, odatda uslublar alohida izohlanmaydi, lekin kelajakda tushunmovchilik bo'lmasligi uchun men bunga e'tibor berishga qaror qildim.
korpus ( chekka: 0; to‘ldirish: 0; ) #slayder uchun blok (kenglik: 800px; chekka: 0 avtomatik; chet-usti: 100px; ) #ko‘rish maydoni (kenglik: 100%; displey: jadval; pozitsiya: nisbatan; overflow: yashirin; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; ) #slidewrapper ( joylashuv: nisbiy; kenglik: calc(100% * 4); tepa: 0; chap: 0; chekka: 0; to‘ldirish: 0; -webkit-o‘tish: 1s; -o-o‘tish: 1s; o‘tish: 1s; -webkit -o'tish-vaqt-funksiyasi: oson-chiqish; -o-o'tish-vaqt-funksiyasi: oson-chiqish; o'tish-vaqt-funktsiyasi: oson-chiqish; ) #slidewrapper ul, #slidewrapper li ( margin : 0; toʻldirish: 0; ) #slidewrapper li (kenglik: calc(100%/4); roʻyxat uslubi: yoʻq; displey: inline; float: chap; ) .slide-img (kenglik: 100%; )
dan boshlaylik slayder uchun blok, Takror aytaman, bu bizning sahifadagi blokimiz, biz uni slayder ostida tayinlaymiz, uning balandligi uning kengligi va rasmimiz nisbatlariga bog'liq bo'ladi, chunki ko'rish oynasi butun kengligini egallaydi slayder uchun blok, keyin o'zi slayd bir xil kenglikka ega va shunga mos ravishda uning ichidagi rasm kengligiga qarab balandligini o'zgartiradi (nisbatlar saqlanib qoladi). Men ushbu elementni o'z sahifamga gorizontal ravishda o'rtada, yuqoridan 100px chuqurlikda joylashtirdim, bu uning o'rnini misol uchun qulayroq qildi.
Element ko'rish oynasi, allaqachon aytib o'tilganidek, bizning butun kengligimizni egallaydi slayder uchun blok, mulkka ega toshib ketish: yashirin, bu bizga ko'rish oynasidan tashqariga chiqadigan tasvir tasmasini yashirish imkonini beradi. 
Kuzatish css xususiyati - foydalanuvchi tanlash: yo'q, tugmachalarni bir necha marta bosish bilan slayderning alohida elementlarini ko'k rang bilan ajratib ko'rsatishdan xalos bo'lishga imkon beradi.
Keling, davom etaylik slaydni o'rash, Nima sababdan pozitsiya: nisbiy, lekin emas mutlaq? Hamma narsa juda oddiy, chunki. agar biz ikkinchi variantni tanlasak, u holda mulk bilan ko'rish maydonining to'lib ketishi: yashirin bizga hech narsa ko'rinmaydi, tk. o'zim ko'rish oynasi balandlikka moslashmaydi slaydni o'rash, tufayli u ega bo'ladi balandligi: 0. Nima uchun kenglik muhim va nima uchun biz uni umuman o'rnatamiz? Gap shundaki, bizning slaydlarimiz kengligi teng bo'ladi 100% ko'rish maydoni, va ularni bir qatorda tartibga solish uchun biz ular turadigan joy kerak, shuning uchun kengligi slaydni o'rash teng bo'lishi kerak 100% ko'rish maydoni kengligi slaydlar soniga ko'paytiriladi (mening holimda 4). Haqida o'tish va o'tish-vaqt-funktsiyasi, keyin bu yerda 1s pozitsiya o'zgarishini bildiradi slaydni o'rash 1 soniya ichida sodir bo'ladi va biz buni kuzatamiz va qulaylik- dastlab sekin ketadigan, o'rtasiga tezlashadi va keyin yana sekinlashadi, bu erda siz allaqachon o'zingizning qiymatlaringizni o'rnatishingiz mumkin bo'lgan animatsiya turi.
Xususiyatlar to'plamining keyingi bloki slaydni o'rash va uning pastki elementlari nol to'ldirilgan, bu erda sharhlar ortiqcha.
Keyinchalik, biz slaydlarimizni uslublaymiz, ularning kengligi kenglikka teng bo'lishi kerak ko'rish oynasi, lekin chunki ular ichida slaydni o'rash, uning kengligi slaydlar soniga ko'paytiriladigan ko'rish oynasi kengligiga teng, keyin kenglikni olish uchun ko'rish oynasi yana, bizga 100% kenglik kerak slaydni o'rash slaydlar soniga bo'ling (mening holimda, yana 4 ga). Biz ularni inline elementlarga aylantirganimizdan so'ng ko'rsatish: inline va mulkni qo'shish orqali o'rashni chapga o'rnating suzuvchi: chap. Pro ro'yxat uslubi: yo'q Aytishim mumkinki, men undan standart markerni olib tashlash uchun foydalanaman li, aksariyat hollarda standartning bir turi hisoblanadi.
Shunday qilib slayd-img bu oddiy, tasvir butun kengligini egallaydi slayd, slayd balandligiga moslashtiring slaydni o'rash balandlikka moslashtiring slayd, va balandligi ko'rish oynasi o'z navbatida balandlikning qiymatini oladi slaydni o'rash, Shunday qilib, bizning slayderimiz balandligi tasvirning nisbatlariga va slayder uchun taqdim etilgan blokning o'lchamiga bog'liq bo'ladi, bu haqda men allaqachon yozganman.
O'ylaymanki, biz bu borada uslublarni aniqladik, hozircha tugmalarsiz oddiy slayd-shou qilamiz va uning to'g'ri ishlashiga ishonch hosil qilganimizdan so'ng ularni qo'shamiz va uslublaymiz.
Keling, o'zimizni ochaylik js fayli slayder kodini o'z ichiga oladi, qo'shishni unutmang jQuery, chunki biz ushbu ramka yordamida yozamiz. Aytgancha, ushbu yozish paytida men versiyadan foydalanaman jQuery 3.1.0. Skript bilan faylning o'zi tegning eng oxirida kiritilishi kerak tanasi, chunki biz avval ishga tushirilishi kerak bo'lgan DOM elementlari bilan ishlaymiz.
Hozircha biz bir nechta o'zgaruvchilarni e'lon qilishimiz kerak, ulardan biri biz ko'rgan slayd raqamini ma'lum bir vaqtning o'zida saqlaydi. ko'rish oynasi Men unga qo'ng'iroq qildim slideNow, ikkinchisi esa ushbu slaydlar sonini saqlaydi, bu slideCount.
var slideNow = 1; var slideCount = $("#slidewrapper").children().uzunlik);
o'zgaruvchan slideNow boshlang'ich qiymatini 1 ga qo'yish kerak, chunki sahifa yuklanganda, belgilashimiz asosida biz birinchi slaydni ko'ramiz ko'rish oynasi.
V slideCount bolalar sonini qo'yamiz slaydni o'rash, bu erda hamma narsa mantiqiy.
Keyinchalik, slaydlarni o'ngdan chapga o'tkazish uchun javob beradigan funktsiyani yaratishingiz kerak, keling, buni e'lon qilamiz:
NextSlide() funksiyasi ( )
Biz uni kodimizning asosiy blokida chaqiramiz, unga erishamiz, ammo hozircha biz o'z funksiyamizga nima qilish kerakligini aytib beramiz:
keyingiSlide() funksiyasi ( if (slideNow == slideCount || slideNow)<= 0 || slideNow >slideCount) ( $("#slidewrapper").css("transform", "translate(0, 0)"); slideNow = 1; ) else ( translateWidth = -$("#viewport").width() * ( slideNow); $("#slidewrapper").css(("transform": "translate(" + translateWidth + "px, 0)", "-webkit-transform": "translate(" + translateWidth + "px, 0 )", "-ms-transform": "translate(" + translateWidth + "px, 0)", )); slideNow++; ) )
Birinchidan, biz hozirda tasmaning so'nggi slaydida ekanligimizni tekshiramiz? Buning uchun biz barcha slaydlar sonini ishlatamiz $("#slidewrapper").children().uzunlik va uni slaydimizning soni bilan solishtiring, agar ular teng bo'lsa, demak, biz lentani yana 1 slayddan ko'rsatishni boshlashimiz kerak, ya'ni biz o'zgartiramiz. CSS xususiyatini o'zgartiring da slaydni o'rash ustida tarjima qilish(0, 0), shuning uchun birinchi slayd bizning ko'rish sohamizda bo'lishi uchun uni asl holatiga o'tkazamiz, keling, buni ham unutmaylik. --webkit va --ms Brauzerlar orasidagi mos displey uchun (qarang css xususiyatiga havola). Shundan so'ng, o'zgaruvchining qiymatini yangilashni unutmang slideNow, unga 1-sonli slayd ko'rinayotgani haqida xabar berib: slideNow = 1;
Xuddi shu shart biz ko'rgan slaydning soni slaydlarimiz sonida ekanligini tekshirishni o'z ichiga oladi, ammo agar bu bajarilmasa, biz yana 1-slaydga qaytamiz.
Agar birinchi shart bajarilmasa, demak, biz hozir na oxirgi slaydda, na mavjud bo'lmagan slaydda emasmiz, ya'ni keyingisiga o'tishimiz kerak, biz buni o'zgartirish orqali qilamiz. slaydni o'rash kengligiga teng qiymat bilan qoldiriladi ko'rish oynasi, siljish yana tanish xususiyat orqali sodir bo'ladi tarjima qiling, uning qiymati teng bo'ladi "translate(" + translateWidth + "px, 0)", qayerda translateWidth bizning masofamiz slaydni o'rash. Aytgancha, ushbu o'zgaruvchini kodimizning boshida e'lon qilaylik:
var translateWidth = 0;
Keyingi slaydga o'tgandan so'ng, keling, endi slaydimizga aytaylik, biz ketma-ket keyingi slaydni ko'ramiz: slideNow++;
Shu o‘rinda, ba’zi o‘quvchilar nega biz almashtirmadik, degan savol tug‘ilishi mumkin $("#viewport").width() ba'zi o'zgaruvchilarga, masalan slideWidth Slaydning kengligi doimo qulay bo'lishi kerakmi? Javob juda oddiy, agar bizning saytimiz moslashtirilgan bo'lsa, demak, shunga ko'ra, slayder uchun ajratilgan blok ham moslashadi, bunga asoslanib, sahifani qayta yuklamasdan (masalan, telefonni aylantirmasdan) oyna kengligini o'zgartirishda tushunishimiz mumkin. yon tomonida), kengligi ko'rish oynasi o'zgaradi va shunga mos ravishda bitta slaydning kengligi o'zgaradi. Bunday holda, bizning slaydni o'rash dastlab bo'lgan kenglik qiymatiga o'tkaziladi, ya'ni rasmlar qismlarga bo'linadi yoki umuman ko'rsatilmaydi. ko'rish oynasi. Bizning funktsiyamizda yozish $("#viewport").width() ning o'rniga slideWidth biz slaydlarni har safar almashtirganingizda kenglikni hisoblashni qilamiz ko'rish oynasi, shu bilan ekran kengligining keskin o'zgarishini ta'minlab, bizga kerak bo'lgan slaydga o'tish.
Biroq, biz funktsiyani yozdik, endi biz uni ma'lum vaqt oralig'idan keyin chaqirishimiz kerak, biz intervalni o'zgaruvchida ham saqlashimiz mumkin, shunda biz uni o'zgartirmoqchi bo'lsak, koddagi faqat bitta qiymatni o'zgartiramiz:
var slideInterval = 2000;
Jsdagi vaqt millisekundlarda ko'rsatilgan.
Endi quyidagi tuzilmani yozamiz:
$(hujjat).ready(funksiya () ( setInterval(nextSlide, slideInterval); ));
Hamma narsa oson emas, biz dizayndan o'tdik $(hujjat).ready(funksiya()()) hujjat to'liq yuklangandan keyin quyidagi amallarni bajarish kerakligini aytamiz. Keyinchalik, biz shunchaki funktsiyani chaqiramiz keyingiSlayd ga teng interval bilan slideInterval, o'rnatilgan funksiyadan foydalanish setInterval.
Yuqoridagi barcha amallarni bajarganimizdan so'ng, slayderimiz mukammal aylanishi kerak, ammo agar sizda biror narsa noto'g'ri bo'lsa, muammo versiyada bo'lishi mumkin. jQuery, yoki har qanday faylning noto'g'ri ulanishida. Shuningdek, kodning biror joyida xatoga yo'l qo'yishingiz mumkinligini istisno qilish shart emas, shuning uchun men sizga faqat hamma narsani ikki marta tekshirishni maslahat beraman. 
Ayni paytda, keling, harakat qilaylik, slayderimizga sichqonchani ko'targanda aylantirishni to'xtatish kabi funksiyani qo'shamiz, buning uchun biz kodning asosiy blokiga yozishimiz kerak. (konstruksiya ichida $(hujjat).ready(funksiya () ())) shunday narsa:
$("#viewport").hover(function()( clearInterval(switchInterval); ),function() ( switchInterval = setInterval(nextSlide, slideInterval); ));
Ushbu kodni tahlil qilishni boshlash uchun biz nima ekanligini bilishimiz kerak almashtirish oralig'i. Birinchidan, bu keyingiSlide funktsiyasiga davriy qo'ng'iroqni saqlaydigan o'zgaruvchidir, oddiy qilib aytganda, bizda quyidagi kod qatori mavjud: setInterval(nextSlide, slideInterval);, bunga aylandi: switchInterval = setInterval(nextSlide, slideInterval);. Ushbu manipulyatsiyalardan so'ng bizning asosiy kod blokimiz quyidagi shaklni oldi:
$(document).ready(function () ( var switchInterval = setInterval(nextSlide, slideInterval); $("#viewport").hover(function()( clearInterval(switchInterval); ),function() ( switchInterval = setInterval( keyingiSlide, slideInterval); )))));
Bu erda men voqeadan foydalanaman hoved, ya'ni "hoverda" degan ma'noni anglatadi, bu hodisa sizga ob'ekt ustiga kursorni olib kelgan vaqtni kuzatish imkonini beradi, bu holda ko'rish oynasi.
Ko'rsatkichni o'tkazgandan so'ng, men qavs ichida ko'rsatadigan intervalni tozalayman (bu bizning almashtirish oralig'i), keyin vergul bilan ajratilgan holda, kursorni orqaga surganimda nima qilishimni yozaman, bu blokda men yana o'zimizga tayinlayman. almashtirish oralig'i davriy funksiya chaqiruvi keyingiSlayd.
Endi tekshirib ko'rsak, slaydni o'zgartirishni to'xtatib, slayderimiz kursorga qanday ta'sir qilishini ko'rishimiz mumkin.
Shunday qilib, bizning slayderimizga tugmalar qo'shish vaqti keldi, keling, oldinga va orqaga tugmalaridan boshlaylik.
Keling, avval ularni belgilaymiz:
Avvaliga bu belgi tushunarsiz bo'lishi mumkin, men darhol aytamanki, men bu ikkita tugmachani bittasiga o'rab oldim. div sinf bilan oldingi-keyingi-btns faqat sizning qulayligingiz uchun siz buni qilolmaysiz, natija o'zgarmaydi, endi biz ularga uslublar qo'shamiz va hamma narsa aniq bo'ladi:
#prev-btn, #next-btn (pozitsiya: mutlaq; eni: 50px; balandlik: 50px; fon rangi: #fff; chegara radiusi: 50%; tepa: calc(50% - 25px); ) #prev- btn:hover, #next-btn:hover (kursor: pointer; ) #prev-btn (chapda: 20px; ) #next-btn (o'ngda: 20px; )
Avval tugmalarimizni orqali joylashtiramiz pozitsiyasi: mutlaq Shunday qilib, biz ularning o'z o'rnini bizning ichimizda erkin nazorat qilamiz ko'rish oynasi, keyin ushbu tugmalarning o'lchamlarini belgilang va foydalaning chegara radiusi burchaklarni aylantiring, shunda bu tugmalar aylanaga aylanadi. Ularning rangi oq bo'ladi, ya'ni #fff, va ularning yuqori chetidan chekinishi ko'rish oynasi bu balandligining yarmiga teng bo'ladi ko'rish oynasi minus tugmachaning yarmi balandligi (mening holimda 25px), shuning uchun biz ularni vertikal ravishda markazlashtira olamiz. Keyinchalik, kursorni ular ustiga olib borganimizda kursorimiz o'zgarishini belgilaymiz ko'rsatgich va nihoyat, keling, tugmalarimizga alohida-alohida aytaylik, ularni biz xohlagan tarzda ko'rishimiz uchun ularni chetidan 20px orqaga qo'yish kerak.
Shunga qaramay, siz sahifa elementlarini xohlaganingizcha uslublashingiz mumkin, men foydalanishga qaror qilgan uslublarga misol keltiraman.
Stylingdan so'ng bizning slayderimiz shunday ko'rinishi kerak: 
Keyinchalik, biz o'zimizga qaytamiz js fayli, bu erda biz tugmalarimiz qanday ishlashini tasvirlaymiz. Keling, yana bitta funktsiyani qo'shamiz, u bizga oldingi slaydni ko'rsatadi:
prevSlide() funksiyasi ( agar (slideNow == 1 || slideNow)<= 0 || slideNow >slideCount) ( translateWidth = -$("#viewport").width() * (slideCount - 1); $("#slidewrapper").css(("transform": "translate(" + translateWidth + "px, 0 )", "-webkit-transform": "translate(" + translateWidth + "px, 0)", "-ms-transform": "translate(" + translateWidth + "px, 0)", )); slideNow = slideCount; ) else ( translateWidth = -$("#viewport").width() * (slideNow - 2); $("#slidewrapper").css(("transform": "translate(" + translateWidth + "px , 0)", "-webkit-transform": "translate(" + translateWidth + "px, 0)", "-ms-transform": "translate(" + translateWidth + "px, 0)", )); slideNow--;))
U deyiladi oldingi slayd, u faqat bosilganda chaqiriladi oldingi btn. Avval biz 1-slaydda ekanligimizni yoki yo'qligini tekshiramiz, bu erda biz ham tekshiramiz slideNow slaydlarimizning haqiqiy diapazoni chegaralaridan tashqarida va agar shartlardan biri bajarilgan bo'lsa, biz siljigan holda oxirgi slaydga o'tamiz. slaydni o'rash bizga kerak bo'lgan qiymatga. Biz ushbu qiymatni formuladan foydalanib hisoblaymiz: (bitta slaydning kengligi) * (slaydlar soni - 1), biz bularning barchasini minus belgisi bilan olamiz, chunki uni chapga siljitish, ma'lum bo'ladi ko'rish oynasi Endi bizga oxirgi slaydni ko'rsatadi. Ushbu blokning oxirida biz o'zgaruvchiga ham aytishimiz kerak slideNow endi bizning ko'rish sohamizdagi so'nggi slaydga egamiz.
Agar biz birinchi slaydda bo'lmasak, biz 1 orqaga siljishimiz kerak, buning uchun biz yana xususiyatni o'zgartiramiz. slidewrapper transformatsiyasi. Formula: (bitta slaydning kengligi) * (joriy slaydning soni - 2), bularning barchasi yana minus belgisi bilan olinadi. Lekin nima uchun -1 emas, balki -2, xuddi shu 1 slaydni orqaga siljitishimiz kerakmi? Gap shundaki, agar biz, aytaylik, 2-slaydda bo'lsak, unda o'zgaruvchi x xususiyatlari aylantirish: tarjima qilish (x, 0) bizning slaydni o'rash allaqachon bitta slaydning kengligiga teng, agar biz unga joriy slaydning sonidan 1 ni ayirishimiz kerakligini aytsak, biz yana o'zgartirgan birlikni olamiz. slaydni o'rash, shuning uchun siz ushbu kengliklarni 0 ga siljitishingiz kerak bo'ladi ko'rish oynasi, bu slideNow-da degan ma'noni anglatadi - 2.
Endi biz ushbu qatorlarni asosiy kod blokiga qo'shishimiz kerak:
$("#next-btn").click(function() ( nextSlide(); )); $("#prev-btn").click(function() ( prevSlide(); ));
Bu erda biz shunchaki tugmachalarimizga bosish qilinganligini kuzatib boramiz va bu holda biz kerakli funktsiyalarni chaqiramiz, hamma narsa oddiy va mantiqiy.
Endi yana belgilashga qaytib, slaydni navigatsiya qilish tugmachalarini qo'shamiz:
Ko'rib turganingizdek, ichkarida ko'rish oynasi ichki ro'yxat paydo bo'ldi, unga identifikator bering nav-btns, uning ichida li- bizning navigatsiya tugmalarimiz, biz ularga sinf tayinlaymiz slide-nav-btn, ammo siz belgilash bilan tugatishingiz mumkin, keling uslublarga o'tamiz:
#nav-btns (pozitsiya: mutlaq; kenglik: 100%; pastki: 20px; toʻldirish: 0; chet: 0; matnni tekislash: markaz; ) .slide-nav-btn (pozitsiya: nisbiy; displey: inline-block; roʻyxat uslubi: yoʻq; eni: 20px; balandlik: 20px; fon rangi: #fff; chegara radiusi: 50%; chekka: 3px; ) .slide-nav-btn: hover ( kursor: koʻrsatgich; )
Blok nav-btns, unda bizning tugmalarimiz joylashgan bo'lsa, biz mulkni beramiz pozitsiyasi: mutlaq cho'zilmasligi uchun ko'rish oynasi balandlikda, chunki da slaydni o'rash mulk pozitsiya: nisbiy, biz kengligi 100% ga o'rnatdik, shuning uchun bilan matnni tekislash: markaz ga nisbatan gorizontal ravishda markaziy tugmalar ko'rish oynasi, keyin mulkdan foydalaning pastki biz blokimizga uning pastki chetidan 20px masofada bo'lishi kerakligini aniq tushuntiramiz.
Tugmalar yordamida biz slaydlar bilan bir xil ishni qilamiz, lekin endi biz ulardan so'raymiz displey: inline-blok, chunki da ko'rsatish: inline javob bermaydilar kengligi va balandligi, chunki mutlaq joylashtirilgan blokda. Biz ularning rangini oq rangga aylantiramiz va bizga allaqachon tanish bo'lgan narsalar yordamida chegara radiusi Keling, ularga doira shaklini beramiz. Ularning ustiga kursorni olib borganimizda, biz kursorimiz ko'rinishini odatdagi displey uchun o'zgartiramiz.
Va endi pastga tushamiz jQuery - qismlar:
Birinchidan, navBtnId o'zgaruvchisini e'lon qilamiz, u biz bosgan tugma indeksini saqlaydi:
var navBtnId = 0;
$(".slide-nav-btn").click(function() ( navBtnId = $(this).index(); if (navBtnId + 1 != slideNow) ( translateWidth = -$("#viewport"). width() * (navBtnId); $("#slidewrapper").css(("transform": "translate(" + translateWidth + "px, 0)", "-webkit-transform": "translate(" + translateWidth + "px, 0)", "-ms-transform": "translate (" + translateWidth + "px, 0)", )); slideNow = navBtnId + 1; ) ));
Bizning tugmani bosganingizda biz shu yerdamiz slide-nav-btn birinchi navbatda o'zgaruvchiga tayinlaydigan funktsiyani chaqiring navBtnId bosilgan tugma indeksi, ya'ni uning seriya raqami, chunki orqaga hisoblash noldan boshlanadi, agar biz ikkinchi tugmani bossak, keyin ichida navBtnId 1 qiymati yoziladi.Keyin tekshiramiz, u yerda shunday sonni olish uchun tugmaning tartib raqamiga bitta qo‘shamiz, go‘yo ortga hisoblash 0 dan emas, 1 dan bo‘lgandek, bu sonni raqam bilan solishtiramiz. joriy slayddan, agar ular mos kelsa, biz hech qanday harakat qilmaymiz, chunki kerakli slayd allaqachon mavjud. ko'rish oynasi.
Agar bizga kerak bo'lgan slayd ko'rinmasa ko'rish oynasi, keyin biz siljishimiz kerak bo'lgan masofani hisoblaymiz slaydni o'rash chapga, keyin qiymatni o'zgartiring css xususiyatlari tarjima qilish uchun o'zgartiriladi(piksellarda bir xil masofa, 0). Biz buni bir necha marta qilganmiz, shuning uchun savollar tug'ilmasligi kerak. Oxirida biz yana joriy slaydning qiymatini o'zgaruvchiga saqlaymiz slideNow, bu qiymatni bosilgan tugma indeksiga bitta qo'shish orqali hisoblash mumkin.
Bu, aslida, hammasi, agar biror narsa aniq bo'lmasa, men jsfiddle-ga havolani qoldiraman, u erda materialda yozilgan barcha kodlar taqdim etiladi.
E'tiboringiz uchun tashakkur!
Teglar:
- jQuery slayderi
- css
- Css3 animatsiyasi
- html
Salom aziz blog o'quvchilari. Bugun men sizga foydali narsani taqdim etaman misollar bilan bepul jQuery slayderlari tanlovi. Agar siz hali ham resursingizga rasm slayderini qo'yishga qaror qilsangiz, bu tanlov siz uchun juda foydali bo'ladi va menga ishoning, sizda tanlash uchun juda ko'p narsa bor. Bundan tashqari, barcha slayderlar misollar bilan va ularning har birini amalda sinab ko'rishingiz mumkin. Umuman olganda, men chalg'itmayman, tanlang :-)
Oddiy jQuery tasvir slayderi
Saytingizdagi eng keng tarqalgan va katta bo'lmagan eskiz slayderi.
jQuery eskiz slayderi
Deyarli har qanday dizaynga mos keladigan eskizlar bilan juda oddiy va qiziqarli slayder.
Chiroyli veb-sayt slayder
Qiziqarli matnni aylantiruvchi katta va juda chiroyli rasm slayderi.
Asosiy jQuery slayder
Resursingiz uchun eng keng tarqalgan va oddiy slayder
Tavsifli katta slayder
Ajoyib slayder, undan o'tish haqiqatga to'g'ri kelmaydi.
jQuery tasvir slayderi va tavsifi
Turing va tasvirlar va yoqimli aylantirish effektiga ega zamonaviy matn slayderi.
Maslahatlar bilan tasvirlarni aylantirish
Doimiy va silliq aylantiriladigan qiziqarli aylantiruvchi tasvirlar. Odatiy bo'lib, siz o'zingizga o'zgartirishingiz mumkin bo'lgan turli xil mevalarning tasvirlari mavjud.
jQuery katta strelka slayderi
Tasvirni kattalashtirish orqali hajmini o'zgartiradigan katta pushti o'qlari bo'lgan qiziqarli slayder.
1. Ajoyib jQuery slayd-shousi
JQuery texnologiyasidan foydalangan holda ajoyib ajoyib slayd-shou.
2. jQuery plagini "Scale Carousel"
jQuery yordamida kattalashtirish mumkin bo'lgan slayd-shou. Sizga eng mos keladigan slayd-shou uchun o'lchamlarni o'rnatishingiz mumkin.
3. jQuery plagini "slideJS"
Matn tavsifi bilan rasm slayderi.
4. “JSliderNews” plagini
5. CSS3 jQuery Slider
Navigatsiya strelkalari ustiga surganingizda, keyingi slaydning dumaloq eskizi paydo bo'ladi.
6. Chiroyli jQuery “Taqdimot sikli” slayderi
Rasmni yuklash indikatori bilan jQuery slayderi. Avtomatik slaydni o'zgartirish ta'minlanadi.
7. jQuery Parallax Slider plagini
3D fon effekti bilan slayder. Ushbu slayderning diqqatga sazovor joyi fonning harakati bo'lib, u bir nechta qatlamlardan iborat bo'lib, ularning har biri boshqa tezlikda aylanadi. Natijada volumetrik effektga taqlid qilinadi. Bu juda chiroyli ko'rinadi, o'zingiz ko'rishingiz mumkin. Opera, Google Chrome, IE kabi brauzerlarda effekt yanada qulayroq ko'rsatiladi.
8. Yangi, engil jQuery slayderi "bxSlider 3.0"
Namoyish sahifasida, "misollar" bo'limida siz ushbu plagin uchun barcha mumkin bo'lgan foydalanish uchun havolalarni topishingiz mumkin.
9. jQuery Image Slider plagini "slideJS"
Zamonaviy jQuery slayderi, albatta, loyihangizni bezatishi mumkin.
10. jQuery slayd-shou plagini "Easy Slides" v1.1
Foydalanish uchun qulay jQuery slayd-shou plagini.
11. “jQuery Slides” plagini
Turli dizayndagi engil jQuery plagini. Avtomatik slaydni o'zgartirish ta'minlanadi.
12. Slaydlarni avtomatik o'tkazish bilan jQuery CSS galereyasi
Agar tashrifchi ma'lum vaqt ichida oldinga yoki orqaga o'qlarni bosmasa, galereya avtomatik ravishda aylana boshlaydi.
13. jQuery Nivo Slider
To'g'ri kodli juda professional sifatli engil plagin. Ko'p turli xil slaydga o'tish effektlari mavjud.
14. jQuery Mobile Slider
Yangi slayder. Turli xil tasvir o'tish effektlariga ega jQuery slayderi.
15. jQuery Slider² plagini
Slaydni avtomatik o'zgartirishga ega engil slayder.
16. Yangi javascript slayderi
Rasmni avtomatik o'zgartirishga ega slayder.
Slaydni avtomatik o'zgartirish bilan slayd-shouni amalga oshirish uchun plagin. Tasvir eskizlari yordamida displeyni boshqarish mumkin.
NivoSlider plaginidan foydalangan holda jQuery CSS tasvir slayderi.
19. jQuery "jShowOff" slayderi
Kontentni aylantirish uchun plagin. Foydalanishning uchta holati: navigatsiya yo'q (slayd-shou formatini avtomatik o'zgartirish bilan), tugmachalarni navigatsiya qilish, tasvir eskizi navigatsiyasi.
20. Shutter Effect Portfolio plagin
Fotosuratchi portfelining dizayni uchun yangi jQuery plagini. Galereya tasvirlarni o'zgartirishning qiziqarli ta'siriga ega. Fotosuratlar bir-birini ta'qib qilib, linzalarni yopishning ishlashiga o'xshaydi.
21. Engil javascript CSS slayderi "TinySlider 2"
Javascript va CSS yordamida tasvir slayderini amalga oshirish.
22. Ajoyib slayder "Tinycircleslider"
Zamonaviy dumaloq slayder. Rasmlar orasidagi o'tish slayderni aylana bo'ylab qizil doira shaklida sudrab amalga oshiriladi. Dizayningizda yumaloq elementlardan foydalansangiz, u saytingizga juda mos tushadi.
23. jQuery tasvir slayderi
Yengil vaznli slayder to'plami. Slayder turli xil versiyalarda taqdim etiladi: vertikal va gorizontal. Tasvirlar orasidagi navigatsiyaning har xil turlari ham amalga oshiriladi: "Oldinga" va "Orqaga" tugmalari yordamida, sichqoncha g'ildiragidan foydalanib, slaydni sichqonchani bosish orqali.
24. Slayder to'plami eskiz galereyasi
Slayder to'plami galereyasi. Eskizlar vertikal va gorizontal ravishda aylantiriladi. Tasvirlar orasidagi o'tish sichqonchaning g'ildiragi, sichqonchani bosish yoki eskiz ustiga olib borish yordamida amalga oshiriladi.
25. jQuery Content Slider “Slider Kit”
jQuery vertikal va gorizontal kontent slayderi.
26. jQuery Slider Kit slayd-shousi
Slaydni avtomatik almashtirish bilan slayd-shou.
27. Engil professional javascript CSS3 slayderi
2011-yilda yaratilgan toza jQuery va CSS3 slayderi.
jQuery eskiz slayd-shousi.
29. Oddiy jQuery slayd-shou
Navigatsiya tugmalari bilan slayd-shou.
30. Ajoyib jQuery Skitter slayd-shousi
Ajoyib slayd-shoularni yaratish uchun jQuery "Skitter" plagini. Tasvirlarni o'zgartirishda plagin turli animatsiya effektlarining 22 (!) turini qo'llab-quvvatlaydi. U slaydni navigatsiya qilishning ikkita varianti bilan ishlashi mumkin: slayd raqamlaridan foydalanish va eskizlardan foydalanish. Namoyishni tekshirib ko'ring, bu juda yuqori sifatli topilma. Amaldagi texnologiyalar: CSS, HTML, jQuery, PHP.
31. Noqulay slayd-shou
Funktsional slayd-shou. Slaydlar quyidagilar bo'lishi mumkin: oddiy tasvirlar, sarlavhali rasmlar, maslahatlar bilan tasvirlar, videokliplar. Navigatsiya qilish uchun klaviaturangizdagi strelkalar, slayd raqamlari havolalari va oʻng/chap tugmalaridan foydalanishingiz mumkin. Slayd-shou bir nechta versiyalarda tayyorlangan: eskizlar bilan va ularsiz. Barcha variantlarni ko'rish uchun demo sahifasining yuqori qismida joylashgan Demo #1 - Namoyish #6 havolalariga o'ting.
Fanni eslatuvchi tasvir slayderining juda original dizayni. Animatsiyalangan slaydga o'tish. Rasmlar orasidagi navigatsiya strelkalar yordamida amalga oshiriladi. Yuqorida joylashgan Play / Pause tugmasi yordamida yoqilishi va o'chirilishi mumkin bo'lgan avtomatik o'zgartirish ham mavjud.
Animatsiyalangan jQuery slayderi. Brauzer oynasining o'lchami o'zgartirilganda fon rasmlari avtomatik ravishda o'lchaydi. Har bir rasm uchun tavsifi bo'lgan blok ochiladi.
34. jQuery va CSS3 da "Flux Slider" slayderi
Yangi jQuery slayderi. Slaydlarni almashtirishda bir nechta ajoyib animatsion effektlar.
35. jQuery plagini "jSwitch"
JQuery animatsion galereyasi.
Avtomatik slaydni almashtirish bilan oson jQuery slayd-shou.
37. “SlideDeck 1.2.2” plaginining yangi versiyasi
Professional kontent slayderi. Slaydni avtomatik o'zgartirish imkoniyatlari, shuningdek slaydlar orasida harakat qilish uchun sichqoncha g'ildiragidan foydalanish imkoniyati mavjud.
38. jQuery Sudo Slider
Engil jQuery tasvir slayderi. Amalga oshirish uchun juda ko'p variantlar mavjud: tasvirlarni gorizontal va vertikal ravishda o'zgartirish, slayd raqamiga havolalar bilan va ularsiz, tasvir sarlavhalari bilan va ularsiz, tasvirni o'zgartirishning turli effektlari. Slaydni avtomatik o'zgartirish xususiyati mavjud. Amalga oshirishning barcha misollariga havolalarni demo sahifasida topish mumkin.
39. jQuery CSS3 slayd-shousi
Eskizlar bilan slayd-shou avtomatik slaydga o'tish rejimini qo'llab-quvvatlaydi.
40. jQuery Flux Slider
Ko'p tasvirni o'zgartiruvchi effektlarga ega slayder.
41. Oddiy jQuery slayderi
Zamonaviy jQuery tasvir slayderi.
Siz "oldinga" va "orqaga" tugmalarini qo'shishingiz kerak.
Buning uchun avval yozilgan kodni to'ldirishingiz kerak.
Yangi slayder uchun HTML kodi
Slayderning butun tuzilishi bir xil bo'lib qoladi. Belgilanishga ikkita konteyner qo'shiladi, ular tugma vazifasini bajaradi.
Slayder uslublari
Tugmalar konteynerga nisbatan mutlaq joylashuv tufayli o'z o'rnini egallaydi.slider-box
Slider-box( joylashuv : nisbiy ; kenglik : 320px ; balandlik : 210px ; toshib ketish : yashirin ; ) .slider( joylashuv : nisbiy ; kenglik : 10000px ; balandlik : 210px ; ) .slider img( float : chap ;)- .prev , .slider-box .next( pozitsiya : mutlaq ; tepa : 100px ; displey : blok ; kenglik : 29px ; balandlik : 29px ; kursor : koʻrsatgich ; ) .slider-box .prev( chap : 10px ; fon : url ( ../images/slider_controls.png ) takrorlanmaslik 0 0 ; ) .slider-box .keyingi ( o‘ngda : 10px ; fon : url (../images/slider_controls.png ) takrorlanmaslik -29px 0 ; )
Skript
Slayder avtomatik ravishda aylanadi. Odatiy bo'lib, harakat chapdan o'ngga boradi, lekin agar kerak bo'lsa, kurs o'zgaruvchisi yordamida uning harakat yo'nalishini o'zgartirishingiz mumkin. O'zgaruvchining qiymatini 1 dan -1 ga o'zgartirganda, slayderning yo'nalishi o'zgaradi.
Kursor slayder ichida bo'lganda slayderdagi tasvirlar o'zgarmasligi kerak. Bu nima uchun? Hammasi oddiy. Agar sichqoncha kursori slayderda joylashgan bo'lsa, bu saytga tashrif buyuruvchini uning mazmuni bilan qiziqtirganligini anglatadi. Ayni paytda slaydlarni avtomatik ravishda o'zgartirmang.
$(funktsiya () ( var slider = $(".slider" ) , sliderContent = slider.html () , // Slayder tarkibi slideWidth = $(".slider-box") .outerWidth(), // Slayder kengligi slideCount = $(".slider img") .uzunlik , // Slaydlar soni oldingi = $(".slider-box .prev" ) , // Orqaga tugmasi keyingi = $(".slider-box .keyingi" ), // Oldinga tugma sliderInterval = 3300, // Slaydlarni o'zgartirish oralig'i animateTime = 1000, // Slaydlarni o'zgartirish vaqti kurs = 1 // Slayder harakati yo'nalishi (1 yoki -1) margin = - slideWidth; // Dastlabki slaydlarni ofset$(".slider img:last" ) .clone () .prependTo (".slider" ); // Oxirgi slaydning nusxasi boshida joylashtiriladi.$(".slider img" ) .eq (1 ) .clone () .appendTo (".slider" ); // Birinchi slaydning nusxasi oxirida joylashtiriladi.$(".slider" ) .css ("margin-left" , - slideWidth) ; // Container.slider bitta slaydning kengligi bilan chapga siljiydi. NextSlide() funksiyasi ( // Slaydga o'tishni amalga oshirish uchun animation() funksiyasini ishga tushiradi. interval = window.setInterval (jonlantirish, sliderInterval) ; ) funktsiyasi animate() ( if (margin==- slideCount* slideWidth- slideWidth) ( // Agar slayder oxiriga yetgan bo'lsa slider.css (( "marginLeft" :- slideWidth) ); // keyin block.slider dastlabki holatiga qaytadi chegara=- slideWidth* 2 ; ) aks holda (margin== 0 && kurs==- 1 ) ( // Agar slayder boshida bo'lsa va orqaga tugmasi bosilsa slider.css (( "marginLeft" :- slideWidth* slideCount) ); // keyin block.slider yakuniy holatga o‘tadi margin=- slideWidth* slideCount+ slideWidth; ) boshqa ( // Agar yuqoridagi shartlar bajarilmasa, margin = margin - slideWidth* (kurs) ; // margin qiymati keyingi slaydni ko'rsatish uchun o'rnatiladi) slider.animate (( "marginLeft" : chekka) , animateTime) ; // Block.slider 1 slaydga chapga siljiydi.) funktsiyasi sliderStop() ( // Slayderni to'xtatish funktsiyasi window.clearInterval(interval); )prev.click(function()( // Orqaga tugmasi bosildi var course2 = kurs; kurs = - 1; animatsiya (); // animate() funksiyasini chaqiring kurs = kurs 2; ) ; keyingi.click(funksiya()( // Orqaga tugmasi bosildi if (slider.is (":animated" ) ) ( false ni qaytaring; ) // Agar animatsiya sodir bo'lmasa var course2 = kurs; // Kurs qiymatini saqlash uchun vaqtinchalik o'zgaruvchi kurs = 1; // Slayder yo'nalishini o'ngdan chapga o'rnating animatsiya (); // animate() funksiyasini chaqiring kurs = kurs 2; // Kurs o'zgaruvchisi asl qiymatiga qaytadi) ; slider.add(keyingi) .add(oldingi) .hover(funksiya()( // Agar sichqoncha kursori slayder ichida bo'lsa sliderStop() ; // Slayderni pauza qilish uchun sliderStop() funksiyasi chaqiriladi), keyingi Slayd); // Kursor slayderni tark etganda animatsiya davom etadi. nextSlide(); // NextSlide() funksiyasini chaqiring } ) ;"Oldinga" va "orqaga" tugmalari bo'lgan bunday slayder paydo bo'ldi.
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 jQuery tasvir slayderlarining eng ko'zga ko'ringan 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 slider va tasvirlar 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, lekin 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, slayder JQuery da ishlaydi, navigatsiya pastki qismida joylashgan, 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 imkoniyati (vimeo), moslashuvchan sozlamalar (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'lchami tufayli uni istalgan 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 uning mavjudligi bilan o'ziga tortdi, men bu ishlanmada o'zim uchun qiziq narsa topolmadim, 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 animatsiyalari har bir vaqt va animatsiya sozlamalari ustidan 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.
Hech o'ylab ko'rganmisiz, ruslashtirilgan shablonlar bilan ishlash yaxshi bo'lardi? 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
