Տեքստի սլայդեր սլաքներով JavaScript-ում
Եկեք այժմ ստեղծենք տեքստի սլայդեր սլաքներով: Սա նշանակում է, որ տեքստը կփոխվի ոչ թե տայմերի միջոցով, այլ սլաքի վրա կտտացնելու արդյունքում: Ավելացնենք սլաքներ մեր HTML կոդում:
<a href="" id="left">←</a>
<a href="" id="right">→</a>
<div id="slider"></div>
Այս սլայդերի լուծման հիմնական բարդությունը կայանում է նրանում, որ տեքստերի հաշվիչ փոփոխականը պետք է լինի ընդհանուր մեր սլաքների կտտոցների մշակիչների համար:
let i = 0; // արտաքին փոփոխական
left.addEventListener('click', function() {
// նվազեցնել i-ն 1-ով
// և արտածել i համարով տեքստը
});
right.addEventListener('click', function() {
// ավելացնել i-ն 1-ով
// և արտածել i համարով տեքստը
});
Իսկ երկրորդ բարդությունը կայանում է նրանում, որ և՛ i-ն նվազեցնելիս,
և՛ ավելացնելիս, անհնար է դուրս գալ
զրոյից փոքր և զանգվածի վերջին տարրից
մեծ թվեր:
Իրականացրեք նկարագրված սլայդերը: Ապահովեք, որ տեքստերը պտտվեն շրջանաձև:
Փոփոխեք նախորդ առաջադրանքն այնպես, որ տեքստերը չպտտվեն շրջանաձև, այլ պարզապես չպտտվեն այնքան, մինչև չհասնեն ամենաաջ կամ ամենաձախ դիրքին:
