Өөрийн сайт дээрх олон хүмүүс гулсагчийг харахыг хүсдэг - эдгээр нь нэг контентын элементийг дэлгэцэн дээр харуулах блокууд бөгөөд тодорхой хугацааны дараа энэ агуулгыг нөгөө рүү өөрчилдөг. Мэдээжийн хэрэг вэб хөгжүүлэгч бүр HTML, CSS болон JavaScript ашиглан гулсагч үүсгэх боломжтой боловч энэ нь үргэлж утгагүй байдаг. Интернет дээр таны амьдралыг хөнгөвчлөх, сайтыг илүү сэтгэл татам болгох олон бэлэн шийдлүүд байгаа хэдий ч та маш их цаг зарцуулах болно. Энэ нийтлэл нь Owl Carousel хэмээх эдгээр шийдлүүдийн нэг дээр анхаарлаа хандуулах болно. Энэ гулсагчийг тохируулах нь маш энгийн тул анхлан суралцагч ч үүнийг даван туулж чадна. Одоо та энэ гулсагч гэж юу болохыг, мөн бусад чухал мэдээллийг олж мэдэх болно. Owl Carousel-г тохируулах нь алхам алхмаар үйл явц тул та энэ материалыг зөвхөн дарааллаар нь судлах хэрэгтэй.
Энэ юу вэ, яагаад энэ гулсагчийг сонгох ёстой вэ?
Owl Carousel, түүний тохиргоог энэ нийтлэлд авч үзэх болно, энэ нь таны хуудсан дээр үзэсгэлэнтэй, тохиромжтой гулсагч нэмж өгдөг маш үр дүнтэй залгаас бөгөөд энэ нь таны сайт дээрх ажлыг ихээхэн хөнгөвчлөх болно.маш их цаг хугацаа, хүчин чармайлт, мөнгө хэмнэх. Вэб дээр маш олон гулсагч байдаг тул энэ нэмэлт өргөтгөлийн давуу тал нь юу вэ? Үнэн хэрэгтээ энэ гулсагч нь танд өөрийн хуудсыг өвөрмөц, давтагдашгүй болгох боломжийг олгодог олон арван тохируулгын сонголтыг санал болгодог. Энэ нь вэб хөтчийн бүх хувилбар дээр ажиллах боломжтой бөгөөд WordPress болон бусад алдартай CMS-тэй хялбархан холбогдож болно. Ерөнхийдөө энэ гулсагч нь маш их давуу талтай тул та түүний талд сонголт хийх нь гарцаагүй. Гэхдээ та Owl Carousel-г тохируулж эхлэхээс өмнө энэ залгаасыг ачаалах шаардлагатай хэвээр байна.
Татаж авах
Owl Carousel 2-ыг компьютер дээрээ татаж аваагүй бол тохируулах боломжгүй бөгөөд энэ нь алхам алхмаар зааварчилгаа тул та эхнээс нь эхлүүлэх хэрэгтэй. Тиймээс, програмыг багц менежер ашиглан татаж авах боломжтой, гэхдээ эдгээр нь хөгжүүлэгчийн дэвшилтэт хэрэгслүүд тул энд бид энэ залгаасыг стандарт аргаар хэрхэн авахыг танд хэлэх болно. Та залгаасын албан ёсны вэбсайт руу орж, хамгийн сүүлийн хувилбарыг нь татаж авах хэрэгтэй. Үүний дараа татаж авсан бүх файлыг залгаастай ижил нэртэй тохиромжтой хавтас бэлдэж, сайтынхаа лавлах руу шилжүүлэх ёстой. Энэ залгаас нь jQuery-тэй цуг байгаа тул та тэр номын сантай байх хэрэгтэй гэдгийг анхаарна уу. За, та энэ залгаасыг татаж авсны дараа Owl Carousel гулсагч 2-ыг тохируулах дараагийн алхамыг хийх хэрэгтэй болно.
CSS
БOwl Carousel 1.3 тохиргоо нь шинэ хувилбар 2-той бараг ижил хэвээр байгаа бөгөөд зөвхөн шинэ боломжуудыг нэмсэн. Гэсэн хэдий ч баримт бичигт CSS нэмэхээс эхлээд үндсэн мэдээлэл ижил байх болно. Тиймээс эхний алхам бол мөрийг нэмэх явдал юм. Тэр чамд юу өгөх вэ? Энэ бол гулсагчийг харуулахын тулд сайт руу шаардлагатай загваруудыг ачаалах мөр юм. Энд та харааны боловсруулалтыг өөрөө хийж дуусгах боломжтой. Гэсэн хэдий ч илүү тохиромжтой, хурдан шийдэл байдаг. Та мөн гулсагчийн өгөгдмөл загварыг ачаалах мөрийг нэмж, шууд ашиглахад бэлэн болгож болно. Та гулсагчаа илүү өвөрмөц, өөр, агуулгадаа илүү тохиромжтой болгохын тулд зарим загварыг засаж болно. Мэдээжийн хэрэг, Орос хэл дээрх Owl Carousel тохиргоо нь маш тохиромжтой байх болно, гэхдээ вэбсайт хийдэг хүн бүр англи хэлний мэдлэггүйгээр хийх боломжгүй гэдгийг ойлгох ёстой.
JavaSpript холболт
Мэдээжийн хэрэг, гулсагч JSгүйгээр ажиллахгүй тул шаардлагатай кодыг агуулсан тохирох файлыг оруулахад анхаарах хэрэгтэй. Үүнийг хийхийн тулд та баримтаас кодын мөр оруулах хэрэгтэй, гэхдээ нэг нөхцөл хангагдсан байх ёстой. JS бол бүх командуудыг дарааллаар нь гүйцэтгэдэг програмчлалын хэл гэдгийг хүн бүр мэддэг тул энэ тохиолдолд та өөрийн баримт бичигт jQuery номын санг нэмсэн мөрийн дараа кодын энэ мөрийг нэмэх хэрэгтэй. Энэ гулсагчийн хувьд JS-тэй илүү их зүйл бол танд хийх зүйл байхгүйхэрэгтэй.
HTML кодчилол
За, та гулсагчийг холболоо, одоо үүнийг загварчилж, өөрчлөх цаг боллоо. Юуны өмнө та өөрийн хуудсан дээр гулсагч гарч ирэхийн тулд HTML кодыг бичих хэрэгтэй. Үүнийг хийхийн тулд та слайдыг агуулсан савыг бий болгох хэрэгтэй. Үүнийг div тагийг ашиглан хийж болох бөгөөд үүнд owl-carousel анги оноох шаардлагатай. Энэ анги нь гулсагчтай холбоотой бүх хэв маягийг идэвхжүүлэх боломжийг олгодог. Та бас өөр анги бичиж болно - шар шувууны сэдэв. Хэрэв та өгөгдмөл загварыг ашиглахаар шийдсэн эсвэл гулсагчийн стандарт хувилбарыг цаашдын ажилд үндэс болгон ашиглахаар шийдсэн бол энэ нь хэрэг болно.
Дараа нь та слайд бүрийг div шошготой тусдаа саванд нэмэх хэрэгтэй. Мэдээжийн хэрэг, та бусад шошго ашиглаж болно, гэхдээ энэ шошго нь гулсагчдад хамгийн тохиромжтой.
Дуудлагын залгаас
Танай сайтад бэлэн гулсагчтай болохын тулд хамгийн сүүлд хийх зүйл бол энэ блок кодын ашиглах явдал юм:
$(баримт бичиг).бэлэн(функц(){
$(".owl-carousel").owlCarousel();
});
Энэ нь таны хуудсыг ачаалах үед гулсагч ажиллаж эхлэх, өөрөөр хэлбэл контентыг гүйлгэхийг баталгаажуулдаг. Үүнтэй ижил кодоор та Owl Carousel-ийг WordPress-тэй холбож болно. Энэ залгаасын тохиргоонууд нь маш олон бөгөөд олон янз байдаг бөгөөд одоо та хамгийн чухал зүйлийн талаар мэдэх болно.
Гулсгуурын харагдах байдал, функцийг тохируулж байна
Тэгвэл та гулсагчаа өөрчлөхийн тулд ямар командыг ашиглаж болох вэ? Юуны өмнө та зүйлүүдийн командыг санах хэрэгтэй, учир нь түүний тусламжтайгаар та гулсагчдаа тодорхой тооны слайдыг тохируулж болно. Давталтын команд нь гулсагчийг давтах уу эсвэл сүүлчийн элемент дээр гүйлгэхээ зогсоох уу гэдгээ сонгох боломжийг танд олгоно. Мөн хулгана, мэдрэгчтэй гэх мэт хэд хэдэн сонголттой Drag команд байдаг. Эхний тохиолдолд та гулсагчынхаа элементүүдийг хулганыг дарж, хоёр дахь тохиолдолд товшилтын тусламжтайгаар (энэ команд нь хөдөлгөөнт төхөөрөмжид тохиромжтой) эргүүлэх боломжтой болгож болно. Өөр нэг чухал тушаал бол навигацийн сумыг харуулах боломжийг олгодог nav юм. Үүний зэрэгцээ та navText командыг ашиглан навигацийн товчлууруудад шошго нэмж болно. Түүнчлэн, хуудсыг ачаалах үед гулсагчынхаа слайдыг автоматаар эргүүлэх ажиллагааг идэвхжүүлж, идэвхгүй болгох боломжийг олгодог автоматаар тоглуулах командын талаар мартаж болохгүй. Энэ командыг ашигласнаар та слайд бүрийн автомат эргэлтийн хоорондох хугацааг тодорхойлох миллисекундээр тодорхой утгыг тохируулах боломжтой autoplayTimeout-г ашиглаж болно.
Хэрэв та responsive вэб дизайн ашигладаг бол, өөрөөр хэлбэл таны хуудасны дизайн аль төхөөрөмж дээр үзэж байгаагаас хамааран автоматаар өөрчлөгддөг бол слайдын тоог тохируулах боломжийг олгодог responsive командыг санаж байх хэрэгтэй. Хуудсыг үзэж буй дэлгэцийн өргөнөөс хамааран харуулах.
