JQuery kutubxonasi ostidagi silliq slayderni o'rnatishga qarash. Ushbu plagin slayd-shoularni yaratish uchun plaginlar reytingida eng yuqori o'rinlardan birini egallaydi.

Bu joyni munosib ravishda egallab olganingizdan so'ng, siz u bilan bog'lanib, uni o'zingizning veb-magnitafon xazinasiga qo'yishingiz kerak. Turli xil ilovalarni o'rnatish tavsifi bilan plaginning bosh sahifasini bu erda topishingiz mumkin - slick Demos. Plaginda hamma narsa yo'q - uning omborida barcha boshqaruv funktsiyalari mavjud, u engil va o'rnatish oson, uni yaratish uchun HTML tartibi sodda va semantik. Slick plagin konfiguratsiya fayliga osongina ulanishi mumkin bo'lgan yangi sozlamalar to'plami bilan birga keladi.

Slick plaginni ulash

Ishlaydigan loyihada silliq plaginni ulash jarayoni juda oddiy, siz faqat sozlamalar to'g'ri ekanligiga ishonch hosil qilishingiz kerak.

Slick ostida belgilar yaratish

Silliq plagin uchun HTML tartibi semantik va sodda. Tegishli sinf nomlari ro'yxatini yaratish kifoya. Slick plaginining rasmiy sahifasida Ishga kirishish foydalanuvchisi quyidagi HTML belgilarini ko'rsatadi:

Mening asosiy markirovka qilingan ro'yxat ko'rinishida HTML tartibiga asoslangan slayder yaratishga urinishim:

• 
• 
• 
• 

... muvaffaqiyat keltirmadi - silliq plagin olinmadi! Ehtimol, siz CSS uslublari yordamida elementlarni o'zgartirishingiz mumkin

1

ul

,

1

li

Hammasi hali ham blok uchun ishlayaptimi? Biroq, rasmiy hujjatlarda ta'riflanganidek, siz amalga oshirishingiz mumkin bo'lgan qo'shimcha qadamlar mavjud. Slick plagin faylini tahrirlash

Keyingi bosqichda biz silliq plaginning arxivini olamiz. Siz turli yo'llar bilan pul ishlashingiz mumkin. Birinchisi, sizni ushbu sahifadan jalb qilishdir Go Get It. Yoki muallifning GitHub sahifasiga o'ting va plaginning zip arxivlarini oling - slick GitHub. Ikkala holatda ham nomlari bo'lgan arxivlar o'chiriladi

Slick plaginining tayyor CSS uslublarini HTML hujjatiga ulash mumkin:

Yopiladigan teg oldidagi HTML hujjatining asosiy qismi

1

Js skriptlari bilan uchta qatorni kiritamiz:

Aslida, dastlabki ikki qatorda jQuery-1.11.0 kutubxonasi va jQuery Migrate 1.2.1 plagini CDN orqali yuklab olinadi. Uchinchi plagin

Biz plaginni ishga tushirish skriptini o'z ichiga olamiz: $(hujjat). tayyor (funksiya ()( $ (".slider") . silliq (( nuqta : rost )); ));

Podsumkovning HTML sxemasi va CSS jadvallari va JS skriptlarining ulanishi quyidagicha ko'rinadi:

• 
• 
• 
• 
• 

Men Google Chrome brauzer konsoli kabi boy narsa haqida bilmoqchiman. Nega korisna bor? Chunki u birdaniga men uchun ham ishlaydi (birinchi navbatda, jqFancyTransitions plaginida edi - jqFancyTransitions Slider) va u HTML hujjatiga skriptlarni ulashda xatolarni aniqlashga yordam beradi. Qaytarib bo'lmaydigan narsa!

Brauzerdan foydalanish va Chrome konsolining funksionalligini ko'rsatish uchun men avval yaratgan brauzerda index.html faylini ishga tushiraman.

Va nima?! Kechirasiz, bu erda silliq plagin - slayder, sizga yordam beradimi? Loyihaning rasmiy veb-sayti - Demosda bu qadar yaqqol namoyon bo'lgan ular qanday go'zallik?! Bu ajoyib - lekin ular yo'q!

Heh, skriptni ulash uchun to'g'ri kirdimmi? Xo'sh, men yana bir bor hujjatlarni ko'rib chiqaman ... Hamma narsa to'g'ri, lekin men uchun ishlamayapti ... Balki yana indeks sahifasini qayta yozishim kerakmi? Bu mumkin, lekin turli xil o'zgarishlarga ega bo'lgan bunday "yoki balki" juda ko'p bo'lishi mumkin.

Keling, Google Chrome brauzer konsolini ochamiz va "Tarmoq" yorlig'iga o'tamiz:

Bu mening sahifamda silliq plagin ishlamayotganining asosiy sababi! Shunchaki jQuery 1.11.0 kutubxonasi va jQuery Migrate 1.2.1 plaginini Chrome brauzeri CDN orqali yuklab bo‘lmadi. "Buzilish" sababini aniqlash uchun "ilmiy usul" dan foydalanish uchun qancha soat va asablarni behuda sarflagan bo'lardim, agar konsolning o'zi bo'lmaganida, bu noma'lum.

Brauzer nima uchun CDN orqali fayllarni yuklab olmaganini tushunish uchun bir daqiqa kuta olmayman. Shunday qilib, men fayllarni "qo'lda" yuklab olaman va ularni mahalliy sifatida ulayman:

Google Chrome brauzerida yana index.html indeks sahifasini boshlayapman va... Mo''jiza haqida! Slick plagin quyidagilarni amalga oshiradi:

Rasmlar avtomatik ravishda aylantiriladi va pastki qismida siz sozlashdan oldin silliq skript tomonidan yaratilgan sahifalarni ko'rishingiz mumkin:

nuqta: rost, avtomatik ijro: rost

... konfiguratsiya faylida. Bundan tashqari, tasvirni "qo'lda" oldinga va orqaga qaytarish uchun o'qlar yaratilgan (u HTML sahifasining oq fonida ko'rinmaydi). Slick plaginining boshqa sozlamalarini rasmiy sahifada ko'rish mumkin - Sozlamalar.

QAYD: Boshlash skriptingizni tashqi JS fayliga qo'yishni tavsiya qilaman.

Men ushbu maqolani bitta oddiy sababga ko'ra yozmadim - dumbaning aniqligi va uni yaratishning ravonligi uchun.

Slick plaginini tahrirlash

Endi men o'ng tomonda biroz yo'qotdim - sahifa elementi inspektorini (masalan, Firebug) yaratib, men sahifamizning DOM daraxtidan bizga kerak bo'lgan elementlar sinflarining nomlarini "tortib oldim" va ularni osongina tahrirlashimiz mumkin. CSS qoidalari:

tana (fon rangi: oqartirish (#ccc, 5%); .slider(kenglik: 300px; chekka: 10px avtomatik; toʻldirish: 5px; fon rangi: #ccc; chegara: 3px qattiq #000; @include chegarasi (3px) ); .slick-nuqtalar (pastki: -30px ; ) ) )

Men HTML hujjatining tanasi uchun yarataman

Men to'ldirishni, yumaloq qirralari bo'lgan kordonni va fonni to'ldirishni qo'shaman; Men uni yon tomonga o'rtaga qo'yaman va biroz pastga tushiraman. Va shuningdek, bir oz tepalikka

1	.silliq nuqtalar

sahifalash bilan.

Natija ajoyib:

Visnovok

Plagin slick me, albatta, muvaffaqiyatli bo'ldi. O'rnatish va ulash, slayd-shouni ko'rsatish orqali elementlarni yaratish va juda ko'p turli xil sozlamalarga ega bo'lish oson. Yangi ko'rinishni sozlashning turli xil variantlari uchun siz dastur sahifasiga o'tishingiz mumkin va kerak bo'ladi - Demolar. Va kerak bo'lganda, kerakli aniq aqllarga moslashtiring.

Kodlash bilan xayr!

Salom, men sizga sayt uchun o'zini engil, universal va o'rnatish osonligini ko'rsatgan silliq slayder haqida gapirib bermoqchiman. Bu erda siz slayderlar va karusellar bilan bog'liq hamma narsani amalga oshirishingiz mumkin. Plagin yaratuvchisi ta'kidlaganidek, "sizga kerak bo'ladigan oxirgi karusel", bu sizning fikringiz qanday bo'lishidan qat'i nazar, mos keladigan yagona universal karusel sifatida talqin qilinishi mumkin. Va bu haqiqat. Unda juda ko'p narsa bor, asosiy slayderdan tortib bir necha qatorgacha slaydlari bo'lgan moslashuvchan karuselgacha.

Plagin yangi boshlanuvchilar va ilg'or veb-o'quvchilar tomonidan xavfsiz ishlatilishi mumkin. Bu biz bilgan hamma narsaga juda kuchli raqobatchi. Qutidan biz hatto juda ko'p vazifani bajaradigan vositani ham olib qo'yishimiz mumkin.

Veb-saytingizga slayder/karusel o'rnatish uchun 3 ta oddiy qadamni bajarish kifoya.

Slider sliderni o'rnatish Ilova №1 (Slayder)

1. Krok - Skript va plagin uslublarini ulash.

html sahifalar.

$(hujjat).ready(function())( $(".sizning sinfingiz").slick(); ));

Siz 1-sonli ish uchun kiritgan koddan keyin emas, balki HTML sahifangiz teglari o'rtasida ulanishingiz kerak.

Ushbu misolda biz bitta asosiy slayd bilan karusel kabi silliq slayderni qanday o'rnatishni ko'rsatdik.

Quyida siz yuqorida tavsiflanganlarning oldingi dumbasini hayratda qoldirishingiz mumkin.

Buttstock №2 (karusel)

Karuselni o'rnatish uchun siz avvalgi tavsifdagi kabi hamma narsani qilishingiz kerak, faqat 2-band va 3-modda biroz o'zgarishi mumkin.

2. Croc - slayderning HTML kodini kiritish.

Agar slayderning o'zini ko'rsatishni istasangiz, ushbu kod teglar orasiga kiritilishi kerak.

3. Croc – slayderni ishga tushirish.

$(hujjat).ready(function())( $(".sizning sinfingiz").slick(( cheksiz: rost, slidesToShow: 3, slidesToScroll: 3 )); ));

Va ushbu ilovada biz silliq slayderni karusel sifatida (3 ta asosiy slayd bilan) vikorizatsiya qildik va buning uchun biz ba'zi plagin parametrlarini o'rnatdik.

Quyidagi misolda ushbu karuselning ishiga qoyil qolishingiz mumkin.

Jami 3 ta bo'lakni olganingizdan so'ng, ehtiyojlaringiz uchun karusel yoki slayderni tanlashingiz mumkin. Ushbu slayder uchun juda ko'p imkoniyatlar mavjud. Agar sizda ovqatlanish bilan bog'liq muammolar yoki muammolar bo'lsa, ularni sharhlarda so'rang, men ularga tezda javob berishga harakat qilaman.

Biz o'tgan hafta jamoasidan slayder skriptini oldik

$ bower i slick.js

Siz buni Google'da ham topishingiz mumkin - avval http://kenwheeler.github.io/slick/ dan so'rang.

Slayderning afzalliklari: teginish hodisalarini qo'llab-quvvatlaydi, ularni telefoningizda barmoq bilan ko'rishingiz mumkin
- sezgirlikni qo'llab-quvvatlaydi - siz ekran o'lchamiga qarab slaydlar sonini o'rnatishingiz mumkin: katta ekranlarda siz 4 ta slaydni, o'rtacha 2-3 ta slaydni, telefonlarda birma-bir ko'rishingiz mumkin.

Bower_components papkasidan skriptlarni kiritish yaxshi amaliyotdir



Bundan tashqari, Bower dasturi bilan skriptni yangilashda siz koddagi versiya raqamini qayta yozishingiz shart emas, shuning uchun Bower skriptlarga doimiy nomlar beradi, ular yangilanganda o'zgarmaydi.

Slick papkasida qanday uslublar mavjud: slick.css, slick.less, slick.theme.less, ularni CSS bilan jildga nusxalash va qo'shish yaxshiroqdir. Agar siz ularni o'z joylaridan mahrum qilsangiz va slayder uslubida o'zgarishlar qilsangiz, skript yangilanganda barcha o'zgarishlar yo'qoladi.

Boshqa slayderlardan farqli o'laroq, ramkalar ro'yxatda emas, balki bloklarda joylashtiriladi:

1 2 3 4 5 6

Parametrlarsiz bosing. Parametrsiz plaginni bosganingizda, yon tomonda bitta slayd va navigatsiya strelkalari bilan oddiy variantni tanlashingiz mumkin.

$(".bitta element"). silliq ();

Bir nechta slaydlarni ko'rsatish Ilovada biz aylanma aylanish uchun "silliq slayder" parametrlarini o'rnatdik, navigatsiya nuqtalarini ko'rsatishni yoqdik va ko'rsatiladigan va aylantiriladigan slaydlar sonini aniqladik.
$(".bir nechta element"). silliq ((
cheksiz: rost,
// slayderni aylantiring - qolgan slayddan keyin birinchisi nuqta qo'yadi: rost,
// faol slaydni ko'rsatish uchun slayder ostidagi nuqtalar
Ko'rsatish uchun slaydlar: 3,
//ekranda ko'rsatiladigan slaydlar soni slidesToScroll : 1
//bir vaqtning o'zida qancha slaydlar yoqiladi
))) Markazlash rejimi Markazlash rejimida faol slayd markazga joylashtiriladi.
$(".center"). silliq ((
markaz rejimi: rost,
Ko'rsatish uchun slaydlar: 3,
});
Markaziy slaydda "silliq markaz" klassi mavjud, ya'ni u boshqacha tarzda ishlab chiqilishi mumkin. Moslashuvchanlik Slayderda siz ekranning kengligiga qarab slaydlar sonining moslashuvchan dizaynini sozlashingiz mumkin. Misol uchun, ekran kengligi 600 pikseldan kam bo'lsa, faqat 2 ta slaydni ko'rsatishingiz va ularni birma-bir aralashtirishingiz kerak. Bu saroy shunday ko'rinadi

$(".uncycle" ). slick(( infinite: false , speed: 350 , // slidesToShow: 4 , // slaydlarni ko'rsatish uchun slaydlar soniToScroll: 2 , // bir vaqtning o'zida qancha slayd yonib ketishini bildiradi: [ ( uzilish nuqtasi: 600 , // qaysi ekran kengligini bildiradi, sozlash sozlamalarini yoqishingiz kerak: (slidesToShow: 2, slidesToScroll: 1, cheksiz: true,))))));

Silliq almashtirish Standart slayderni sozlashda slaydlarning keskin o'zgarishi mavjud. Bundan tashqari, Slick funksiyasi silliq slaydni almashtirish rejimini ta'minlaydi. Buning uchun siz tasvirga yo'l yozilgan ma'lumotlar-dangasa atributiga o'tishingiz kerak. Atribut rasmning o'ziga emas, balki rasm tegining o'ziga biriktirilishi kerak. Bu js kodining noyob bo'lishiga imkon berishdir. Muqobil variant jamoa bo'ladi

LazyLoad: "ondemand"

Trace atributini shunday yozing

< img data- lazy = " images/slaid.jpg" >

Bunday slayderning o'ziga xosligi shundaki, ekranda faqat bitta slayd mavjud bo'lib, u almashtirilganda bosqichma-bosqich harakatlanadi. Effekt ko'rinishning silliq o'sishi printsipiga asoslanadi. Keyin birinchi soat segmenti tanlanadi, bu vaqt davomida birinchi slaydning ko'rinishi 0% dan 100% gacha o'zgaradi, bunda keyingi slayd ko'rinadi. Bunday slayder uchun skript shunday ko'rinadi

$(".fade" ). slick(( cheksiz: rost , tezlik: 400 , pasayish: rost , cssEase: "chiziqli" ) );

Slick - bugungi kunda mavjud bo'lgan eng ko'p qirrali va eng oddiy slayder. Slayderni sozlashning keng doirasi slayderlarni amalga oshirish yechimi bilan ma'qullanadi, bu, albatta, ushbu slayderning eng muhim afzalligi. Silliq slayderni sozlash

• Foydalanish imkoniyati - bu parametrning boshlang'ich qiymati rostga o'rnatiladi, bu slayder uchun navigatsiya tugmalarining ulanishini ko'rsatadi - oldinga va orqaga o'qlar va tugmalarni nuqta sifatida ko'rsatadi.
• adaptiveHeight - u faqat bitta slayder bilan cheklangan, unda asl idishning balandligi slayderning balandligiga qarab o'zgaradi. Kobning onglari hech qanday aloqaga ega emas.
• autoplay - o'qituvchi yordamisiz avtomatik rejimda slaydlarni takrorlashni sozlaydi. Ushbu parametrning standart qiymati noto'g'ri.
• autoplaySpeed ​​– bu parametr avtomatik ijroga qoʻshimcha boʻlib, slaydni avtomatik oʻynashgacha boʻlgan vaqtni belgilaydi. Buning uchun dastlabki qiymat 3000 millisekund.
• strelkalar - oldinga va orqaga o'qlarni slayderga ulaydi. Tashqi uslublarning qo'shimcha jadvalidan foydalanib, siz ushbu o'qlarning joylashishini va ko'rinishini o'zgartirishingiz mumkin.
• asNavFor - qo'shimcha identifikator va sinf yordamida ikkita slayder o'rtasida navigatsiya havolasini kiritadi. Makkajo'xori qobig'ida parametr nol qiymatga ega.
• prevArrow - old slaydni yuqoriga ko'taradigan standart navigatsiya o'qining ko'rinishini o'zgartirishga imkon beradi.
• keyingiArrow - oldingi parametrning funktsiyasiga o'xshash, lekin slaydni oldinga siljitadigan o'q vazifasini bajaradi.
• centerMode - joriy slaydni inklyuziya parametridan boshlab Otaning konteynerining markazi sifatida o'rnatadi.
• centerPadding - oqim slaydni markaziy rejimda (old parametr) ko'rsatilganda, bu slayd uchun ichki to'ldirishni o'rnatadi, bu oqim slaydni vizual ravishda kattalashtirishga imkon beradi.
• cssEase - silliq yoki keskin bo'lishi mumkin bo'lgan rasmlarni aralashtirish uchun animatsiyani ta'minlaydi. "Osonlik" standart qiymatini keltiradi.
• customPaging - slayder ko'rinishiga maxsus shablonni kiritish imkonini beradi.
• nuqtalar - o'tish nuqtalarini bog'laydi va yuvish stantsiyasida qoladi.
• sudrab olinadigan - ayiqni siqib chiqarayotganda sudrab olinadigan slaydlar imkoniyatini beradi. Keyin, agar siz sichqoncha kursorini slayder ustiga olib borib, uni siqib, harakatlantirsangiz, slayd oldinga siljiydi.
• fade - aralashtirish paytida slaydni o'chirish effektini, animatsiya effektini yaratadi.
• focusOnSelect - vazifalarni slayder elementiga qaratadi.
• easing - tasvirlar almashtirilganda maxsus animatsiya rejimini o'rnatish imkonini beradi.
• edgeFriction - qolgan elementda slaydlarni aralashtirishni tebranish. Bu, ayniqsa, to'g'ri, chunki slayder aylanmaydi.
• cheksiz - slayd-shouni aylantiradi. Bu shuni anglatadiki, siz slayd-shouning qolgan rasmlarini remiks qilganingizda, u paydo bo'la boshlaydi.
• initialSlide – slayd-shou boshlanadigan tasvirni bildiradi. Shundan so'ng, boshlash uchun slayder birinchi rasmni tanlaydi.
• lazyLoad - keyingi slaydlarni yuklash rejimini o'rnatish imkonini beradi. Moslashtirish uchun faqat ikkita qiymat mavjud: "talab" va "progressiv", qolgan qiymatlar esa moslashtirish uchun.
• pauseOnHover - sichqoncha kursori slayder korpusi ustida turganda slaydlarni aylantirishni to'xtatadi. Buning sababi, slaydlarni avtomatik aralashtirish ko'rsatilgan.
• pauseOnDotsHover - sichqoncha kursori nuqta o'tkazgichlar ustida turganda slaydlarni aylantirishni to'xtatadi. Buning sababi, slaydlarni avtomatik aralashtirish ko'rsatilgan.
• respondTo - brauzer oynasining kengligini o'zgartirish reaktsiyasini ishga tushiradi. Uchta qiymat mavjud: "oyna", "slayder" yoki "min".
• sezgir - slayder sozlamalarini ekran kengligiga moslashtirish imkonini beradi. Bu oldingi sozlashdan farq qiladi, chunki kenglik chegaralari aniq piksel qiymatlariga tayinlangan. Mobil qurilmalar uchun moslashtirilgan tartib uchun Vikorist.
• slidesToShow - ko'rinadigan joyda ko'rsatiladigan rasmlar sonini belgilash imkonini beradi. Dastlab bitta slayd ko'rsatiladi va boshqa qiymatlar o'zgarishi mumkin.
• slidesToScroll - slayderga almashtirishda qancha tasvirni o'zgartirish kerakligi haqida xabar beradi.
• tezlik - slaydlarni aralashtirishga olib keladigan tezlikni o'rnatadi.
• variableWidth - slayder konteynerlarining kengligini ko'rsatiladigan teri rasmining kengligiga moslashtiradi.

UPD: Men ushbu dars uchun slayder yaratishga harakat qildim va bu unchalik yaxshi emasligi ma'lum bo'ldi.
Men ko'proq qo'shaman.

1. Bu yerda https://github.com/kenwheeler/slick omborini tekshiring
2. Index.html faylida, ochilgan fayldan oldin, slayder uslublarini qo'shing:

Yopishdan oldin biz skriptlarni kiritamiz

Ushbu slayder shriftlarni talab qiladi. Slayder jildidagi shriftlar papkasi loyihaning CSS jildiga joylashtirilishi kerak.
Va slayder papkasida siz kichik ajax-loader.gifni bilishingiz kerak va slick-theme.css faylida yangisiga yo'lni yozing.

3. Endi diva slayder o'ramiga sinf tayinlangan, masalan, bir nechta elementli
script.js faylida esa kodni yozamiz

$(hujjat).ready(funksiya())(
$(".multiple-element").slick((
avtomatik ijro: yolg'on,
avtomatik ijro tezligi: 6000,
o'qlar: rost,
cheksiz: rost,
nuqta: rost,
CenterMode: rost,
Ko'rsatish uchun slaydlar: 3,
SlidesToScroll: 1
});
});

4. Slayder allaqachon ishlamoqda. Faqat o'qlarning o'qi ko'rinmaydi, chunki slayderning chegaralari orqasida yoqimsiz hid mavjud va slayderning kengligi butun ekranni qoplaydi. O'qlar slick-theme.css faylida topiladi va kirishlar o'zgartiriladi, shunda o'qlar slayderning o'rtasida emas, o'rtasida joylashgan.

5. Yaxshi. Endi, mening fikrimcha, slayderning markaziy slaydni buzishda aybdor.
kodga yozish uchun nima yetarli ekanligini yozing

$(".middle").slick((
CenterMode: rost,
//Oqim slaydni markazga qo'ying
centerPadding: "50px",
// biroz aniqroq slayd
Ko'rsatish uchun slaydlar: 3
//ko'rib chiqish uchun ko'rinadigan 3 ta slayd
});

Markaziy slayderning hajmini oshirish uchun. Aslida, bu usul ishlamaydi
Markaziy slaydni uslub bilan yaxshilandi
.slick-center(
fon rangi: #8cc63f;
transform: masshtab(1.3);
}

Hammaga salom va bugun men sizga juda ajoyib va ​​oddiy slayder - silliq haqida gapirib beraman.

Saytga o'ting http://kenwheeler.github.io/slick/ U erda siz silliq slayder robotining ko'plab ilovalarini topishingiz mumkin. Ushbu slayder aslida juda ko'p turli effektlarga ega va sichqoncha bilan aylanadi. Tobto. Siz sichqonchaning chap tugmasi bilan slayderning istalgan elementini bosishingiz va sichqoncha yordamida slayderni chap yoki o'ng qo'l bilan orqaga qaytarishingiz mumkin. Bu funksiya kompyuterlar uchun to'liq foydali emas, balki smartfon va planshetlarda - xuddi shunday!

Shunday qilib, uni ulash uchun ushbu saytdan fayllarni yuklab oling. Endi biz HTML-ni yaratishimiz va jQuery yordamida kerakli komponentlarni ulashimiz mumkin, chunki... Vikory slayderi o'z ishi uchun ushbu kutubxonani o'z ichiga oladi.

sizning tarkibingiz
sizning tarkibingiz
sizning tarkibingiz

Uslublarni ulash

skriptlarni yoqish

Slayderni ishga tushirish uchun skript tegiga quyidagilarni yozing:

$(".sizning sinfingiz").slick((
sozlash nomi: sozlash qiymati
});
});

Tugallangach, html faylingiz quyidagicha ko'rinadi:

Silliq

sizning tarkibingiz
sizning tarkibingiz
sizning tarkibingiz

$(hujjat).ready(funksiya())(
$(".sizning sinfingiz").slick((
sozlash nomi: sozlash qiymati
});
});

Ushbu slayderda siz o'zingiz sozlashingiz mumkin bo'lgan bir qator sozlamalar mavjud. Ularning barchasini jadvaldagi sahifaning pastki qismida joylashgan o'sha saytda topishingiz mumkin. Ob'ektda ishga tushirish uchun ularning ko'rsatmalarini o'rnating.

$(hujjat).ready(function())( $(".sizning sinfingiz").slick(( autoplay: true; )); ));

Kimning dumbalariga slaydlarni avtomatik ravishda yoqish mumkinligi aytilgan.

Bundan tashqari, siz ko'rib turganingizdek, slayderni o'rnatish va sozlash juda oson, biroq u ajoyib nutqlarni amalga oshirish imkonini beradi. Sizning hurmatingiz va shvedlarga rahmat!

silliq - turli ko'rinishlarda karuselning funksionalligi uchun yanada keng qamrovli yechim. Namoyishlar, odatiy variantlar va nashrlarni ko'rish/olish mumkin.

Arizangizni yuboring

Slick-ning asosiy konfiguratsiyasi bir qator skriptlar, bir qator uslublar va oddiy shriftni o'z ichiga oladi. Men qisqartirilgan versiyadan foydalanmoqdaman:

• slick.min.js (minimallashtirish)
• slick.css (+ uslublarni tozalash mumkin)
• slick-theme.css (+ uslublarni tozalash mumkin)

Uslublar, sumka uchun bittaga birlashtirilishi mumkin.
Men silliq shriftni kattaroq FontAwesome bilan almashtiryapman

Asosiy karusel Takrorlash bloki

Karuselning asosiy funksionalligi div class="multiple-items" tomonidan o'rnatiladi. div class="carousel" faqat karusel yozuvlarini aniqlash uchun kerak.

Skriptni ishga tushirish skripti

$(document).ready(function() ( $(".multiple-items").slick(( //cheksiz: rost, //aylanayotgan avtomatik ijro: true, slidesToShow: 3, slidesToScroll: 3 )); ) );

Slick-slider (kenglik: 100%; float: chap;).slick-slide (kursor: ko'rsatgich;).bir nechta elementli .slick-slide (chekka: 0 15px;).karusel (to'ldirish: 0 3%; float: chap;width:100%;box-sizing:border-box;) /* woocommerce mahsulotlari uchun */ .carousel .woocommerce ul.products li.product (chekka: 1em 0 1.992em 0; eni: 100%;)

Woocommerce mahsulotlari uchun karusel

Yangilangan versiya

Karusel uchun mahsulotlarni ko'rsatishdan bir necha daqiqa o'tgach (! Universal yechim emas, turli tartib variantlari boshqacha ko'rinishi mumkin):

Karusel skriptlaridan foydalanganda tartib buzilishlari yuzaga keladi. Oqim tartibida karuselni kesuvchi kob uslublarini yaratishimiz mumkin:

Bir nechta element (displey: flex !important; flex-wrap: wrap; margin-bottom: 25px;).multiple-element img ( -moz-backface-visibility: visible; -webkit-backface-visibility: visible; backface-visibility : visible; ) .slick-list (chegara: 0 -1px 0 0 !muhim; to‘ldirish: 0 1px 0 0 !muhim; kenglik: 100%;) .slick-track (chegara: qattiq #e9eaec; chegara kengligi: 0 0 0 1px; displey: flex !muhim; toʻldirish-pastki: .1rem;).karusel .mahsulot (chegara: qattiq #e9eaec; hoshiya kengligi: 1px 1px 1px 0; fon: #fff; : yoʻq, matnni tekislash: markaz;pozitsiya: nisbiy; chekka-pastki: -.1rem; balandlik: avtomatik; ) .bir nechta element > .mahsulot (kengligi: 25%;

Ko'rsatib, tasvir uchun Power backface, chunki Agar siz yashirindan mahrum qilmoqchi bo'lsangiz, koridor yorliqlarining hidini qayta o'rashda.

Karuselning moslashuvchanligi

Skript turli ekran o'lchamlari uchun sozlanishi mumkin. Shu maqsadda, sezgir parametrlar sozlamalarda ko'rsatilgan

Javob beruvchi: [ ( uzilish nuqtasi: 1280, sozlamalar: ( slidesToShow: 4, slidesToScroll: 4, ) ), ( uzilish nuqtasi: 1024, sozlamalar: ( slidesToShow: 3, slidesToScroll: 3, ) ) ( ( uzilish nuqtasi: : 2, deSc:li ) ) ), ( uzilish nuqtasi: 480, sozlamalar: ( slidesToShow: 1, slidesToScroll: 1 ) ) ]

Yoki uni alohida-alohida yoqing - sozlamalar: "slick"

Silliq slayder

Qolgan vaqtlarda men asosiy slayderni slick asosida quraman. Bu katta muammo emas - sahifa bosilganda, barcha slaydlar bir necha soniya davomida ko'rsatiladi va keyin katlanır. Men buni shunday yashirdim:

Bitta slayddan tashqari hamma narsa ko'rinmaydi:

Slick-track > div:nth-child(2) img (displey: blok !important;) #index-slider img (displey: yo‘q;)

Va sahifa jalb qilinganda, yana bir narsa eshitiladi:

JQuery(hujjat).ready(funksiya())( jQuery("#index-slider img").css("displey", "blok"); ));

Slaydlarni takomillashtirish

Slick yana bir foydali funktsiyani qo'shadi, lazyload(). Skriptga faqat lazyLoad: 'ondemand' kuchini qo'shishingiz kerak. Men rasmning oldingi qismini o'zgartiraman:

Yoki siz ham shunday deyishingiz mumkin:

">

Va slaydlar darhol jozibali bo'lishi uchun lazyLoad quvvatini yozish kerak: "progressive"

Standart tasvir butunlay to'g'ri ishlamayapti, men lazyload bilan ulanishni tekshirishni maslahat beraman.

Slayderning mobil versiyasi
Mobildan ko'proq narsani olishingiz mumkin. versiyasi, slayderning balandligi, bu tasvirning qirralarini ko'rsatadi va tasvir kattaroq bo'ladi:

@media ekrani va (maksimal qurilma kengligi: 480px) ( #index-slider, .hotel-photos (balandlik: 200px;).slick-list, .slick-track (balandlik: 100%;) #index-slider img , .hotel-photos img (balandlik: 100%; ob'ektga mos: qopqoq;) )

ob'ektga mos: qopqoq; - Ko'pgina brauzerlar tomonidan qo'llab-quvvatlanadigan kuchli CSS 3

Galereya

Yaqinda saytlardan birida men galereyadagi Slick vikoristanga hurmat qozondim. O'ziga xosligi shundaki, galereya tasvirlari ekranning chetlariga (butun ekranda saytdan bir milya) cho'zilgan.

Buni amalga oshirish uchun konteynerga (.s2) slayderni (#index-slider) joylashtirishingiz va quyidagi uslublarni qo'shishingiz kerak:

S2 (to‘ldirilishi: yashirin; displey: blok;) #index-slider (maksimal kenglik: 1000px; chekka: 0 avtomatik;) .s2 .slick-list (to‘sh: ko‘rinadigan;) #index-slider .slick-slide img ( maksimal kenglik: 800px; chekka: 0 avtomatik;)

yoki undan ham oddiyroq:

Bunday galereyani yaratish uchun siz faqat ikkita uslubni kiritishingiz kerak:

#index-slider (maksimal kenglik: 1280px; chekka: 0 avtomatik;) #index-slider .slick-list (to'lib ketish: ko'rinadigan;)

Noutbuklar