jQuery номын сангийн доорх гулсагчийг суулгаж буй дүр зураг. Энэхүү залгаас нь слайд шоу үүсгэх залгаасуудын үнэлгээний хамгийн өндөр газруудын нэгийг эзэлдэг.
Энэ газрыг гавъяатай эзэлсэн тул та түүнтэй холбогдож, вэб бичигчийнхээ сан хөмрөгт хийх хэрэгтэй. Суулгац болон төрөл бүрийн роботын програмуудын тайлбар бүхий залгаасын нүүр хуудсыг эндээс олж болно - slick Demos. Plugin-д бүх зүйл байхгүй - энэ нь агуулахад бүх удирдлагын функцтэй, хөнгөн жинтэй, суулгахад хялбар, HTML зохион байгуулалт нь энгийн бөгөөд семантик юм. Гөлгөр залгаас нь тохиргооны файлд хялбархан холбогдож болох шинэ тохиргооны хамт ирдэг.
Гөлгөр залгаасыг холбож байнаАжиллаж буй төсөлд гөлгөр залгаасыг холбох үйл явц нь маш энгийн бөгөөд та тохиргоо зөв эсэхийг шалгах хэрэгтэй.
Гөлгөр доорх тэмдэглэгээг бий болгохГөлгөр залгаасын HTML зохион байгуулалт нь семантик бөгөөд энгийн. Тохиромжтой ангийн нэрсийн жагсаалтыг гаргахад хангалттай. Slick залгаасын албан ёсны хуудсан дээрх Эхлэх хэрэглэгч нь дараах HTML тэмдэглэгээг харуулдаг:
HTML загвар дээр суурилсан үндсэн тэмдэглэгдсэн жагсаалт хэлбэрээр гулсагч үүсгэх миний оролдлого:
... амжилт авчирсангүй - slick plugin олоогүй! Магадгүй та CSS хэв маягийг ашиглан элементүүдийг өөрчилж болно
| 1 | ul |
| 1 | ли |
Дараагийн алхамд бид slick залгаасын архивыг татаж авах болно. Та хэд хэдэн аргаар мөнгө олох боломжтой. Эхнийх нь Go Get It хуудаснаас таныг уруу татах явдал юм. Эсвэл зохиогчийн GitHub хуудас руу орж залгаасын zip архивыг аваарай - slick GitHub. Аль ч тохиолдолд нэр бүхий архивыг устгана
Slick plugin-ийн бэлэн CSS загваруудыг HTML баримт бичигт холбох боломжтой.Хаагдах шошгын өмнөх HTML баримтын бие
| 1 |
Чухамдаа эхний хоёр мөрөнд jQuery-1.11.0 номын сан болон jQuery Migrate 1.2.1 залгаасыг CDN-ээр татаж авдаг. Гурав дахь залгаас
Бид залгаасыг эхлүүлэх скриптийг оруулсан болно: $(баримт бичиг). бэлэн (функц ()( $ (".slider") . slick (( цэгүүд: үнэн )); ));Подсумковын HTML зохион байгуулалт, CSS хүснэгтүүд болон JS скриптүүдийн холболт дараах байдалтай байна.
Би Google Chrome хөтчийн консол гэх мэт баялаг зүйлийн талаар мэдэхийг хүсч байна. Яагаад корисна байгаа юм бэ? Учир нь энэ нь надад гэнэт ажилладаг (хамгийн түрүүнд jqFancyTransitions залгаастай байсан - jqFancyTransitions Slider) бөгөөд скриптийг HTML баримт бичигт холбоход гарсан алдааг олж мэдэхэд тусалдаг. Орлуулшгүй зүйл!
Хөтөчийн хэрэглээ болон Chrome консолын ажиллагааг харуулахын тулд би өмнө нь үүсгэсэн хөтөч дээрээ index.html файлыг ажиллуулж байна.
Тэгээд юу гэж?! Уучлаарай, энэ бол гулсагч, танд зориулсан бүтээлүүд танд туслах уу? Төслийн албан ёсны вэбсайт болох Демо дээр ийм тод харуулсан тэд ямар гоо үзэсгэлэн вэ?! Гайхалтай - гэхдээ тийм ч байхгүй!
Хэхэ, би скриптийг холбохын тулд зөв нэвтэрсэн үү? За, би баримт бичгийг дахин нэг удаа үзэх болно ... Бүх зүйл зөв, гэхдээ энэ нь надад ажиллахгүй байна ... Магадгүй би индексийн хуудсыг дахин бичих хэрэгтэй болов уу? Энэ нь боломжтой, гэхдээ өөр өөр хувилбартай олон тооны "эсвэл магадгүй" байж болно.
Google Chrome хөтчийн консолыг нээгээд "Сүлжээ" таб руу орцгооё.
Энэ бол миний хуудсан дээр slick plugin ажиллахгүй байгаагийн гол шалтгаан юм! Зүгээр л jQuery 1.11.0 номын сан болон jQuery Migrate 1.2.1 залгаасыг CDN-ээр дамжуулан Chrome хөтчөөс татаж авах боломжгүй байсан. Хэрэв консол өөрөө биш байсан бол "шинжлэх ухааны арга"-аар "эвдрэл"-ийн шалтгааныг тогтоохын тулд хэдэн цаг, мэдрэлийг үрэх байсан бол энэ нь тодорхойгүй байна.
Хөтөч яагаад CDN-ээр файлуудыг татаж авч чадахгүй байгааг ойлгохын тулд би нэг минут хүлээж чадахгүй байна. Тиймээс би файлуудыг "гараар" татаж аваад дотооддоо холбох болно:
Би Google Chrome хөтчөөс index.html индекс хуудсыг дахин эхлүүлж байна... Гайхамшгийн тухай! Slick plugin нь дараахь зүйлийг хийдэг.
Зургууд автоматаар гүйлгэж, доод талд нь тохируулгын өмнө гөлгөр скриптээр үүсгэсэн хуудасны жагсаалтыг харж болно.
цэгүүд: үнэн, автоматаар тоглуулах: үнэн... тохиргооны файлд. Нэмж дурдахад, зургийг "гараар" урагш хойш эргүүлэх сумуудыг үүсгэсэн (энэ нь HTML хуудасны цагаан дэвсгэр дээр харагдахгүй). Гөлгөр залгаасын бусад тохиргоог албан ёсны хуудаснаас үзэх боломжтой - Тохиргоо.
ЖИЧ: Би өөрийн эхлүүлэх скриптийг гадаад JS файлд оруулахыг зөвлөж байна.
Би энэ өгүүллийг нэг энгийн шалтгаанаар бичээгүй юм - өгзөгний нарийвчлал, түүний бүтээлийн уян хатан байдлын үүднээс.
Гөлгөр залгаасыг засварлаж байнаОдоо би баруун талдаа бага зэрэг алдлаа - хуудасны элемент шалгагч (жишээ нь Firebug) үүсгэсний дараа би хуудасныхаа DOM модноос бидэнд хэрэгтэй элементүүдийн ангиллын нэрийг "татаж авсан" бөгөөд тэдгээрийг хялбархан засах боломжтой. CSS дүрэм:
их бие (арын дэвсгэр өнгө: цайруулах (#ccc, 5%)); .slider(өргөн: 300px; захын зай: 10px автомат; дэвсгэр: 5px; дэвсгэр өнгө: #ccc; хүрээ: 3px хатуу #000; @ include borde (3px) ); .slick-dots(доод: -30px ; ) ) )Би HTML баримт бичгийн биед зориулж бүтээдэг
Би дэвсгэр, бөөрөнхий ирмэг бүхий кордон, дэвсгэр дүүргэлтийг нэмнэ; Би үүнийг хажуу тийш нь төвлөрүүлж, бага зэрэг доошлуулна. Мөн толгод дээр бага зэрэг| 1 | .гулгамтгай цэгүүд |
Үр дүн нь гайхалтай:
Slick me залгаас үнэхээр амжилттай болсон. Суулгах, холбоход хялбар, слайд үзүүлэх замаар элемент үүсгэх, олон тооны өөр өөр тохиргоотой. Шинэ дүр төрхийг өөрчлөх олон янзын сонголтуудын хувьд та програмын хуудас - Демо руу очих боломжтой бөгөөд шаардлагатай болно. Мөн шаардлагатай бол шаардлагатай тодорхой оюун ухаанд дасан зохицох.
Кодлохдоо баяртай!
Сайн байцгаана уу, би та бүхэнд хөнгөн жинтэй, түгээмэл, суулгахад хялбар гэдгээ харуулсан сайтын гулсуурын талаар хэлэхийг хүсч байна. Энд та гулсагч, тойруулгатай холбоотой бүх зүйлийг хэрэгжүүлж болно. Plugin-ийг бүтээгчийн хэлснээр "танд хэрэгтэй хамгийн сүүлчийн тойруулга" бөгөөд үүнийг таны санаанаас үл хамааран нэг бүх нийтийн тойруулга гэж тайлбарлаж болно. Мөн энэ нь үнэн. Үүнд үндсэн гулсагчаас эхлээд хэд хэдэн эгнээ хүртэл гулсдаг дасан зохицох тойруулга хүртэл олон зүйл бий.
Энэхүү залгаасыг эхлэгч болон ахисан түвшний вэб уншигчдын аль алинд нь аюулгүй ашиглаж болно. Энэ бол бидний мэддэг бүх зүйлд маш хүчтэй өрсөлдөгч юм. Хайрцагнаас бид асар их даалгавартай хэрэгслийг ч авч болно.
Вэбсайтдаа гулсагч/тоглуур суулгахын тулд 3 энгийн алхам хийхэд л хангалттай.
Гөлгөр гулсагчийг суулгаж байна.Програм №1 (Slider)1. Krok - Скрипт болон залгаасын загваруудыг холбох.
html хуудаснууд.
$(баримт бичиг).бэлэн(функц())( $(".таны анги").slick(); ));
Та 1-р ажилд оруулсан кодын дараа биш, харин html хуудасныхаа шошгуудын хооронд холбогдох хэрэгтэй.
Энэ жишээнд бид нэг гол слайдтай тойруулгийн адил гулсагчийг хэрхэн суулгахыг харуулсан.
Доор та дээр дурдсан хүмүүсийн урд талын өгзөгийг гайхшруулж болно.
Өгзөг №2 (Карусель)Тойрог суурилуулахын тулд 2-р зүйл, 3-р зүйл бага зэрэг өөрчлөгдөхөөс бусад тохиолдолд өмнөх тайлбартай ижил зүйлийг хийх хэрэгтэй.
2. Croc - слайдерын HTML кодыг өөрөө оруулах.
Хэрэв та гулсагчийг өөрөө харуулахыг хүсвэл шошгуудын хооронд энэ кодыг оруулах шаардлагатай.
3. Croc – гулсагчийг эхлүүлэх.
$(баримт бичиг).ready(функц())( $(".таны анги").slick((хязгааргүй: үнэн, slidesToShow: 3, slidesToScroll: 3 )); ));
Мөн энэ програмд бид гулсагчийг тойруул (3 үндсэн слайдтай) болгон хувиргасан бөгөөд үүнд зориулж залгаасын зарим параметрүүдийг тохируулсан.
Та доорх жишээн дээр энэ тойруулгын ажлыг биширч болно.
Нийтдээ 3 ширхэгийг авсны дараа та өөрийн хэрэгцээнд зориулж тойруул эсвэл гулсагч сонгох боломжтой. Энэ гулсагчийн хувьд илүү олон боломжууд бий. Хэрэв танд хоол тэжээлтэй холбоотой ямар нэгэн бэрхшээл, асуудал байгаа бол тэднээс сэтгэгдэл дээр асуугаарай, би тэдэнд хурдан хариулахыг хичээх болно.
Бид өнгөрсөн долоо хоногийн багаас гулсагч скриптийг авсан
$ bower i slick.js
Та мөн үүнийг Google дээрээс олж мэдэх боломжтой - эхлээд http://kenwheeler.github.io/slick/ гэж асуугаарай.
Слайдерын давуу тал: мэдрэгчтэй үйл явдлуудыг дэмждэг, та тэдгээрийг утсан дээрээ хуруугаараа үзэх боломжтой- хариу үйлдэл үзүүлэхийг дэмждэг - та дэлгэцийн хэмжээнээс хамааран слайдын тоог тохируулах боломжтой: том дэлгэц дээр 4 слайд, дунд хэмжээтэй 2-3 слайд, утсан дээр нэг нэгээр нь үзэх боломжтой.
bower_components хавтсаас скрипт оруулах нь сайн туршлага юм
Мөн Bower програмын тусламжтайгаар скриптийг шинэчлэх үед код дахь хувилбарын дугаарыг дахин бичих шаардлагагүй тул Bower нь скриптүүдэд байнгын нэр өгдөг бөгөөд энэ нь шинэчлэгдсэн үед өөрчлөгдөхгүй.
Slick фолдерт ямар загварууд байдаг вэ: slick.css, slick.less, slick.theme.less, тэдгээрийг css-ээр хавтас руу хуулж, оруулах нь дээр. Хэрэв та тэдгээрийг байрнаас нь салгаж, гулсагчийн хэв маягт өөрчлөлт оруулбал скриптийг шинэчлэх үед бүх өөрчлөлт устах болно.
Бусад гулсагчаас ялгаатай нь жаазыг жагсаалтад биш, харин блок болгон байрлуулна.
1 2 3 4 5 6
Параметргүйгээр дарна уу. Параметргүй залгаас дээр дарахад хажуу талд нь нэг слайд болон навигацийн сумтай энгийн сонголтыг сонгож болно.$(".ганц зүйл"). гөлгөр ();
Олон слайд харуулах Аппликешн дээр бид гогцоотой гүйлгэхийн тулд "slick slider" параметрүүдийг тохируулж, навигацийн цэгүүдийг харуулахыг идэвхжүүлж, харуулах болон гүйлгэх слайдуудын тоог зааж өгсөн.$(".олон зүйл"). гөлгөр ((
хязгааргүй: үнэн,
// гулсагчийг давталт - үлдсэн слайдын дараа эхнийх нь цэгүүд орно: үнэн,
// слайдерын доор цэгүүдийг байрлуулж идэвхтэй слайдыг харуулна
SlidesToShow: 3,
//дэлгэцэн дээр харуулах слайдын тоо slidesToScroll : 1
//нэг удаад хэдэн слайд шатдаг
))) Төвлөрсөн горим Төвлөрсөн горимд идэвхтэй слайдыг төвд байрлуулна.
$(".төв"). гөлгөр ((
төвийн горим: үнэн,
SlidesToShow: 3,
});
Төв гулсуур нь "гулгамтгай төв" ангилалтай бөгөөд энэ нь өөр өөр дизайн хийх боломжтой гэсэн үг юм. Дасан зохицох чадвар Слайдер дээр та дэлгэцийн өргөнөөс хамааран слайдын тоог тохируулах боломжтой. Жишээлбэл, дэлгэцийн өргөн нь 600 пикселээс бага байх үед та зөвхөн 2 слайд харуулах хэрэгтэй бөгөөд тэдгээрийг нэг нэгээр нь холих хэрэгтэй. Энэ ордон иймэрхүү харагдах болно
$(".uncycle") . slick(( infinite: false , speed: 350 , // шатаж буй слайдын уян хатан байдлыг заанаToShow: 4 , // слайдуудыг харуулах ToScroll тоо: 2 , // нэг удаад хэдэн слайд шатаж байгааг харуулна: [ ( breakpoint: 600 , // аль дэлгэцийн өргөнийг заана, та тохируулгын тохиргоог идэвхжүүлэх хэрэгтэй: (slidesToShow: 2, slidesToScroll: 1, хязгааргүй: үнэн,))))));
Гөлгөр сэлгэх Стандарт гулсуурын тохиргоонд слайдын гэнэтийн өөрчлөлт гардаг. Нэмж дурдахад Slick функц нь слайдыг жигд өөрчлөх горимыг хангадаг. Үүнийг хийхийн тулд та зургийн замыг бичсэн өгөгдөл залхуу шинж чанар руу очих хэрэгтэй. Атрибутыг зураг дээр биш, харин зургийн шошгонд хавсаргах шаардлагатай. Энэ нь js кодыг өвөрмөц болгохын тулд юм. Альтернатив хувилбар нь баг байх болноLazyLoad: "ondemand"
Trace шинж чанарыг ингэж бичнэ үү
< img data- lazy = " images/slaid.jpg" >
Ийм гулсагчийн онцлог нь дэлгэцэн дээр зөвхөн нэг слайд байдаг бөгөөд энэ нь шилжих үед алхам алхмаар хөдөлдөг. Үр нөлөө нь харагдах байдлыг жигд нэмэгдүүлэх зарчим дээр суурилдаг. Дараа нь эхний цагийн сегментийг сонгох бөгөөд энэ үед эхний слайдын харагдах байдал 0% -иас 100% хүртэл өөрчлөгдөж, дараагийн слайд харагдах болно. Ийм гулсагчийн скрипт нь иймэрхүү харагдаж байна$(".фад") . slick(( хязгааргүй: үнэн , хурд: 400 , бүдгэрч: үнэн , cssEase: "шугаман" ) );
Slick бол өнөөгийн хамгийн уян хатан, энгийн гулсагч юм. Гулсагчийг тохируулах өргөн интервал нь гулсагчийг хэрэгжүүлэх шийдвэрт таатай байдаг бөгөөд энэ нь мэдээжийн хэрэг энэ гулсагчийн хамгийн чухал давуу тал юм. Гөлгөр гулсагчийг тохируулж байна- Хүртээмжтэй байдал - энэ параметрийн анхны утгыг үнэн гэж тохируулсан бөгөөд энэ нь гулсагч руу чиглүүлэх товчлууруудын холболтыг харуулж байна - урагш болон хойшхи сум, товчлууруудыг цэг болгон зааж байна.
- AdaptiveHeight - энэ нь зөвхөн нэг гулсагчаар хязгаарлагддаг бөгөөд анхны савны өндөр нь гулсагчийн өндрөөс хамаарч өөрчлөгддөг. Савны оюун ухаан ямар ч холбоогүй.
- автоматаар тоглуулах - багшийн тусламжгүйгээр слайдыг автомат горимд дахин тоглуулахыг тохируулна. Энэ параметрийн стандарт утга нь худал байна.
- autoplaySpeed – энэ параметр нь автоматаар тоглуулахад нэмэлт бөгөөд слайд автоматаар тоглуулахаас өмнөх хугацааг тохируулдаг. Үүний анхны утга нь 3000 миллисекунд юм.
- сумнууд - гулсагч руу урагш болон хойш чиглэсэн сумуудыг холбодог. Гадны хэв маягийн нэмэлт хүснэгтийг ашиглан та эдгээр сумны байрлал, харагдах байдлыг өөрчилж болно.
- asNavFor – нэмэлт танигч болон анги ашиглан хоёр гулсагч хооронд навигацийн холбоосыг оруулдаг. Эрдэнэ шишийн бүрхүүлд параметр нь тэг утгатай байна.
- prevArrow – урд талын слайд дээр гарч буй стандарт навигацийн сумны харагдах байдлыг өөрчлөх боломжийг танд олгоно.
- nextArrow – өмнөх параметрийн функцтэй төстэй боловч слайдыг урагшлуулах сумны үүрэг гүйцэтгэдэг.
- centerMode – оруулах параметрээс эхлэн одоогийн слайдыг Эцэгийн савны төв болгон засна.
- centerPadding – урсгалын слайдыг төвийн горимд (урд талын параметр) харуулах үед энэ нь тухайн слайдад зориулж дотоод дэвсгэрийг тохируулдаг бөгөөд энэ нь урсгалын слайдыг нүдээр томруулах боломжийг олгодог.
- cssEase - гөлгөр эсвэл огцом байж болох зургуудыг холих хөдөлгөөнт дүрсийг өгдөг. "Хялбар" гэсэн стандарт утгыг авчирдаг.
- customPaging – гулсагч харагдац руу тусгай загвар оруулах боломжийг танд олгоно.
- цэгүүд - холбогч цэгүүдийг холбодог бөгөөд угаалгын газар байрладаг.
- чирэх боломжтой - баавгайг шахах үед чирэх слайдыг идэвхжүүлдэг. Дараа нь та хулганы курсорыг гулсагч дээр аваачиж, түүнийг шахаж, хөдөлгөвөл слайд урагшлах руу шилжинэ.
- бүдгэрэх - холих явцад слайд бүдгэрэх, хөдөлгөөнт эффект үүсгэдэг.
- focusOnSelect – гулсагч элемент дээр даалгавруудыг төвлөрүүлдэг.
- easing – зураг солигдох үед тусгай хөдөлгөөнт горимыг тохируулах боломжийг танд олгоно.
- edgeFriction - үлдсэн элемент дээр слайдыг холих үед чичиргээ үүсгэдэг. Энэ нь ялангуяа гулсагч нь давтагдахгүй тул үнэн юм.
- хязгааргүй - слайд шоуг давтдаг. Энэ нь слайд шоуны үлдсэн зургуудыг дахин холиход зураг гарч эхэлнэ гэсэн үг юм.
- initialSlide – слайд шоу эхлэх зургийг заана. Дараа нь эхлүүлэх гулсагч нь эхний зургийг сонгоно.
- lazyLoad - дараагийн слайдуудыг ачаалах горимыг тохируулах боломжийг танд олгоно. Тохируулахад зөвхөн 2 утгыг ашиглах боломжтой: "ondemand" ба "progressive", үлдсэн утгууд нь өөрчлөхөд зориулагдсан.
- pauseOnHover – хулганы курсор гулсагчийн бие дээр гүйлгэж байх үед слайдыг гүйлгэхийг түр зогсооно. Учир нь слайдыг автоматаар холихыг зааж өгсөн болно.
- pauseOnDotsHover - хулганы курсорыг цэгээр холбогч дээр гүйлгэх үед слайдыг гүйлгэхийг түр зогсооно. Учир нь слайдыг автоматаар холихыг зааж өгсөн болно.
- ResponsiveTo - хөтчийн цонхны өргөнийг өөрчлөх урвалыг өдөөдөг. Гурван утгыг авах боломжтой: "цонх", "гулсагч" эсвэл "мин".
- responsive - гулсагчийн тохиргоог дэлгэцийн өргөнд тохируулах боломжийг танд олгоно. Энэ нь өмнөх тохируулгаас ялгаатай нь өргөний хил хязгаарыг яг пикселийн утгуудад өгдөг. Хөдөлгөөнт төхөөрөмжүүдийн дасан зохицох загварт зориулсан Vikorist.
- slidesToShow – харагдах хэсэгт харуулах зургийн тоог тохируулах боломжийг танд олгоно. Эхлээд нэг слайдыг харуулах ба бусад утгыг өөрчлөх боломжтой.
- slidesToScroll – шилжих үед хэдэн зургийг өөрчлөх шаардлагатайг слайдерт мэдэгдэнэ.
- хурд – слайдыг холиход хүргэдэг хурдыг засдаг.
- variableWidth – гулсагч савны өргөнийг дэлгэцийн зургийн өргөнтэй тохируулна.
Би нэмж оруулах болно.
1. Хадгалах газрыг https://github.com/kenwheeler/slick эндээс үзнэ үү
2. index.html файлд нээгдэх файлын өмнө гулсагчийн хэв маягийг нэмнэ үү:
Хаахаасаа өмнө бид скриптүүдийг оруулдаг
Энэ гулсуурт фонт шаардлагатай болно. Слайдер хавтсаас фонтуудын хавтсыг төслийн css хавтсанд байрлуулах ёстой.
Мөн гулсагч хавтсанд та бяцхан ajax-loader.gif-г мэдэх хэрэгтэй бөгөөд slick-theme.css файлд шинэ рүү очих замыг бичих хэрэгтэй.
3. Одоо гулсагч ороосон diva-д ангилал оноогдсон, жишээлбэл, олон зүйлтэй.
Мөн script.js файлд бид код бичдэг
$(баримт).бэлэн(функц())(
$(".олон зүйл").slick((
автоматаар тоглуулах: худал,
автоматаар тоглуулах хурд: 6000,
сум: үнэн,
хязгааргүй: үнэн,
цэгүүд: үнэн,
Төвийн горим: үнэн,
SlidesToShow: 3,
SlidesToScroll: 1
});
});
4. Слайдер аль хэдийн ажиллаж байна. Зөвхөн сумны тэнхлэг нь харагдахгүй, учир нь гулсагчийн хилийн цаана өмхий үнэртэй, гулсуурын өргөн нь дэлгэцийг бүхэлд нь хамардаг. Сумнууд нь slick-theme.css файлаас олддог бөгөөд оролтуудыг өөрчилсөн бөгөөд сумнууд нь гулсагчийн дунд байрлаж, голд биш байна.
5. Сайн байна. Одоо миний бодлоор гулсагчийн төв гулсуур нь эвдэрсэн буруутай юм.
кодонд бичихэд хангалттайг бичнэ үү
$(".дунд").slick((
Төвийн горим: үнэн,
//Урсгалын слайдыг голлуул
centerPadding: "50px",
// арай илүү нарийвчлалтай слайд
SlidesToShow: 3
//харагдах боломжтой 3 слайд
});
Төв гулсуурын хэмжээг нэмэгдүүлэх. Бодит байдал дээр энэ арга нь ажиллахгүй байна
Төв слайдыг загвараар сайжруулсан
.slick-center(
дэвсгэр өнгө: #8cc63f;
хувиргах: масштаб(1.3);
}
Сайн байцгаана уу, өнөөдөр би танд маш энгийн бөгөөд энгийн гулсуурын тухай ярьж байна.
Сайт руу очно уу http://kenwheeler.github.io/slick/Тэнд та гулсах роботын олон програмыг олох боломжтой. Энэ гулсагч нь үнэндээ маш олон янзын эффекттэй бөгөөд хулганаар гүйлгэдэг. Тобто. Та гулсагч дээрх дурын элемент дээр хулганы зүүн товчийг дарж, хулганыг ашиглан гулсагчийг зүүн эсвэл баруун гараараа эргүүлж болно. Энэ функц нь компьютерт бүрэн ашиг тустай биш, харин ухаалаг утас, таблет дээр - яг адилхан!
Тиймээс үүнийг холбохын тулд энэ сайтаас файлуудыг татаж аваарай. Одоо бид jQuery ашиглан HTML үүсгэж, шаардлагатай бүрэлдэхүүн хэсгүүдийг залгаж болно, учир нь... Vikory гулсагч нь энэ номын санг өөрийн ажилд зориулж агуулна.
таны агуулга
таны агуулга
таны агуулга
Загваруудыг холбох
Би скриптүүдийг идэвхжүүлнэ
Гулсагчийг эхлүүлэхийн тулд скрипт таг дээр дараах зүйлийг бичнэ үү.
$(".таны анги").slick((
тохиргоо-нэр: тохиргоо-утга
});
});
Дууссаны дараа таны html файл иймэрхүү харагдах болно:
Гөлгөр
таны агуулга
таны агуулга
таны агуулга
$(баримт).бэлэн(функц())(
$(".таны анги").slick((
тохиргоо-нэр: тохиргоо-утга
});
});
Энэ гулсагч нь та өөрөө тохируулах боломжтой хэд хэдэн тохиргоотой. Та хүснэгтийн хуудасны доод талд байгаа яг тэр сайтаас бүгдийг нь олж мэдэх боломжтой. Объект дээр эхлүүлэх зааварчилгааг тохируулна уу.
$(баримт бичиг).бэлэн(функц())( $(".таны анги").slick(( автоматаар тоглуулах: үнэн; )); ));
Хэний өгзөг нь автоматаар гулсуурыг шатааж чадна гэж хэлсэн.
Түүнчлэн, таны харж байгаагаар гулсагчийг суулгах, тохируулахад маш хялбар боловч энэ нь танд гайхалтай илтгэл тавих боломжийг олгодог. Шведчүүдэд хүндэтгэл үзүүлсэнд баярлалаа!
slick - янз бүрийн илрэлүүдээр тойруулалтын функциональ байдлын илүү цогц шийдэл. Демо, ердийн сонголтууд, нийтлэлүүдийг үзэх/авах боломжтой.
Өргөдлөө илгээнэ үүSlick-ийн үндсэн тохиргоонд хэд хэдэн скрипт, хэд хэдэн загвар, энгийн фонт орно. Би тайруулсан хувилбарыг ашиглаж байна:
- slick.min.js (багасгах)
- slick.css (+ хэв маягийг цэвэрлэж болно)
- slick-theme.css (+ хэв маягийг цэвэрлэж болно)
Ачаа тээшний хэв маягийг нэг болгон нэгтгэж болно.
Би гөлгөр фонтыг том FontAwesome-ээр сольж байна
Carousel-ийн үндсэн функцийг div class="multiple-items"-ээр тохируулдаг. div class="carousel" нь зөвхөн тойруулалтын оруулгуудыг тодорхойлоход хэрэгтэй.
Скрипт эхлүүлэх скрипт
$(баримт бичиг).ready(функц() ( $(".олон зүйл").slick(( //хязгааргүй: үнэн, // гүйлгэж автоматаар тоглуулах: үнэн, slidesToShow: 3, slidesToScroll: 3 )); ) );
Slick-slider (өргөн: 100%; хөвөх: зүүн;).slick-slide (курсор: заагч;).олон зүйл .slick-slide (маржин: 0 15px;).carousel (pading: 0 3%; float: зүүн;өргөн:100%;хайрцагны хэмжээ: хилийн хайрцаг;) /* woocommerce бүтээгдэхүүний хувьд */ .carousel .woocommerce ul.products li.product (маржин: 1em 0 1.992em 0; өргөн: 100%;)
Woocommerce бүтээгдэхүүний тойруулга
Карусельд зориулсан бүтээгдэхүүнийг үзүүлснээс хойш хэдхэн минутын дараа (! Бүх нийтийн шийдэл биш, байршлын өөр сонголтууд өөр өөр харагдаж болно):
Карусель скриптийг ашиглах үед байршлын гажуудал үүсдэг. Бид урсгалын зохион байгуулалт дотор тойруулгыг тайрах кобын хэв маягийг үүсгэж болно:
Олон зүйл (дэлгэц: flex ! чухал; flex-wrap: боох; захын-доод: 25px;).олон зүйл img ( -moz-backface-visibility: visible; -webkit-backface-visibility: visible; backface-visibility : харагдахуйц; ) .slick-list (марж: 0 -1px 0 0 !чухал; дүүргэлт: 0 1px 0 0 ! чухал; өргөн: 100%;) .slick-track (хил: хатуу #e9eaec; хүрээний өргөн: 0 0 0 1px; дэлгэц: flex ! чухал; padding-boottom: .1rem;).carousel .product ( хүрээ: хатуу #e9eaec; хүрээний өргөн: 1px 1px 1px 0; дэвсгэр: #fff; : байхгүй, текстийг зэрэгцүүлэх: төв, байрлал: харьцангуй; захын доод: -.1rem; өндөр: автомат; ) .олон зүйл > .бүтээгдэхүүн (өргөн: 25%;
Учир нь зааж өгснөөр зурагны арын нүүр царай Хэрэв та хонгилын шошгон дээрх өмхий үнэрийг эргүүлэхдээ нуугдмал байдлыг арилгахыг хүсч байвал.
Карусель дасан зохицох чадварСкриптийг янз бүрийн дэлгэцийн хэмжээгээр тохируулж болно. Энэ зорилгоор хариу үйлдэл үзүүлэх параметрүүдийг тохиргоонд зааж өгсөн болно
Хариуцлагатай: [ ( таслах цэг: 1280, тохиргоо: ( slidesToShow: 4, slidesToScroll: 4, ) ), ( таслах цэг: 1024, тохиргоо: ( slidesToShow: 3, slidesToScroll: 3, ) ) ( ( таслах цэг: : 2, deScroll To ) ) ), ( таслах цэг: 480, тохиргоо: ( slidesToShow: 1, slidesToScroll: 1 ) ) ]
Эсвэл зүгээр л тусад нь асаана уу - тохиргоо: "товсыг арилгах"
Гөлгөр гулсагчҮлдсэн хугацаанд би үндсэн гулсагчийг slick дээр тулгуурлан бүтээдэг. Энэ нь тийм ч том асуудал биш юм - хуудсыг дарахад бүх слайдууд хэдхэн секундын турш гарч ирэх бөгөөд дараа нь нугалж болно. Би үүнийг ингэж далдалсан:
Нэг слайдаас бусад бүх зүйл үл үзэгдэх болно:
Slick-track > div:nth-child(2) img (дэлгэц: блок ! чухал;) #index-slider img (дэлгэц: байхгүй;)
Хуудсыг татахад өөр зүйл сонсогдох болно:
JQuery(document).ready(function())( jQuery("#index-slider img").css("дэлгэц", "блок"); ));
Слайдуудыг сайжруулах
Slick нь өөр нэг ашигтай функцийг нэмдэг, lazyload(). Та зөвхөн lazyLoad: 'ondemand'-ын хүчийг скриптэд нэмэх хэрэгтэй. Би зургийн нүүрийг өөрчилсөн:
Эсвэл та үүнийг дараах байдлаар хэлж болно.
">
Слайдууд нэн даруй сэтгэл татам болохын тулд lazyLoad-ийн хүчийг бичих шаардлагатай: 'progressive'
Стандарт зураг нь бүрэн зөв ажиллахгүй байгаа тул залхуу ачаалалтай холболтыг шалгахыг зөвлөж байна.
Слайдерын гар утасны хувилбар
Та гар утаснаас илүү ихийг авах боломжтой. хувилбар, гулсагчийн өндөр нь зургийн ирмэгийг харагдуулах бөгөөд зураг илүү том болно:
@media дэлгэц болон (хамгийн их төхөөрөмжийн өргөн: 480px) ( #index-slider, .hotel-photos (өндөр: 200px;).slick-list, .slick-track (өндөр: 100%;) #index-slider img , .hotel-photos img (өндөр: 100%; объектод таарах: бүрээс;) )
объектод тохирох: бүрхэвч; - Ихэнх хөтчүүд дэмждэг хүчирхэг CSS 3
ГалерейСаяхан нэг сайт дээр би галерей дахь Slick vikoristan-д хүндэтгэлтэй хандсан. Онцлог шинж чанар нь галерейн зургууд нь дэлгэцийн ирмэг хүртэл (бүхэл бүтэн дэлгэц дээрх сайтаас нэг миль) хүртэл үргэлжилдэг.
Үүнийг хэрэгжүүлэхийн тулд та контейнер (.s2) дээр гулсагч (#index-slider) байрлуулж, дараах загваруудыг нэмэх хэрэгтэй.
S2 (халих: далд; дэлгэц: блок;) #index-slider (хамгийн их өргөн: 1000px; захын зай: 0 автомат;) .s2 .slick-list (халих: харагдахуйц;) #index-slider .slick-slide img ( хамгийн их өргөн: 800px; захын зай: 0 автомат;)
эсвэл бүр энгийн:
Ийм галерей үүсгэхийн тулд та ердөө 2 хэв маягийг оруулах хэрэгтэй.
#index-slider (хамгийн их өргөн: 1280px; захын зай: 0 auto;) #index-slider .slick-list (халих: харагдахуйц;)
Зөөврийн компьютерууд
