สไลเดอร์ข้อความพร้อมลูกศรใน 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 หรือเพิ่ม ไม่สามารถออก ไปยังตัวเลขที่น้อยกว่าศูนย์และมากกว่าองค์ประกอบสุดท้าย ของอาร์เรย์ได้

เขียนสไลเดอร์ตามที่อธิบายไว้ สร้างให้ ข้อความวนเป็นวงกลม

ปรับเปลี่ยนงานก่อนหน้านี้ เพื่อให้ ข้อความไม่วนเป็นวงกลม แต่เพียงแค่ไม่เลื่อน ต่อไปเมื่อถึงตำแหน่งขวาสุดหรือ ซ้ายสุด