Στοιχείο προβολής διαφανειών για στοιχεία ποδηλασίας - καρουζέλ εικόνων ή διαφάνειες κειμένου.
Πως δουλεύει
Το Carousel είναι μια παρουσίαση για την εμφάνιση μιας σειράς περιεχομένου που βασίζεται σε τρισδιάστατους μετασχηματισμούς CSS και μερικά JS. Λειτουργεί με κείμενο, εικόνες ή κανονική σήμανση. Υποστηρίζει επίσης κουμπιά επόμενο/προηγούμενο.
Λάβετε υπόψη ότι τα ένθετα καρουζέλ δεν υποστηρίζονται και τα καρουζέλ γενικά δεν είναι πολύ επιθυμητά από τα "πρότυπα προσβασιμότητας".
Κατώτατη γραμμή, εάν χρησιμοποιείτε καρουζέλ BS4, αυτό απαιτεί να συμπεριληφθεί το util.js.
Παράδειγμα
Το καρουζέλ δεν αλλάζει αυτόματα το μέγεθος του περιεχομένου της διαφάνειας. Επομένως, μπορεί να χρειαστείτε πρόσθετα βοηθητικά προγράμματα για να κάνετε το περιεχόμενό τους στο σωστό μέγεθος. Εφόσον τα καρουζέλ υποστηρίζουν τα κουμπιά προηγούμενο/επόμενο, δεν χρειάζεται να προστεθούν ρητά. Προσθέστε και προσαρμόστε τα μόνοι σας.
Η κλάση .active προστίθεται σε μία από τις διαφάνειες, διαφορετικά το καρουσέλ δεν θα φαίνεται. Επίσης, για να ενσωματώσετε στοιχεία ελέγχου, πρέπει να δώσετε ένα μοναδικό αναγνωριστικό στο στοιχείο κλάσης .carousel, ειδικά αν έχετε πολλά καρουζέλ στην ίδια σελίδα. Τα στοιχεία ελέγχου και οι δείκτες πρέπει να έχουν ένα χαρακτηριστικό data-target (ή href for ) που ταιριάζει με το αναγνωριστικό στοιχείου της κλάσης .carousel.
Μόνο διαφάνειες
Ακολουθεί ένα παράδειγμα καρουζέλ όπου υπάρχουν μόνο διαφάνειες. Σημειώστε την παρουσία των κλάσεων .d-block και .w-100, οι οποίες παρακάμπτουν την προεπιλεγμένη στοίχιση εικόνας στα προγράμματα περιήγησης για εικόνες καρουζέλ.
Placeholder Πρώτη διαφάνεια
Placeholder Δεύτερη διαφάνεια
Placeholder Τρίτη διαφάνεια
Με χειριστήρια
Προσθέτει κουμπιά προηγούμενο/επόμενο:
Με δείκτες
Μπορείτε επίσης να προσθέσετε δείκτες στο καρουζέλ μαζί με χειριστήρια.
Απαιτεί αρχικό ενεργό στοιχείο
Η κλάση .active πρέπει να προστεθεί σε μία από τις διαφάνειες, διαφορετικά το καρουζέλ δεν θα είναι ορατό.
Με επιγραφές
Προσθέστε υπότιτλους στις διαφάνειές σας προσθέτοντας ένα στοιχείο κλάσης .carousel-caption σε οποιοδήποτε στοιχείο καρουζέλ της κατηγορίας .carousel-item. Οι ετικέτες κρύβονται εύκολα σε μικρότερες συσκευές χρησιμοποιώντας βοηθητικά προγράμματα προβολής. Κρύβονται αρχικά με την κλάση .d-none και εμφανίζονται ξανά σε μεσαίες συσκευές με την κλάση .d-md-block.
Placeholder Πρώτη διαφάνεια
πρώτη ετικέτα διαφάνειας
Nulla vitae elit libero, a pharetra augue mollis interdum.
Placeholder Δεύτερη διαφάνεια
δεύτερη ετικέτα διαφάνειας
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Placeholder Τρίτη διαφάνεια
τρίτη ετικέτα διαφάνειας
Praesent commodo cursus magna, vel scelerisque nisl consectetur.
πρώτη ετικέτα διαφάνειας
Nulla vitae elit libero, a pharetra augue mollis interdum.
δεύτερη ετικέτα διαφάνειας
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
τρίτη ετικέτα διαφάνειας
Praesent commodo cursus magna, vel scelerisque nisl consectetur.
κόλληση
Προσθέστε το .carousel-fade στο καρουσέλ σας για να κάνετε κίνηση στις διαφάνειές σας για να ξεθωριάσουν στην επόμενη διαφάνεια.
Ατομική απόσταση.καρουσέλ-αντικείμενο
Προσθέστε data-interval="" στο στοιχείο .carousel-item για να αλλάξετε τον χρόνο καθυστέρησης μεταξύ της αυτόματης ανακύκλωσης στο επόμενο στοιχείο.
Χρήση
Μέσα από ιδιότητες
Το χαρακτηριστικό data-slide παίρνει τις τιμές prev ή next, οι οποίες αλλάζουν τη θέση της διαφάνειας σε σχέση με την τρέχουσα θέση της. Ή χρησιμοποιήστε data-slide-to για πλοήγηση στη διαφάνεια στο ευρετήριο, όπως 2: data-slide-to="2" , τα ευρετήρια διαφανειών ξεκινούν από 0 .
Το χαρακτηριστικό data-ride="carousel" χρησιμοποιείται για τη δημιουργία της κίνησης καρουζέλ. Δεν μπορεί να συνδυαστεί με ρητή προετοιμασία καρουζέλ μέσω JavaScript.
Μέσω JavaScript
Καλέστε το καρουζέλ χειροκίνητα:
$(".καρουσέλ"). στροβιλοδρόμιο()Επιλογές
Οι παράμετροι μπορούν να μεταβιβαστούν μέσω χαρακτηριστικών ή JavaScript. Για να χρησιμοποιήσετε χαρακτηριστικά, προσθέστε το όνομα της παραμέτρου στα data- , για παράδειγμα: data-interval="" .
| Ονομα | Τύπου | Από προεπιλογή | Περιγραφή |
|---|---|---|---|
| διάστημα | αριθμός | 5000 | Χρόνος καθυστέρησης μεταξύ των αυτόματων αλλαγών διαφανειών. Εάν είναι false, το καρουζέλ δεν θα αλλάξει αυτόματα τις διαφάνειες. |
| πληκτρολόγιο | boolean | αληθής | Εάν το καρουσέλ θα ανταποκρίνεται σε συμβάντα πληκτρολογίου. |
| παύση | χορδή | boolean | φτερουγίζω |
Εάν έχει οριστεί το "hover", η αλλαγή της διαφάνειας επιβραδύνεται με το πλήκτρο ποντικιού και η αλλαγή ξεκινά με την αφαίρεση του ποντικιού. Εάν είναι false, η τοποθέτηση του ποντικιού πάνω από το καρουζέλ δεν θα εμποδίσει την αλλαγή των διαφανειών. Συσκευές που ενεργοποιούνται με την αφή: "αιώρηση" - παύση στο σημείο επαφής (όταν ο χρήστης ολοκληρώσει την αλληλεπίδραση με το καρουζέλ) για δύο διαστήματα και μετά αλλάξτε ξανά διαφάνειες. Σημειώστε ότι αυτή η συμπεριφορά είναι επιπλέον της συμπεριφοράς του ποντικιού που περιγράφεται παραπάνω. |
| βόλτα | γραμμή | ψευδής | Αυτόματη αλλαγή διαφανειών καρουζέλ μετά την πρώτη χειροκίνητη αλλαγή της διαφάνειας από το χρήστη. Εάν το καρουζέλ - η αυτόματη αλλαγή είναι ενεργοποιημένη μετά τη φόρτωση. |
| κάλυμμα | boolean | αληθής | Εάν το καρουζέλ πρέπει να αλλάξει ομαλά ή διακριτικά. |
| αφή | boolean | αληθής | Το καρουσέλ πρέπει να υποστηρίζει την αλληλεπίδραση αριστερά/δεξιά σε συσκευές αφής. |
Μέθοδοι
Ασύγχρονες Μέθοδοι και Μεταβάσεις
Όλες οι μέθοδοι API ασύγχρονοςκαι εκτόξευση μετάβαση. Επιστρέφουν στη συνάρτηση που τους κάλεσε όταν ξεκινά η μετάβαση, αλλά στο τέλος. Επιπλέον, καλώντας μια μέθοδο σε ένα στοιχείο, η εκτέλεση της μετάβασης θα αγνοηθεί.
.καρουσέλ(επιλογές)
Αρχικοποιεί το αντικείμενο καρουζέλ με τις καθορισμένες επιλογές και ξεκινά τη μετάβαση της διαφάνειας.
$(".καρουσέλ"). καρουζέλ (( διάστημα : 2000 )).carousel("κύκλος")
Αλλάζει τις διαφάνειες καρουζέλ από αριστερά προς τα δεξιά.
.carousel ("παύση")
Διακόπτει τη μετάβαση της διαφάνειας.
.καρουσέλ(αριθμός)
Η κύλιση διαφάνειες μέχρι ένα συγκεκριμένο σημείο (με βάση το 0, παρόμοια με τις σειρές).
.carousel("προηγούμενο")
Πραγματοποιείται κύλιση στην προηγούμενη διαφάνεια. Επιστρέφει την τιμή της κλήσης συνάρτησης πριν εμφανιστεί το στοιχείο "στόχος".(δηλαδή πριν πυροδοτήσει το συμβάν slid.bs.carousel).
.carousel("επόμενο")
Στην επόμενη διαφάνεια. Επιστρέφει την τιμή της κλήσης συνάρτησης πριν εμφανιστεί το στοιχείο "στόχος".(δηλαδή πριν πυροδοτήσει το συμβάν slid.bs.carousel).
.carousel("dispose")
Καταστρέφει το καρουζέλ του αντικειμένου.
Εξελίξεις
Το καρουζέλ στο Bootstrap έχει 2 συμβάντα για την εφαρμογή της λειτουργικότητας. Και τα δύο συμβάντα έχουν τις ακόλουθες πρόσθετες ιδιότητες:
- κατεύθυνση: Η κατεύθυνση προς την οποία κινούνται οι διαφάνειες ("αριστερά" ή "δεξιά").
- relatedTarget: Το στοιχείο DOM που μετακινείται στη θέση της διαφάνειας "flicked".
- από: Το ευρετήριο της τρέχουσας διαφάνειας
- προς: Ευρετήριο της επόμενης διαφάνειας
Όλα τα συμβάντα καρουζέλ ενεργοποιούνται απευθείας στο καρουσέλ (δηλ
Αλλάξτε τη διάρκεια μιας μετάβασης
Η διάρκεια του transition.carousel-item μπορεί να αλλάξει στη μεταβλητή $carousel-transition Sass πριν από τη μεταγλώττιση ή σε κανονικό CSS (όταν χρησιμοποιείται μεταγλωττισμένο CSS). Εάν εφαρμόζονται πολλαπλές μεταβάσεις, βεβαιωθείτε ότι η μετάβαση μετασχηματισμού έχει οριστεί πρώτα (π.χ. μετάβαση: μετασχηματισμός 2s ease, αδιαφάνεια 0,5s ease-out).
Σε αυτό το άρθρο, θα δούμε πώς μπορείτε να προσθέσετε ένα καρουζέλ ή ένα ρυθμιστικό σε μια σελίδα που είναι συνδεδεμένη με εκδόσεις Bootstrap 3 ή 4. Το περιεχόμενο των διαφανειών καρουζέλ μπορεί να ποικίλλει: κείμενο, εικόνα ή άλλο περιεχόμενο.
Τι είναι το καρουζέλ;
Το καρουζέλ (καρουσέλ) είναι ένα στοιχείο διεπαφής για την επίδειξη μιας σειράς εικόνων (διαφανειών) στον ιστότοπο. Κάθε εικόνα (διαφάνεια) εμφανίζεται συνήθως για αρκετά δευτερόλεπτα μέχρι να αντικατασταθεί από την επόμενη. Η αλλαγή της εικόνας (διαφάνεια) μπορεί να πραγματοποιηθεί τόσο αυτόματα σε τακτά χρονικά διαστήματα όσο και χειροκίνητα.
Μπορεί να παρουσιαστεί το καρουζέλ Slide in Bootstrap όχι μόνο μια εικόνα, αλλά επίσης περιεχόμενο κειμένου. Επιπλέον, όταν δημιουργείτε μια διαφάνεια, μπορείτε να χρησιμοποιήσετε τη σήμανση.
Στο Bootstrap, το στοιχείο Carousel δημιουργείται χρησιμοποιώντας την τεχνολογία CSS 3D Transforms και τον κώδικα JavaScript.
Το καρουζέλ στο Bootstrap υλοποιείται με χρήση του Page Visibilty API. Αυτό σημαίνει ότι εάν το πρόγραμμα περιήγησης υποστηρίζει αυτό το API, τότε το καρουζέλ δεν θα αλλάξει αυτόματα τις διαφάνειεςμέχρι να είναι ορατό στον χρήστη. Για παράδειγμα, εφόσον η καρτέλα που περιέχει το καρουζέλ είναι ανενεργή ή ελαχιστοποιημένη.
Το πλαίσιο Boostrap 3 και 4 δεν επιτρέπει ένθετα καρουζέλ.
Καρουζέλ χωρίς χειριστήρια
Συστατικό καρουζέλ δεν κανονικοποιεί αυτόματα τα μεγέθη εικόνων (διαφανειών).. Επομένως, ενδέχεται να απαιτούνται πρόσθετα βοηθητικά προγράμματα ή στυλ για να φέρετε το περιεχόμενο στο σωστό μέγεθος.
Ένα παράδειγμα για το πώς να το κάνετε αυτό με το CSS μπορείτε να βρείτε σε αυτό το άρθρο.
Σπουδαίος! Η ενεργή κλάση πρέπει να προστεθεί σε μία από τις διαφάνειες. Εάν αυτό δεν γίνει, τότε το καρουζέλ δεν θα εμφανιστεί.
Σήμανση HTML Carousel στο Bootstrap 3:
Η σήμανση HTML του καρουζέλ στο Bootstrap 4 διαφέρει μόνο στην κατηγορία στοιχείων. Θα πρέπει να χρησιμοποιήσετε το καρουζέλ-αντικείμενο. Επιπλέον, στο Boostrap 4, για να κάνετε τις εικόνες να ανταποκρίνονται, πρέπει να προσθέσετε την κλάση img-fluid.
Σήμανση HTML Carousel στο Bootstrap 4:
Το χαρακτηριστικό data-ride="carousel" προκαλεί την αυτόματη αλλαγή των διαφανειών καρουζέλ μετά τη φόρτωση της σελίδας. Εάν το καρουζέλ έχει αρχικοποιηθεί χρησιμοποιώντας JavaScript, τότε αυτό το χαρακτηριστικό δεν χρειάζεται να χρησιμοποιηθεί.
Καρουζέλ με χειριστήρια
Σπουδαίος! Ένα καρουζέλ με χειριστήρια ή/και ενδείξεις ολίσθησης πρέπει να έχει αναγνωριστικό . Και τα στοιχεία ελέγχου διαφανειών και οι δείκτες θα πρέπει να έχουν ένα χαρακτηριστικό data-target (ή href για συνδέσμους) του οποίου η τιμή πρέπει να δείχνει στο καρουζέλ (δηλαδή να αποτελείται από # και id ).
Σήμανση καρουζέλ HTML με στοιχεία ελέγχου για μετάβαση στην προηγούμενη και την επόμενη διαφάνεια:
Η συμπεριφορά των κουμπιών Προηγούμενο και Επόμενο ορίζεται στο καρουζέλ χρησιμοποιώντας το χαρακτηριστικό διαφάνεια δεδομένων.
Η προηγούμενη τιμή αυτού του χαρακτηριστικού συσχετίζει ορισμένες ενέργειες με το κουμπί, με τη βοήθεια του οποίου θα αλλάξει την τρέχουσα διαφάνεια στην προηγούμενη. Η επόμενη τιμή συσχετίζει με το κουμπί, αντίστοιχα, άλλες ενέργειες που θα αλλάξουν την τρέχουσα διαφάνεια στην επόμενη.
Καρουζέλ με δείκτες διαφάνειας
Στο καρουζέλ με χειριστήρια, μπορείτε επίσης να προσθέσετε ενδείξεις ολίσθησης.
Το χαρακτηριστικό data-slide-to προσθέτει στο καρουζέλ τη δυνατότητα πρόσθετης πλοήγησης διαφανειών χρησιμοποιώντας ενδείξεις. Το χαρακτηριστικό data-slide-to περιέχει τον αύξοντα αριθμό (ευρετήριο) της διαφάνειας ως τιμή. Οι διαφάνειες στο καρουζέλ μετρώνται από το μηδέν. Εάν είναι απαραίτητο ο χρήστης να μεταβεί στην τρίτη διαφάνεια όταν κάνει κλικ στην ένδειξη, τότε το χαρακτηριστικό data-slide-to με την τιμή 2 πρέπει να προστεθεί στον δείκτη.
Προσθήκη λεζάντων σε διαφάνειες καρουζέλ
Μπορείτε να προσθέσετε λεζάντες σε διαφάνειες. Αυτό γίνεται προσθέτοντας σε κάθε διαφάνεια κάποιο στοιχείο, για παράδειγμα, div, με κλάση carousel-caption . Εάν είναι απαραίτητο, αυτές οι επιγραφές μπορούν να εμφανιστούν χρησιμοποιώντας κλάσεις εμφάνισης σε ορισμένες οθόνες και να κρυφτούν σε άλλες.
Οι κλάσεις Boostrap 4 για τον έλεγχο της εμφάνισης στοιχείων δίνονται σε αυτό το άρθρο.
Καρουσέλ κινουμένων σχεδίων εμφάνισης (Bootstrap 4)
Προσθέστε την κλάση carousel-fade στο carousel για να αλλάξετε την κίνηση μετάβασης σε fade in animation.
Εκκίνηση του καρουζέλ με JavaScript
Το καρουζέλ μπορεί να ενεργοποιηθεί χρησιμοποιώντας κώδικα JavaScript:
$(".carousel").carousel();
Αντικαταστήστε το ".carousel" με τον κατάλληλο επιλογέα για να επιλέξετε ένα ή περισσότερα καρουζέλ για ενεργοποίηση.
Ρύθμιση καρουζέλ
Το καρουζέλ διαμορφώνεται χρησιμοποιώντας τις παραμέτρους. Οι παράμετροι μπορούν να οριστούν χρησιμοποιώντας τόσο χαρακτηριστικά δεδομένων όσο και JavaScript.
Όταν χρησιμοποιείτε χαρακτηριστικά δεδομένων, προσθέστε το πρόθεμα στο όνομα της παραμέτρου με data- . Για παράδειγμα, για να ορίσετε την παράμετρο interval, πρέπει να χρησιμοποιήσετε ένα χαρακτηριστικό με το όνομα data-interval .
| Ονομα | Περιγραφή |
|---|---|
| διάστημα | Προεπιλεγμένη τιμή (χιλιοστά του δευτερολέπτου): 5000, δηλ. 5 δευτερόλεπτα.Η παράμετρος διαστήματος ορίζει το χρόνο σε χιλιοστά του δευτερολέπτου (παύση) μεταξύ των αυτόματων μεταβάσεων διαφανειών καρουζέλ. Εάν αυτή η παράμετρος έχει οριστεί ως ψευδής , τότε το καρουζέλ δεν θα εκτελεί αυτόματες μεταβάσεις διαφανειών. |
| πληκτρολόγιο | Προεπιλεγμένη τιμή: true.Αυτή η παράμετρος καθορίζει εάν το καρουζέλ πρέπει να ανταποκρίνεται σε συμβάντα πληκτρολογίου. |
| παύση |
Προεπιλεγμένη τιμή: "hover".Εάν η παράμετρος παύσης έχει οριστεί σε "hover" , τότε η μετάβαση της διαφάνειας δεν θα εκτελεστεί όσο ο δρομέας βρίσκεται πάνω της. Και όταν αφήσετε τον κέρσορα, η αλλαγή της διαφάνειας θα συνεχιστεί ξανά. Εάν η παράμετρος παύσης έχει οριστεί σε false , τότε η τοποθέτηση του δείκτη του ποντικιού πάνω από το καρουζέλ δεν θα σταματήσει την αυτόματη μετάβαση της διαφάνειας. Σε συσκευές με οθόνη αφής, εάν ρυθμιστεί σε "hver" , η παύση θα ρυθμιστεί σε αφή. Αλλά μετά το πάτημα, το καρουσέλ θα αρχίσει να αλλάζει διαφάνειες μόνο μετά από χρόνο ίσο με 2 διαστήματα (η προεπιλογή είναι 10 δευτερόλεπτα). |
| βόλτα | Προεπιλεγμένη τιμή: false.Εάν οριστεί σε false , οι αυτόματες μεταβάσεις διαφανειών θα ενεργοποιηθούν μόνο αφού ο χρήστης (χρησιμοποιώντας στοιχεία ελέγχου ή ενδείξεις) πλοηγηθεί σε άλλη διαφάνεια. Εάν αυτή η παράμετρος έχει οριστεί σε "carousel" , η μετάβαση της διαφάνειας θα ξεκινήσει αυτόματα μόλις φορτωθεί η σελίδα. |
| κάλυμμα | Προεπιλεγμένη τιμή: true.Αυτή η παράμετρος καθορίζει εάν η μετάβαση της διαφάνειας πρέπει να επαναλαμβάνεται. Εκείνοι. μετά την τελευταία διαφάνεια, η μετάβαση στην πρώτη πραγματοποιείται κατά τη μετακίνηση στη συνέχεια και μετά την πρώτη στην τελευταία κατά τη μετακίνηση προηγ. Εάν αυτό δεν είναι απαραίτητο, τότε η τιμή της παραμέτρου wrap πρέπει να οριστεί σε false . |
Μέθοδοι προσθήκης καρουζέλ
Οι μέθοδοι προσθήκης Carousel φαίνονται στον πίνακα.
Ένα παράδειγμα προετοιμασίας καρουζέλ με παραμέτρους:
...
Ένα παράδειγμα χρήσης μεθόδων ελέγχου του καρουζέλ:
Συμβάντα προσθήκης καρουζέλ
Το JS Bootstrap ενεργοποιεί δύο συμβάντα για το καρουζέλ.
Και τα δύο αυτά συμβάντα έχουν τις ακόλουθες πρόσθετες ιδιότητες:
- κατεύθυνση - κατεύθυνση ολίσθησης ("αριστερά" ή "δεξιά").
- relatedTarget - το στοιχείο DOM που μετακινείται στην τρέχουσα θέση.
- από - ευρετήριο του τρέχοντος στοιχείου.
- έως - το ευρετήριο του επόμενου στοιχείου.
Οι ιδιότητες από και προς είναι διαθέσιμες μόνο στο Bootstrap 4.
Ένα παράδειγμα εργασίας με εκδηλώσεις:
Ένα παράδειγμα εργασίας με συμβάντα καρουζέλ στο Bootstrap 3:
Ανοιχτό παράδειγμαΑλλαγή διάρκειας μετάβασης (Bootstrap 4)
Η διάρκεια μετάβασης των στοιχείων .carousel-item μπορεί να αλλάξει με τη μεταβλητή $carousel-transition Sass πριν από τη μεταγλώττιση ή προσαρμοσμένο στυλ εάν χρησιμοποιείτε ήδη μεταγλωττισμένο CSS. Εάν εφαρμόζετε πολλαπλές μεταβάσεις, τότε εκτελέστε πρώτα τον μετασχηματισμό μετάβασης (για παράδειγμα: μετασχηματισμός 2,5s ease, αδιαφάνεια 0,75s ease-out).
Παραδείγματα
1. Καρουζέλ με αυτόματη αρίθμηση διαφανειών:
...
Σε αυτό το άρθρο, θα δούμε πώς μπορείτε να προσθέσετε ένα καρουζέλ ή ένα ρυθμιστικό σε μια σελίδα που είναι συνδεδεμένη με εκδόσεις Bootstrap 3 ή 4. Το περιεχόμενο των διαφανειών καρουζέλ μπορεί να ποικίλλει: κείμενο, εικόνα ή άλλο περιεχόμενο.
Τι είναι το καρουζέλ;
Το καρουζέλ (καρουσέλ) είναι ένα στοιχείο διεπαφής για την επίδειξη μιας σειράς εικόνων (διαφανειών) στον ιστότοπο. Κάθε εικόνα (διαφάνεια) εμφανίζεται συνήθως για αρκετά δευτερόλεπτα μέχρι να αντικατασταθεί από την επόμενη. Η αλλαγή της εικόνας (διαφάνεια) μπορεί να πραγματοποιηθεί τόσο αυτόματα σε τακτά χρονικά διαστήματα όσο και χειροκίνητα.
Μπορεί να παρουσιαστεί το καρουζέλ Slide in Bootstrap όχι μόνο μια εικόνα, αλλά επίσης περιεχόμενο κειμένου. Επιπλέον, όταν δημιουργείτε μια διαφάνεια, μπορείτε να χρησιμοποιήσετε τη σήμανση.
Στο Bootstrap, το στοιχείο Carousel δημιουργείται χρησιμοποιώντας την τεχνολογία CSS 3D Transforms και τον κώδικα JavaScript.
Το καρουζέλ στο Bootstrap υλοποιείται με χρήση του Page Visibilty API. Αυτό σημαίνει ότι εάν το πρόγραμμα περιήγησης υποστηρίζει αυτό το API, τότε το καρουζέλ δεν θα αλλάξει αυτόματα τις διαφάνειεςμέχρι να είναι ορατό στον χρήστη. Για παράδειγμα, εφόσον η καρτέλα που περιέχει το καρουζέλ είναι ανενεργή ή ελαχιστοποιημένη.
Το πλαίσιο Boostrap 3 και 4 δεν επιτρέπει ένθετα καρουζέλ.
Καρουζέλ χωρίς χειριστήρια
Συστατικό καρουζέλ δεν κανονικοποιεί αυτόματα τα μεγέθη εικόνων (διαφανειών).. Επομένως, ενδέχεται να απαιτούνται πρόσθετα βοηθητικά προγράμματα ή στυλ για να φέρετε το περιεχόμενο στο σωστό μέγεθος.
Ένα παράδειγμα για το πώς να το κάνετε αυτό με το CSS μπορείτε να βρείτε σε αυτό το άρθρο.
Σπουδαίος! Η ενεργή κλάση πρέπει να προστεθεί σε μία από τις διαφάνειες. Εάν αυτό δεν γίνει, τότε το καρουζέλ δεν θα εμφανιστεί.
Σήμανση HTML Carousel στο Bootstrap 3:
Η σήμανση HTML του καρουζέλ στο Bootstrap 4 διαφέρει μόνο στην κατηγορία στοιχείων. Θα πρέπει να χρησιμοποιήσετε το καρουζέλ-αντικείμενο. Επιπλέον, στο Boostrap 4, για να κάνετε τις εικόνες να ανταποκρίνονται, πρέπει να προσθέσετε την κλάση img-fluid.
Σήμανση HTML Carousel στο Bootstrap 4:
Το χαρακτηριστικό data-ride="carousel" προκαλεί την αυτόματη αλλαγή των διαφανειών καρουζέλ μετά τη φόρτωση της σελίδας. Εάν το καρουζέλ έχει αρχικοποιηθεί χρησιμοποιώντας JavaScript, τότε αυτό το χαρακτηριστικό δεν χρειάζεται να χρησιμοποιηθεί.
Καρουζέλ με χειριστήρια
Σπουδαίος! Ένα καρουζέλ με χειριστήρια ή/και ενδείξεις ολίσθησης πρέπει να έχει αναγνωριστικό . Και τα στοιχεία ελέγχου διαφανειών και οι δείκτες θα πρέπει να έχουν ένα χαρακτηριστικό data-target (ή href για συνδέσμους) του οποίου η τιμή πρέπει να δείχνει στο καρουζέλ (δηλαδή να αποτελείται από # και id ).
Σήμανση καρουζέλ HTML με στοιχεία ελέγχου για μετάβαση στην προηγούμενη και την επόμενη διαφάνεια:
Η συμπεριφορά των κουμπιών Προηγούμενο και Επόμενο ορίζεται στο καρουζέλ χρησιμοποιώντας το χαρακτηριστικό διαφάνεια δεδομένων.
Η προηγούμενη τιμή αυτού του χαρακτηριστικού συσχετίζει ορισμένες ενέργειες με το κουμπί, με τη βοήθεια του οποίου θα αλλάξει την τρέχουσα διαφάνεια στην προηγούμενη. Η επόμενη τιμή συσχετίζει με το κουμπί, αντίστοιχα, άλλες ενέργειες που θα αλλάξουν την τρέχουσα διαφάνεια στην επόμενη.
Καρουζέλ με δείκτες διαφάνειας
Στο καρουζέλ με χειριστήρια, μπορείτε επίσης να προσθέσετε ενδείξεις ολίσθησης.
Το χαρακτηριστικό data-slide-to προσθέτει στο καρουζέλ τη δυνατότητα πρόσθετης πλοήγησης διαφανειών χρησιμοποιώντας ενδείξεις. Το χαρακτηριστικό data-slide-to περιέχει τον αύξοντα αριθμό (ευρετήριο) της διαφάνειας ως τιμή. Οι διαφάνειες στο καρουζέλ μετρώνται από το μηδέν. Εάν είναι απαραίτητο ο χρήστης να μεταβεί στην τρίτη διαφάνεια όταν κάνει κλικ στην ένδειξη, τότε το χαρακτηριστικό data-slide-to με την τιμή 2 πρέπει να προστεθεί στον δείκτη.
Προσθήκη λεζάντων σε διαφάνειες καρουζέλ
Μπορείτε να προσθέσετε λεζάντες σε διαφάνειες. Αυτό γίνεται προσθέτοντας σε κάθε διαφάνεια κάποιο στοιχείο, για παράδειγμα, div, με κλάση carousel-caption . Εάν είναι απαραίτητο, αυτές οι επιγραφές μπορούν να εμφανιστούν χρησιμοποιώντας κλάσεις εμφάνισης σε ορισμένες οθόνες και να κρυφτούν σε άλλες.
Οι κλάσεις Boostrap 4 για τον έλεγχο της εμφάνισης στοιχείων δίνονται σε αυτό το άρθρο.
