Өз сайтындағы көптеген адамдар жүгірткілерді көргісі келеді - бұл экранда бір мазмұн элементін көрсететін блоктар және белгілі бір уақыттан кейін бұл мазмұнды басқасына өзгертеді. Әрине, әрбір веб-әзірлеуші 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 тегі арқылы жасауға болады, оған үкі-карусель класын тағайындау керек. Дәл осы сынып жүгірткіге қатысты барлық стильдердің іске қосылуын қамтамасыз етеді. Сіз сондай-ақ басқа сыныпты жаза аласыз - үкі тақырыбы. Егер сіз әдепкі дизайнды пайдалануды шешсеңіз немесе сырғытпаның стандартты нұсқасын әрі қарай жұмыс істеу үшін негіз ретінде алсаңыз, бұл өте ыңғайлы болады.
Одан кейін әр слайдты div тегі бар бөлек контейнерге қосу керек. Әрине, басқа тегтерді пайдалануға болады, бірақ бұл тег жүгірткілер үшін ең жақсысы.
Қоңырау шалу плагині
Сайтыңызда дайын сырғытпа болуы үшін ең соңғы нәрсе - мына код блогын пайдалану:
$(құжат).дайын(функция(){
$(".owl-carousel").owlCarousel();
});
Бұл сырғытпаның жұмыс істей бастауын қамтамасыз етеді, яғни бет жүктелген кезде мазмұнды айналдырады. Сол кодпен Owl Carousel-ді WordPress-ке қосуға болады. Бұл плагиннің параметрлері сан алуан және алуан түрлі, енді сіз ең маңызды тұстары туралы білетін боласыз.
Слайдердің көрінісі мен функционалдығын орнату
Слайдерді реттеу үшін қандай пәрмендерді пайдалануға болады? Ең алдымен, элементтер пәрменін есте сақтау керек, өйткені оның көмегімен слайдердегі слайдтардың белгілі бір санын орнатуға болады. Цикл пәрмені сырғытпаны айналдыруды немесе соңғы элементте айналдыруды тоқтатуды таңдауға мүмкіндік береді. Сондай-ақ, тінтуір және түрту сияқты бірнеше опциялары бар «Сүйреп апару» пәрмені бар. Бірінші жағдайда оны жүгірткі элементтерін тінтуірді басып тұрғанда, ал екінші жағдайда түрту арқылы сырғытуға болатындай етіп жасауға болады (бұл пәрмен мобильді құрылғылар үшін жарамды). Тағы бір маңызды пәрмен - шарлау көрсеткілерін көрсетуге мүмкіндік беретін nav. Онымен бірге шарлау түймелеріне белгілерді қосу үшін navText пәрменін пайдалануға болады. Сондай-ақ, бет жүктелген кезде слайдердің слайдтарын бұрудың автоматты түрде іске қосылуын қосуға және өшіруге мүмкіндік беретін автоойнату пәрменін ұмытпау керек. Бұл пәрменмен сіз сонымен қатар слайдтардың әрқайсысының автоматты бұрылуы арасындағы уақытты анықтайтын миллисекундтарда белгілі бір мәнді орнатуға болатын autoplayTimeout функциясын пайдалана аласыз.
Егер сіз жауап беретін веб-дизайнды пайдалансаңыз, яғни бетіңіздің дизайны қай құрылғыда қаралатынына байланысты автоматты түрде өзгеретін болса, слайдтар санын орнатуға мүмкіндік беретін жауап беру пәрменін міндетті түрде есте сақтау керек. бет қаралып жатқан экранның еніне байланысты көрсету үшін.
