Αρχική σελίδα » Εργαλειοθήκη » Το Lory Carousel Slider διαθέτει λειτουργίες CSS Animation & Touch Support

    Το Lory Carousel Slider διαθέτει λειτουργίες CSS Animation & Touch Support

    Από όλες τις καρουσέλ plugins online Πρέπει να κάνω το καπέλο μου Lory. Είναι ένα τέτοιο απλή έννοια αλλά είναι εύκολα ένα τα πιο ισχυρά ρυθμιστικά στο δίκτυο.

    ο minified έκδοση συνολικά περίπου 7KB που δεν είναι μικρό, αλλά σίγουρα δεν είναι κακό για ένα ρυθμιστικό καρουσέλ με δυνατότητα αφής.

    Μπορείτε να προσθέσετε αυτήν την προσθήκη σε οποιονδήποτε ιστότοπο από τότε τρέχει σε jQuery ή απλή βανίλια JS. Μπορεί να τρέξει με χωρίς εξαρτήσεις το οποίο είναι εξαιρετικό για συμβατότητα.

    Το Lory είναι επίσης ένα από τα λίγα plugins που είναι δεν υποβαθμίζεται σε παλαιότερα προγράμματα περιήγησης. Του υποστηρίζεται πλήρως στο IE10+, και οι παλαιότερες εκδόσεις μπορούν ακόμα να εκτελέσουν το ρυθμιστικό, μόνο χωρίς κινούμενα σχέδια και λίγα επιπλέον.

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

    Ελέγξτε την αρχική σελίδα του Lory για πηγαίου κώδικα και λεπτομέρειες σχετικά με τη ρύθμιση.

    Ξεκινήστε προσθέτοντας τη βιβλιοθήκη Lory JS στο site σας κεφάλι Ενότητα, είτε ως plugin jQuery είτε ως βιβλιοθήκη βανίλιας. Όλες οι εκδόσεις είναι αυτήν τη στιγμή που φιλοξενείται στο Cloudflare CDN, έτσι είναι εξαιρετικά εύκολο να συμπεριλάβετε ένα αντίγραφο χωρίς λήψεις.

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

    Εδώ είναι μερικά δείγμα κώδικα που ελήφθησαν από το κύριο repo της Lory GitHub:

     
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    Τώρα στο jQuery (ή απλό JS), μπορείτε ρυθμίστε μια κλήση λειτουργίας. Θα πρέπει να μοιάζει με αυτό:

     $ ('. js_slider'). lory (άπειρη: 1); 

    Σημειώστε το άπειρος επιλογή είναι μόνο ένα από τα πολλά χαρακτηριστικά που μπορείτε να προσαρμόσετε. Και μπορείτε πάντα να αλλάξετε το .js_slider για να ικανοποιήσετε τις ανάγκες σας.

    Ενώ αναπτύσσεστε με αυτό το plugin, ενδέχεται να έχετε αρκετούς ερωτήσεις προσαρμογής. Θα ήθελα να συστήσω ιδιαίτερα περιήγηση στην τεκμηρίωση που βρίσκεται στο κάτω μέρος της σελίδας του GitHub.

    Πιθανώς δεν είναι η καλύτερη θέση για έγγραφα, αλλά ευτυχώς είναι πολύ μικρό. Έχετε μόνο περίπου 10 επιλογές να προσαρμόσετε και ίσως 10-12 διαφορετικά γεγονότα μπορείτε να τικνίσετε με. Αυτές οι πληροφορίες μπορούν επίσης να βρεθούν στο κάτω μέρος της ιστοσελίδας του Lory, αλλά είναι πολύ πιο εύκολο να το διαβάσετε στο GitHub.

    Οι ενημερώσεις δεν είναι τόσο συχνές, αλλά μπορείτε πάντα ένα αίτημα έκδοσης στο GitHub εάν αντιμετωπίζετε προβλήματα. Αν έχετε πραγματικά προβλήματα με τον κώδικα, ίσως έχετε έναν πιο εύκολο χρόνο για να τα επιλύσετε στο Overflow Stack.

    Είτε έτσι είτε αλλιώς μπορείτε ξεκινήστε αρκετά γρήγορα χρησιμοποιώντας το Cloudflare CDN και το GitHub docs. Και αν ψάχνετε για ένα ζωντανή επίδειξη με κωδικό ελέγξτε αυτή την καταχώρηση CodePen.