สไลเดอร์ข้อความพร้อมลูกศรใน JavaScript

ตอนนี้เรามาสร้างสไลเดอร์ข้อความพร้อม ลูกศรกัน นั่นหมายความว่าข้อความจะเปลี่ยนแปลง ไม่ใช่ตามตัวจับเวลา แต่เมื่อกดที่ลูกศร ลองเพิ่ม ลูกศรในโค้ด HTML ของเรา:

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

ความยุ่งยากหลักในการแก้ปัญหาของสไลเดอร์นี้ คือตัวแปรนับข้อความต้อง เป็นตัวแปรกลางสำหรับตัวจัดการเหตุการณ์การคลิกของลูกศรเรา:

javascriptlet i = 0; // ตัวแปรภายนอก

left.addEventListener('click', function() {
  // ลด i ลง 1
  // และแสดงข้อความหมายเลข i
});
right.addEventListener('click', function() {
  // เพิ่ม i ขึ้น 1
  // และแสดงข้อความหมายเลข i
});

และความยุ่งยากที่สองคือ ไม่ว่าจะลด i หรือเพิ่ม ไม่สามารถออก ไปยังตัวเลขที่น้อยกว่าศูนย์และมากกว่าองค์ประกอบสุดท้าย ของอาร์เรย์ได้