Öz saytlarında bir çox insanlar sürüşdürmələri görmək istəyir - bunlar ekranda bir məzmun elementini göstərən və müəyyən müddətdən sonra bu məzmunu digərinə dəyişən bloklardır. Təbii ki, hər bir veb tərtibatçı müstəqil olaraq HTML, CSS və JavaScript-dən istifadə edərək slayder yarada bilir, lakin bu həmişə məna kəsb etmir. İnternetdə həyatınızı xeyli asanlaşdıran və saytınızı daha cəlbedici edən kifayət qədər hazır həllərin olmasına baxmayaraq, çox vaxt sərf edəcəksiniz. Bu məqalə Bayquş Karusel adlı bu həllərdən birinə diqqət yetirəcəkdir. Bu kaydırıcıyı quraşdırmaq inanılmaz dərəcədə sadədir, belə ki, hətta bir başlanğıc da onun öhdəsindən gələ bilər. İndi bu kaydırıcının nə olduğunu, eləcə də digər vacib detalları öyrənəcəksiniz. Bayquş Karuselini quraşdırmaq addım-addım prosesdir, ona görə də bu materialı yalnız ardıcıllıqla öyrənməlisiniz.
Bu nədir və niyə bu xüsusi slayderi seçməlisiniz?
Owl Carousel, konfiqurasiyası bu məqalədə müzakirə olunacaq, səhifənizə gözəl və rahat sürüşdürmə əlavə edən çox təsirli bir plagindir və bu, saytda işinizi xeyli asanlaşdıracaq,çox vaxt, səy və pula qənaət. Bu xüsusi plaqinin üstünlükləri nələrdir, çünki İnternetdə kifayət qədər çox sürgü var? Fakt budur ki, bu kaydırıcı sizə səhifənizi unikal və təkrarolunmaz etməyə imkan verəcək onlarla fərdiləşdirmə variantları təklif edir. Bu, bütün brauzer versiyalarında işləyəcək və WordPress və digər məşhur CMS-lərə asanlıqla qoşula bilən cavab verən plagindir. Ümumiyyətlə, bu kaydırıcının bir çox üstünlükləri var, buna görə də mütləq onun xeyrinə seçim etməlisiniz. Bununla belə, Owl Carousel quraşdırmaya başlamazdan əvvəl bu plaqini hələ də yükləmək lazımdır.
Yüklə
Owl Carousel 2-ni qurmaq, əgər onu kompüterinizə yükləməmisinizsə, mümkün deyil və bu, addım-addım təlimat olduğundan, ən əvvəldən başlamalısınız. Beləliklə, proqramı paket menecerlərindən istifadə etməklə yükləmək olar, lakin bunlar inkişaf etmiş inkişaf etdirici alətlərdir, buna görə də burada bu plagini standart şəkildə necə əldə edəcəyinizi sizə xəbər verəcəyik. Siz plaqinin rəsmi saytına daxil olub onun son versiyasını yükləməlisiniz. Bundan sonra, bütün yüklənmiş fayllar, plaqinin özü ilə eyni adlı rahat bir qovluq hazırlayaraq saytınızın kataloquna köçürülməlidir. Qeyd edək ki, bu plagin jQuery ilə birləşdirilmişdir, ona görə də sizdə həmin kitabxana mövcud olmalıdır. Bu plaqini endirdikdən sonra siz Bayquş Karusel kaydırıcısını 2-nin qurulması ilə bağlı növbəti addıma diqqət yetirməli olacaqsınız.
CSS
BOwl Carousel 1.3 parametrləri daha yeni versiya 2-də olduğu kimi demək olar ki, eyni qalır, yalnız yeni xüsusiyyətlər əlavə olunur. Bununla belə, sənədinizə CSS əlavə etməklə əsas məlumatlar eyni olacaq. Beləliklə, ilk addım xətti əlavə etməkdir. O sənə nə verir? Bu, kaydırıcıyı göstərmək üçün sayta lazımi üslubları yükləyən bir sətirdir. Vizual emalını özünüz etməklə bitirə biləcəyiniz yer budur. Ancaq daha rahat və daha sürətli bir həll var. Siz həmçinin slayderin defolt mövzusunu yükləyən və onu dərhal istifadəyə hazır edən bir xətt əlavə edə bilərsiniz. Slayderinizi daha unikal və fərqli etmək və məzmununuz üçün daha uyğun etmək üçün bəzi üslubları redaktə edə bilərsiniz. Təbii ki, rus dilində Owl Carousel parametrləri çox rahat olardı, lakin veb saytlar yaradan hər bir şəxs ingilis dilini bilmədən edə bilməyəcəyini başa düşməlidir.
JavaSpript bağlantısı
Əlbəttə, slayder JS olmadan işləməyəcək, ona görə də siz lazımi kodu ehtiva edən müvafiq faylı daxil etməyə diqqət yetirməlisiniz. Bunu etmək üçün sənədlərdən bir kod sətri daxil etməlisiniz, lakin bir şərt yerinə yetirilməlidir. Hamı bilir ki, JS bütün əmrləri ardıcıllıqla yerinə yetirən proqramlaşdırma dilidir, ona görə də bu halda sənədinizə jQuery kitabxanasını əlavə edən sətirdən sonra bu kod sətrini əlavə etməlisiniz. Bu kaydırıcının vəziyyətində JS ilə daha çox əlaqəniz yoxdurlazımdır.
HTML kodlaması
Yaxşı, siz kaydırıcıyı birləşdirdiniz, indi onu dizayn etmək və fərdiləşdirmək vaxtıdır. İlk növbədə, slayderin ümumiyyətlə səhifənizdə görünməsi üçün HTML kodunu yazmalısınız. Bunu etmək üçün slaydları ehtiva edən bir konteyner yaratmalısınız. Bu, bayquş-karusel sinfi təyin edilməli olan div etiketindən istifadə etməklə edilə bilər. Slayderlə əlaqəli bütün üslubların aktivləşdirilməsini təmin edən bu sinifdir. Siz həmçinin başqa bir sinif - bayquş-tema yaza bilərsiniz. Defolt dizayndan istifadə etmək və ya sürüşdürmənin standart versiyasını sonrakı iş üçün əsas kimi götürmək qərarına gəlsəniz, bu faydalı olacaq.
Sonra hər bir slaydı div teqi ilə ayrıca konteynerə əlavə etməlisiniz. Əlbəttə, siz başqa teqlərdən istifadə edə bilərsiniz, lakin bu teq sürüşdürmə üçün ən yaxşısıdır.
Zəng plagini
Və saytınızda hazır slayderin olması üçün etməli olduğunuz son şey bu kod blokundan istifadə etməkdir:
$(sənəd).hazır(funksiya(){
$(".bayquş-karusel").owlCarousel();
});
Bu, sürüşdürmənin işləməyə başlamasını təmin edir, yəni səhifəniz yükləndikdə məzmunda sürüşdürün. Eyni kodla siz Owl Carousel-i WordPress-ə qoşa bilərsiniz. Bu plaqinin parametrləri çoxsaylı və müxtəlifdir və indi siz ən əsas məqamları öyrənəcəksiniz.
Slayderin görünüşünün və funksionallığının qurulması
Slayderinizi fərdiləşdirmək üçün hansı əmrlərdən istifadə edə bilərsiniz? Hər şeydən əvvəl, elementlər əmrini yadda saxlamalısınız, çünki onunla siz kaydırıcınızda müəyyən sayda slayd təyin edə bilərsiniz. Döngə əmri sizə kaydırıcıyı döndərməyi və ya sonuncu elementdə sürüşməyi dayandırmağı seçməyə imkan verəcəkdir. Siçan və toxunma kimi bir neçə variantı olan Çək əmri də var. Birinci halda, siz onu elə edə bilərsiniz ki, siçanı basılı tutmaqla, ikinci halda isə toxunuşla (bu əmr mobil qurğular üçün uyğundur) sürüşdürmə aparatınızın elementlərini sürüşdürə bilərsiniz. Digər vacib əmr naviqasiya oxlarının göstərilməsinə imkan verən navdur. Bununla yanaşı, naviqasiya düymələrinə etiketlər əlavə etmək üçün navText əmrindən istifadə edə bilərsiniz. Həmçinin, səhifə yükləndikdə sürüşdürmə slaydınızın avtomatik dönməsinin başlanmasını aktivləşdirməyə və söndürməyə imkan verən avtomatik oynatma əmrini də unutmamalısınız. Bu əmrlə siz həmçinin autoplayTimeout funksiyasından istifadə edə bilərsiniz, bunun üçün millisaniyələrdə xüsusi dəyər təyin edə bilərsiniz, bu isə slaydların hər birinin avtomatik çevrilməsi arasındakı vaxtı müəyyən edəcək.
Responsiv veb dizayndan istifadə edirsinizsə, yəni səhifənizin dizaynı hansı cihazda baxıldığından asılı olaraq avtomatik dəyişir, onda siz slaydların sayını təyin etməyə imkan verən cavab verən əmri mütləq yadda saxlamalısınız. səhifəyə baxılan ekranın enindən asılı olaraq göstərmək üçün.
