JavaScript-də oxlar ilə mətn slideri

Gəlin indi oxlar ilə mətn slideri edək. Bu o deməkdir ki, mətn taymerlə deyil, oxa klikləməklə dəyişəcək. Gəlin HTML kodumuza oxlar əlavə edək:

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

Bu sliderin həllində əsas incəlik ondadır ki, mətnlər üçün sayğç dəyişəni oxlarımızın klik handlerləri üçün ümumi olmalıdır:

let i = 0; // xarici dəyişən

left.addEventListener('click', function() {
	// i-ni 1 vahid azaldırıq
	// və i nömrəli mətni çıxardırıq
});
right.addEventListener('click', function() {
	// i-ni 1 vahid artırırıq
	// və i nömrəli mətni çıxardırıq
});

İkinci incəlik isə ondadır ki, həm i azaldılanda, həm də artırılanda, sıfırdan kiçik və massivin son elementindən böyük ədədlərə çıxmaq olmaz.

Təsvir olunan slideri həyata keçirin. Elə edin ki, mətnlər dairəvi şəkildə dəyişsin.

Əvvəlki məsələni elə dəyişin ki, mətnlər dairəvi şəkildə dəyişməsin, sadəcə sonuncu sağ və ya sol vəziyyətə çatanda daha da sürüşməsin.