21 Հունիսի 2016

Պարզագույն slider-ի պատրաստում

CSS, CSS3, HTML, HTML5, JavaScript, jQuery, Web

Հավանաբար ձեզ հաճախ են հանդիպում այնպիսի կայքեր, որոնք պարունակում են տարբեր տեսակի և ձևի slider-ներ։ Դրանց պարունակությունը կարող է լինել նկար, տեքստ կամ ցանկացած այլ տեսակի ինֆորմացիա։ Slider-ները հաճախ նաև անվանվում են կարուսելներ (carousel): Դրանք օգտագործվում են կայքէջում ինչ-որ ինֆորմացիա ցույց տալու համար, որը չի զբաղեցնի շատ մեծ տարածություն։ Այս գրառման մեջ ես կներկայացնեմ, թե ինչպես կարելի է ստեղծել սեփական հասարակ կարուսել, որը բաղկացած կլինի նկարներից։ Նկարները թերթելու ձևը նույնպես հասարակ կլինի, քանի որ այս գրառման մեջ ցանկանում եմ սկսնակ վեբ ծրագրավորողներին ծանոթացնել միայն դրա կառուցման ու աշխատանաքի հիմնական սկզբունքներին։ Իսկ իմ մյուս գրառումներում կներակայացնեմ արդեն ավելի բարդ կարուսելներ, որոնք կունենան թե՛ ավելի ճոխ պարունակություն, թե՛ ավելի գեղեցիկ ձևավորում և թե՛ կոնտենտը թերթելու ավելի գեղեցիկ էֆեկտներ։

Եվ այսպես, նախ որոշենք, թե մեզ նախապես ինչ է անհրաժեշտ։ Մեր կարուսելի համար նախապատրաստենք 3 նկար, որոնք HTML կոդի մեջ կտեղադրենք իրար հետևից մեկ ընդհանուր բլոկի մեջ։ Այդ նկարներից երևալու է միայն մեկը, որը պարբերաբար ինքնուրույն փոխարինվելու է հաջորդ նկարով։ Հենց այդ երևացող նկարը կունենա ինչ-որ յուրահատուկ կլաս, որի միջոցով էլ կիրականացնենք ողջ պրոցեսը։ Մեր օրինակում որպես այդպիսի կլաս վերցնենք active-ը։ Ինչպես նաև մեկ այլ բլոկի մեջ կարելի է ստեղծել 2 կոճակ (button), որոնք մեզ նկարները հետ կամ առաջ թերթելու հնարավորություն կտան։

<div class="wrapper">
        <div class="images">
            <img class='img-item active' src="https://github.com/amvmkrtich/itblog-files/raw/master/slider-img-1.jpeg" alt="">
            <img class='img-item active-next' src="https://github.com/amvmkrtich/itblog-files/raw/master/slider-img-2.jpeg" alt="">
            <img class='img-item' src="https://github.com/amvmkrtich/itblog-files/raw/master/slider-img-3.jpg" alt="">
        </div>
        <div class="buttons">
            <button class='prev'>Preview</button>
            <button class='next'>Next</button>
        </div>
    </div>

Մեր այս կարուսելի HTML մասն այսքանն էր։ Այժմ ավելացնենք մի քանի CSS հատկություններ՝ մեր կարուսելի արտաքին տեսքը որոշ չափով կարգավորելու համար։ Նախ, images կլասով div-ի մեջ գտնվող img էլեմենտներին տանք 100% լայնություն, որպեսզի նրանք համահունչ լինեն էկրանի չափերի հետ, այնուհետև թաքցնենք բոլոր նկարները, բացառությամբ active կլասով նկարի՝ նրանց տալով display: none։

img.img-item{
  width: 100%;
  display: none;
}
img.img-item.active{  
  display: inline-block;
}

Այժմ կարելի է մի փոքր էլ ձևավորել ներքևում գտնվող կոճակները և անցնել արդեն ֆունկցիոնալ մասին։

.buttons{
  margin-bottom: 20px;
}
.buttons button{
  padding: 5px 10px;
  border: 1px solid #5e88fd;
  background: #5e88fd;
  color: #fff;
  cursor: pointer;
  width: 70px;
  transition: all .2s;
}
.buttons button:hover{
  background: rgba(0,0,0,0);
  color: #5e88fd;
  border-color: #5e88fd;
}

Բնականաբար, կարուսելի իրականացման համար մեզ անհրաժեշտ է մեր ֆայլին կապել jQuery գրադարանը, որի միջոցով էլ կիրականացնենք կարուսելի ֆունկցիոնալ մասը։

Նախ գրենք ֆունկցիա, որի միջոցով կարուսելը կպտտվի առաջ, այսինքն՝ ակտիվ նկարին կփոխարինի իր հաջորդ նկարը։ Այն գրենք առանձին ֆունկցիայի մեջ, քանի որ նկարները այդ ուղղությամբ պետք է թերթվեն թե՛ ինքնուրույն, և թե՛ “Հաջորդ” կոճակը սեղմելիս։

function slideNext() {
                var activeItem = $('img.active');
                var nextItem = $('img.active').next();
                activeItem.removeClass("active");
                if (nextItem.length != 0) {
                    nextItem.addClass("active");
                } else {
                    $('img.img-item:first').addClass('active');
                }
            }

Ի՞նչ է իրենից ներկայացնում այս ֆունկցիան։ Այն active կլասով նկարից վերցնում է այդ կլասը և փոխանցում HTML կոդի մեջ դրան հաջորդող նկարին։ Քանի որ CSS-ով մենք գրել էինք, որ բոլոր նկարները պետք է թաքնված լինեն, բացի active կլասով նկարից, հետևաբար ֆունկցիայի աշխատելու ժամանակ նկարը, որից վերցրեցինք active կլասը, կանհետանա, իսկ այն նկարը, որին հաղորդեցինք, այսինքն հաջորդը՝ կհայտնվի։ Մեզ նաև անհրաժեշտ է հաշվի առնել այն հանգամանքը, որ կարուսելը նկարները թերթելով՝ ի վերջո հասնելու է վերջին նկարին, որը հաջորդ չունի։ Այս դեպքում պետք է ստուգում իրականացնենք, որպեսզի այն, հասնելով վերջին նկարին, active կլասը փոխանցի առաջին նկարին։ Եվ հենց այս մասն էլ կապահովի նկարների պտույտը (կարուսել)։ Այժմ արդեն slideNext() ֆունկցիան ամեն անգամ կանչելու դեպքում, այդ պահին ակտիվ նկարը կփոխարինվի իր հաջորդով։ Իսկ այդ ֆունկցիայի կանչը կիրականացնենք մեկ այլ ֆունկցիայի մեջ, որը մեր կողմից փոխանցած ժամանակի ինտերվալով պարբերաբար կկանչի slideNext() ֆունկցիան։

function autoSlide() {
     interval = setInterval(slideNext, 5000);
}

Այժմ արդեն կանչելով autoSlide() ֆունկցիան՝ մեր կարուսելը կսկսի աշխատել։

Եթե “Հաջորդ” կոճակին սեղմելու ժամանակ նույնպես կանչենք slideNext() ֆունկցիան, ապա ամեն անգամ այն սեղմելիս նկարը կփոխարինվի հաջորդով։

$(".next").click(function () {
       slideNext();
});

Համանման ձևով կգրենք նկարները հակառակ ուղղությամբ թերթելու համար պատասխանատու ֆունկցիան, այսինքն՝ ֆունկցիան, որը կաշխատի “Նախորդ” կոճակը սեղմելիս։ Այստեղ արդեն տարբերությունը կլինի այն, որ active կլասը կհաղորդվի նախորդ նկարին և առաջին նկարի ակտիվ լինելու ժամանակ “Նախորդ” կոճակը սեղմելիս active կլասը կփոխանցվի վերջին նկարին։

function slidePrev() {
     var activeItem = $('img.active');
     var prevItem = $('img.active').prev();
     activeItem.removeClass("active");
     if (prevItem.length != 0) {
       prevItem.addClass("active");
     } else {
       $('img.img-item:last').addClass('active');
     }
   }

  $(".prev").click(function() {
     slidePrev();
   });

Ահա այսքանով էլ հենց կարողացանք իրականացնել կարուսելի կառուցումը, սակայն վերջում մի շատ նուրբ հանգամանք նույնպես հաշվի առնենք և ավարտենք այս պարզ կարուսելը։ Եթե ուշադիր լինեք, կնկատեք, որ կարուսելի ինքնուրույն պտույտը բոլորովին կախված չէ, թե կոճակները երբ են սեղմվել։ Օրինակ, եթե սեղմել ենք “Հաջորդ” կոճակը, ապա կարուսելի ինքնուրույն թերթումը պետք է իրականանա մեր սեղմելուց 5վ անց, սակայն մեզ մոտ այդպես չէ։ Դրա համար կոդի ամենավերևում կհայտարարենք ինչ-որ փոփոխական, autoSlide() ֆունկցիայի մեջ դրան կվերագրենք setInterval ֆունկցիան, այնուհետև կոճակների սեղմման իրադարձության (event) կոդերի մեջ կավելացնենք հետևյալ արտահայտությունը․

clearInterval(interval);
autoSlide();

որը նշանակում է, որ կոճակին սեղմելիս կարուսելի ինքնուրույն պտույտի ժամանակի հաշվարկը սկսվում է զրոյից։ Կարուսելի վերջնական արդյունքը կլինի ահա այսպիսին։

Ինչպես նշեցի վերևում, նկարի փոխարեն կարող էք դնել տեքստային պարունակությամբ բլոկ կամ ցանկացած այլ էլեմենտ։

Այսքանով ավարտեցինք կարուսելի կառուցումը, որը,կարծում եմ, ձեզ համար նույնպես բարդություն չի առաջացնի։ Իսկ ցանկացած տեսակի հարցերի դեպքում կարող եք դիմել մեզ մեկնաբանությունների բաժնում կամ Ֆորումում:

Շնորհակալություն մեր բլոգից օգտվելու համար։ Հարգանքներով՝ IT-Blog.am թիմ:

Կապված գրառումներ