Slider κειμένου με βέλη σε JavaScript
Ας φτιάξουμε τώρα έναν slider κειμένου με βέλη. Αυτό σημαίνει ότι το κείμενο θα αλλάζει όχι με χρονομετρητή, αλλά με πάτημα στο βέλος. Ας προσθέσουμε βέλη στον κώδικά μας HTML:
<a href="" id="left">←</a>
<a href="" id="right">→</a>
<div id="slider"></div>
Η κύρια λεπτότητα στην υλοποίηση αυτού του slider είναι ότι η μεταβλητή-μετρητής των κειμένων πρέπει να είναι κοινή για τους χειριστές κλικ των βελών μας:
let i = 0; // εξωτερική μεταβλητή
left.addEventListener('click', function() {
// μειώνουμε το i κατά 1
// και εμφανίζουμε το κείμενο με αριθμό i
});
right.addEventListener('click', function() {
// αυξάνουμε το i κατά 1
// και εμφανίζουμε το κείμενο με αριθμό i
});
Και η δεύτερη λεπτότητα είναι ότι, τόσο κατά τη μείωση
i, όσο και κατά την αύξηση, δεν μπορούμε να βγούμε
σε αριθμούς μικρότερους από το μηδέν και μεγαλύτερους από το τελευταίο στοιχείο
του πίνακα.
Υλοποιήστε τον πιο πάνω slider. Κάντε το έτσι, ώστε τα κείμενα να κυκλοφορούν.
Τροποποιήστε την προηγούμενη άσκηση έτσι, ώστε τα κείμενα να μην κυκλοφορούν, αλλά απλά να μην προκυλίσσονται περαιτέρω μόλις φτάσουν στην ακραία δεξιά ή αριστερή θέση.