Thanh trượt văn bản có mũi tên bằng JavaScript

Bây giờ hãy tạo một thanh trượt văn bản có mũi tên. Điều này có nghĩa là văn bản sẽ thay đổi không phải theo bộ đếm thời gian mà bằng cách nhấp vào mũi tên. Hãy thêm các mũi tên vào mã HTML của chúng ta:

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

Sự tinh tế chính trong việc triển khai thanh trượt này là biến đếm cho các văn bản phải là biến chung cho các trình xử lý sự kiện nhấp chuột của các mũi tên:

let i = 0; // biến ngoài

left.addEventListener('click', function() {
	// giảm i đi 1
	// và hiển thị văn bản có số thứ tự i
});
right.addEventListener('click', function() {
	// tăng i lên 1
	// và hiển thị văn bản có số thứ tự i
});

Và sự tinh tế thứ hai là cả khi giảm i lẫn khi tăng, không được vượt ra ngoài các số nhỏ hơn 0 và lớn hơn phần tử cuối cùng của mảng.

Hãy triển khai thanh trượt đã được mô tả. Hãy làm sao cho các văn bản chạy theo vòng tròn.

Hãy sửa đổi bài toán trước đó sao cho các văn bản không chạy theo vòng tròn, mà đơn giản là không cuộn thêm nữa khi đạt đến vị trí ngoài cùng bên phải hoặc bên trái.