JavaScript-da o'q bilan matn slayderi

Keling, endi o'q bilan matn slayderini qilaylik. Bu shuni anglatadiki, matn taymer bilan emas, balki o'qni bosish orqali o'zgaradi. HTML kodimizga o'qlarni qo'shamiz:

<a href="" id="left">←</a>
<a href="" id="right">→</a>
<div id="slider"></div>

Ushbu slayderni yechishning asosiy nozikligi shundaki, matnlar uchun hisoblagich o'zgaruvchisi bizning o'qlarimizni klik ishlovchilari uchun umumiy bo'lishi kerak:

let i = 0; // tashqi o'zgaruvchi

left.addEventListener('click', function() {
	// i ni 1 ga kamaytiramiz
	// va i nomerli matnni chiqaramiz
});
right.addEventListener('click', function() {
	// i ni 1 ga oshiramiz
	// va i nomerli matnni chiqaramiz
});

Ikkinchi noziklik esa, i ni kamaytirishda ham, oshiradi ham, noldan kichik va massivning oxirgi elementidan katta raqamlarga chiqib ketish mumkin emas.

Tasvirlangan slayderni amalga oshiring. Matnlar doira bo'ylab aylanishi uchun qiling.

Oldingi vazifani o'zgartiring, shunday qilib matnlar doira bo'ylab yurmasin, balki eng o'ng yoki eng chap holatga erishganda shunchaki keyin aylanmasin.