ජාවාස්ක්රිප්ට් හී ඊතල සමඟ පෙළ ස්ලයිඩරය
දැන් අපි ඊතල සමඟ පෙළ ස්ලයිඩරයක් කරමු. මෙහි තේරුම නම්, පෙළ වෙනස් වන්නේ ටයිමරයකට නොව, ඊතලයක් මත ක්ලික් කිරීමෙනි. අපගේ 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 අඩු කිරීමේදී
හෝ වැඩි කිරීමේදී, ශුන්යයට වඩා කුඩා සංඛ්යා සහ
අරාවේ අවසාන මූලද්රව්යයට වඩා විශාල සංඛ්යා වලට
පිටව යා නොහැකි බවයි.
විස්තර කරන ලද ස්ලයිඩරය ක්රියාත්මක කරන්න. පෙොත් වළලු ආකාරයෙන් ගමන් කරන ලෙස සකසන්න.
පෙර කාර්යය වෙනස් කරන්න, එවිට පෙොත් වළලු ආකාරයෙන් ගමන් නොකර, අන්ත දකුණු හෝ වම් ස්ථානයට ළඟා වූ පසු තව දුරටත් රෝල් නොවේ.