Υποενότητα 4.4: Εναλλασσόμενες εικόνες - Carousel

Εισαγωγή

Σε αυτό το μάθημα θα εξετάσουμε τη χρήση του στοιχείου εναλλαγής εικόνων Carousel  στην ιστοσελίδα μας.

Εμείς θα:

• Χρησιμοποιήσουμε ένα συστατικό καρουσέλ στην ιστοσελίδα σας
• Διαμορφώσουμε διάφορες πτυχές του καρουσέλ
• Προσθέσουμε χειριστήρια στο καρουσέλ για χειροκίνητο έλεγχο

Δείτε περισσότερα για καρουσέλ

Προσθήκη Carousel

Το carousel θα προστεθεί στη σελίδα index.html . Σε αυτή τη σελίδα, πηγαίνετε στο επάνω μέρος του container div που περιέχει το περιεχόμενο της σελίδας και προσθέστε μια νέα content row και ένα  inner div - εσωτερική διαίρεση που καλύπτει και τις 12 στήλες ως εξής:

<div class="row row-content">
  <div class="col">
  </div>
</div>

Στη συνέχεια, προσθέστε το βασικό carousel div στην content row που μόλις προσθέσατε ως εξής:

<div id="mycarousel" class="carousel slide" data-ride="carousel">
</div>

Προσθήκη περιεχομένου στο Carousel

Στη συνέχεια, προσθέστε το περιεχόμενο μέσα στο καρουσέλ ως εξής: 

Inner carousel source:

Προσθήκη κλάσεων CSS

Προσθέστε τις ακόλουθες κλάσεις CSS στο αρχείο mystyles.css: 

Carousel CSS:

Προσθήκη χειριστηρίων στο Carousel

Στη συνέχεια, θα προσθέσουμε χειριστήρια στο καρουσέλ ώστε να μπορέσουμε να μετακινηθούμε χειροκίνητα μεταξύ των διαφανειών. Προσθέστε τον ακόλουθο κώδικα στο κάτω μέρος μετά τα αντικείμενα καρουσέλ στο div του καρουσέλ για να προσθέσετε δείκτες διαφανειών που μας επιτρέπουν να επιλέγουμε μια συγκεκριμένη διαφάνεια:

Carousel indicators source:

Στη συνέχεια, προσθέστε τα αριστερά και τα δεξιά χειριστήρια στο καρουζέλ που μας επιτρέπουν να μετακινηθούμε χειροκίνητα στην προηγούμενη και την επόμενη διαφάνεια. Προσθέστε αυτό στο κάτω μέρος του καρουσέλ div: 

left and right controls source:

Ο κώδικας θα δημιουργήσει μια σελίδα που εμφανίζεται ως εξής:

Do a Git commit

Κάντε μια  Git commit with the messageμε το μήνυμα "Carousel".

Σε αυτήν την υποενότητα, μάθαμε για το συστατικό καρουσέλ και πώς να το προσθέσουμε σε μια ιστοσελίδα. Μάθαμε επίσης για την εισαγωγή χειροκίνητων ελέγχων στο καρουσέλ.