• Գլխավոր
  • Լուրեր
    • Առողջապահություն
    • Անվտանգություն
    • Արհեստական Ինտելեկտ
    • Էկոլոգիա
    • Մեքենաշինություն
    • Ռոբոտաշինություն
    • Համացանց
    • Համակարգիչ
    • Սմարթֆոն
    • Սոցցանց
    • Google
    • Microsoft
    • Hi-Tech
  • Վեբ
    • PHP
    • HTML
      • HTML5
    • CSS
      • CSS3
    • JavaScript
      • jQuery
    • WordPress
  • SQL
  • Թեստեր
    • PHP
    • MySQL
    • HTML
    • JavaScript
    • CSS
  • Ֆորում
  • Հետադարձ կապ
IT-Blog.am
Տեղեկատվական տեխնոլոգիաների պորտալ
  • Գլխավոր
  • Լուրեր
    • Առողջապահություն
    • Անվտանգություն
    • Արհեստական Ինտելեկտ
    • Էկոլոգիա
    • Մեքենաշինություն
    • Ռոբոտաշինություն
    • Համացանց
    • Համակարգիչ
    • Սմարթֆոն
    • Սոցցանց
    • Google
    • Microsoft
    • Hi-Tech
  • Վեբ
    • PHP
    • HTML
      • HTML5
    • CSS
      • CSS3
    • JavaScript
      • jQuery
    • WordPress
  • SQL
  • Թեստեր
    • PHP
    • MySQL
    • HTML
    • JavaScript
    • CSS
  • Ֆորում
  • Հետադարձ կապ
Գլխավոր  /  CSS • CSS3 • HTML • HTML5 • JavaScript • jQuery • Web  /  Պարզագույն slider-ի պատրաստում
Sluder
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 թիմ:

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

  • mysql transaction

    MySQL գործարքի(transaction) կառավարման օպերատորներ

    11/19/2016
  • Class

    Կլասների (classes) գրելաձևը (syntax)

    10/20/2016
  • MySQL Trigger

    MySQL տրիգերներ (Triggers) և իրադարձություններ(Events)

    10/04/2016
Facebook
  • Շատ Դիտված Գրառումներ
  • Նոր գրառումներ
  • Calculator
    Հաշվիչի (calculator) պատրաստում 04/18/2016
  • MySQL joins
    MySQL JOINS (MySQL միացումներ) 06/13/2016
  • Սուպերգլոբալ փոփոխականներ (superglobals) 03/24/2016
  • Sendmail կարգավորումներ 04/01/2016
  • Recursion
    Ռեկուրսիա (recursion) հասկացությունը 06/02/2016
  • Ի՞նչ է Pi Network-ը և ինչպե՞ս վաստակել Pi 03/27/2020
  • Honda-ն ներկայացրել է մոտոցիկլետ, որն օգտագործում է քամու էներգիա 12/23/2017
  • Նոր 3D-տպիչ սարքը ստեղծում է առարկաներ վայրկյանների ընթացքում 12/22/2017
  • Հետազոտողներն օգտագործում են էլեկտրական հոսանքներ`մարդու հյուսվածքներում քաղցկեղի հայտնաբերման համար 12/18/2017
  • Nvidia ընկերությունը ներկայացրել է երբևէ ստեղծված ամենահզոր գրաֆիկական պրոցեսորը 12/16/2017
  • WordPress -ի տեղադրումը .Net -ի վրա 03/16/2017
  • Class
    Կլասների (classes) գրելաձևը (syntax) 10/20/2016
  • encapsulation
    Ինկապսուլացիա (Encapsulation) 08/17/2016
  • object oriented programming
    Օբյեկտ կողմնորոշված ծրագրավորում (OOP) 07/04/2016
  • Ի՞նչ է Pi Network-ը և ինչպե՞ս վաստակել Pi 03/27/2020
  • Honda-ն ներկայացրել է մոտոցիկլետ, որն օգտագործում է քամու էներգիա 12/23/2017
  • Նոր 3D-տպիչ սարքը ստեղծում է առարկաներ վայրկյանների ընթացքում 12/22/2017
  • mysql transaction
    MySQL գործարքի(transaction) կառավարման օպերատորներ 11/19/2016
  • MySQL Trigger
    MySQL տրիգերներ (Triggers) և իրադարձություններ(Events) 10/04/2016
  • Procedures and Functions
    MySQL ընթացակարգեր (procedures) և ֆունկցիաներ (functions) 08/31/2016
  • MYSQL View
    MySQL ներկայացումներ (VIEWS) 07/16/2016
  • WordPress -ի տեղադրումը .Net -ի վրա 03/16/2017
  • SEO խրվակներ WordPress-ի համար 04/25/2016
  • Ծանոթացում WordPress-ի կառավարակետի հետ (մաս 2) 02/24/2016
  • Ի՞նչ է CMS-ը 02/17/2016
© 2020 թ.  IT-Blog.am Բոլոր հեղինակային իրավունքները պաշտպանված են:

Սույն կայքում տեղադրված նյութերի հեղինակային իրավունքը պատկանում է բացառապես IT-Blog.am կայքի հեղինակներին և կայքում բոլոր հրապարակված նյութերն անհատական օգտագործման համար են։ Այս կայքում  հրապարակված նյութերի (մասնակի կամ ամբողջական) վերահրապարկումը տեղեկատվություն տարածող այլ միջոցներում (բացառությամբ սոցկայքերի) արգելված է։ Խախտում թույլ տված անձինք կենթարկվեն պատասխանատվության` օրենքով սահմանված կարգով։