Πολλοί άνθρωποι στην ιστοσελίδα τους θέλουν να δουνΤα sliders είναι τέτοια μπλοκ που εμφανίζουν ένα στοιχείο περιεχομένου στην οθόνη και μετά από ένα ορισμένο χρονικό διάστημα αλλάζουν αυτό το περιεχόμενο σε άλλο. Φυσικά, κάθε web developer είναι σε θέση να δημιουργήσει ένα slider από μόνος του χρησιμοποιώντας HTML, CSS και JavaScript, αλλά αυτό δεν έχει πάντα νόημα. Θα περάσετε πολύ χρόνο, αν και υπάρχουν αρκετές έτοιμες λύσεις στο Διαδίκτυο που διευκολύνουν πολύ τη ζωή σας και κάνουν τον ιστοχώρο σας πολύ πιο ελκυστικό. Σε αυτό το άρθρο, θα συζητήσουμε μία από αυτές τις λύσεις, που ονομάζεται Carousel Owl. Η ρύθμιση αυτού του ρυθμιστικού είναι απίστευτα απλή, οπότε και ο αρχάριος μπορεί να το αντιμετωπίσει. Τώρα θα μάθετε τι αντιπροσωπεύει αυτό το slider, καθώς και άλλες σημαντικές λεπτομέρειες. Η δημιουργία του Carousel κουκουβάγιας γίνεται με βήμα προς βήμα, επομένως πρέπει να μελετήσετε αυτό το υλικό μόνο με τη σειρά.
Τι είναι αυτό και γιατί αξίζει να επιλέξετε αυτό το slider;
Owl Carousel, του οποίου η ρύθμιση θα είναιθεωρείται σε αυτό το άρθρο, είναι ένα πολύ αποτελεσματικό plug-in που προσθέτει στη σελίδα σας ένα ωραίο και βολικό ρυθμιστικό που θα διευκολύνει σημαντικά την εργασία σας στον ιστότοπο, επιτρέποντάς σας να εξοικονομήσετε πολύ χρόνο, προσπάθεια και χρήμα. Ποια είναι τα πλεονεκτήματα αυτού του συγκεκριμένου plug-in, επειδή υπάρχουν πολλοί ρυθμιστές στο διαδίκτυο; Το γεγονός είναι ότι αυτό το slider σας προσφέρει αρκετές δεκάδες επιλογές για προσαρμογή, οι οποίες θα σας επιτρέψουν να κάνετε τη σελίδα σας μοναδική και αδιάκοπη. Αυτό είναι ένα προσαρμοστικό plugin που θα λειτουργεί σε όλες τις εκδόσεις των browsers και μπορεί εύκολα να συνδεθεί με το WordPress και άλλα δημοφιλή CMS. Σε γενικές γραμμές, τα πλεονεκτήματα αυτού του ρυθμιστικού είναι πολύ, γι 'αυτό πρέπει σίγουρα να κάνετε μια επιλογή προς όφελός του. Ωστόσο, πριν ξεκινήσετε τη ρύθμιση του Carousel Owl, πρέπει να πραγματοποιήσετε λήψη αυτής της προσθήκης.
Λήψη
Η ρύθμιση του Carousel 2 κουκουβάγιας δεν είναι δυνατή αν δεν το κάνετεΈχω κατεβάσει στον υπολογιστή σας, καθώς και οδηγίες βήμα προς βήμα, θα πρέπει να ξεκινήσει από την αρχή. Έτσι, το πρόγραμμα μπορείτε να το κατεβάσετε χρησιμοποιώντας τον διαχειριστή πακέτων, αλλά αυτό προηγμένα εργαλεία ανάπτυξης, έτσι και εδώ θα μάθετε πώς να πάρει το βύσμα σε ένα πρότυπο τρόπο. Πρέπει να μεταβείτε στην επίσημη τοποθεσία του plugin και να κάνετε λήψη της τελευταίας έκδοσης. Μετά από αυτό, το μόνο που χρειάζεται να μεταφέρετε τα ληφθέντα αρχεία σε έναν κατάλογο του δικτυακού σας τόπου, ετοιμάζοντας ένα βολικό φάκελο που έχει το ίδιο όνομα με το ίδιο το πρόγραμμα. Σημειώστε ότι αυτό σχετίζεται με το plugin jQuery, οπότε θα πρέπει επίσης να είναι διαθέσιμη και η βιβλιοθήκη. Λοιπόν, όταν κάνετε λήψη αυτό το plugin, θα πρέπει να κάνουμε το επόμενο βήμα, δηλαδή το ρυθμιστικό περιβάλλον κουκουβάγια Carousel 2.
CSS
Στο Carusel κουκουβάγας 1.Οι 3 ρυθμίσεις παραμένουν σχεδόν ίδιες με αυτές της νεότερης δεύτερης έκδοσης, προστίθενται μόνο νέες λειτουργίες. Ωστόσο, οι βασικές πληροφορίες θα είναι οι ίδιες, ξεκινώντας με την προσθήκη του CSS στο έγγραφό σας. Έτσι, το πρώτο βήμα είναι να προσθέσετε μια γραμμή στον κώδικα HTML . Что она вам дает?Αυτή είναι μια συμβολοσειρά που μεταφορτώνει τα απαραίτητα στυλ στον ιστότοπο για να εμφανίσει το ρυθμιστικό. Σε αυτό μπορείτε να τελειώσετε αναλαμβάνοντας την οπτική επεξεργασία μόνοι σας. Ωστόσο, υπάρχει μια πιο βολική και γρήγορη λύση. Μπορείτε επίσης να προσθέσετε μια γραμμή. <link rel = "stylesheet" href = "owlcarousel / owl.theme.default.min.css">το οποίο φορτώνει επίσης το προεπιλεγμένο θέμαρυθμιστικό, καθιστώντας το άμεσα έτοιμο για χρήση. Μπορείτε να επεξεργαστείτε ορισμένα από τα στυλ για να κάνετε το ρυθμιστικό σας πιο μοναδικό και ασυνήθιστο, καθώς και πιο κατάλληλο για το περιεχόμενό σας. Φυσικά, οι ρυθμίσεις του Owl Carousel στα ρωσικά θα ήταν πολύ βολικές, αλλά κάθε άτομο που δημιουργεί ιστότοπους πρέπει να καταλάβει ότι δεν μπορεί να κάνει χωρίς γνώση αγγλικών.
Σύνδεση JavaSpript
Φυσικά, το ρυθμιστικό δεν θα λειτουργεί χωρίς JS,Επομένως, πρέπει επίσης να προσέξετε να συμπεριλάβετε το κατάλληλο αρχείο που περιέχει τον απαιτούμενο κωδικό. Για αυτό πρέπει να εισαγάγετε μια γραμμή κώδικα από την τεκμηρίωση, Ωστόσο, πρέπει να πληρούται ένας όρος. Όλοι γνωρίζουν ότι το JS είναι μια γλώσσα προγραμματισμού που εκτελεί όλες τις εντολές με τη σειρά, οπότε σε αυτήν την περίπτωση θα πρέπει να προσθέσετε αυτήν τη γραμμή κώδικα μετά τη γραμμή που προσθέτει τη βιβλιοθήκη jQuery στο έγγραφό σας. Δεν χρειάζεται να κάνετε τίποτα άλλο με το JS στην περίπτωση αυτού του ρυθμιστικού.
Μορφοποίηση HTML
Λοιπόν, συνδέσατε το ρυθμιστικό, τώρα ήρθε η ώρασχεδιάστε και προσαρμόστε το. Πρώτα απ 'όλα, πρέπει να γράψετε κώδικα HTML ώστε το ρυθμιστικό να εμφανίζεται καθόλου στη σελίδα σας. Για να το κάνετε αυτό, πρέπει να δημιουργήσετε ένα κοντέινερ που θα συγκρατεί τις διαφάνειες. Αυτό μπορεί να γίνει χρησιμοποιώντας την ετικέτα div, στην οποία πρέπει να εκχωρηθεί η κατηγορία κουκουβάγια-καρουζέλ. Αυτή η τάξη διασφαλίζει ότι όλα τα στυλ που σχετίζονται με το ρυθμιστικό θα ενεργοποιηθούν. Μπορείτε επίσης να προσθέσετε μια ακόμη τάξη - κουκουβάγια-θέμα. Θα είναι χρήσιμο αν αποφασίσετε να χρησιμοποιήσετε την προεπιλεγμένη σχεδίαση ή να χρησιμοποιήσετε τη βασική έκδοση του ρυθμιστικού ως βάση για περαιτέρω εργασίες.
Στη συνέχεια, πρέπει να προσθέσετε κάθε διαφάνεια σε ξεχωριστό κοντέινερ με ετικέτα div. Φυσικά, μπορείτε να χρησιμοποιήσετε και άλλες ετικέτες, αλλά αυτή η ετικέτα είναι πιο κατάλληλη για ρυθμιστικά.
Κλήση προσθήκης
Λοιπόν, το τελευταίο πράγμα που πρέπει να κάνετε για να εμφανιστεί ένα έτοιμο ρυθμιστικό στον ιστότοπό σας είναι να χρησιμοποιήσετε αυτό το μπλοκ κώδικα:
$ (έγγραφο). ήδη (συνάρτηση () {
$ (". owl-carousel"). owlCarousel ();
});
Διασφαλίζει ότι το ρυθμιστικό ξεκινάλειτουργία, δηλαδή, μετακινηθείτε στο περιεχόμενο όταν φορτώνεται η σελίδα σας. Με τον ίδιο κωδικό, μπορείτε να συνδέσετε το Owl Carousel στο WordPress. Οι ρυθμίσεις για αυτό το πρόσθετο είναι πολλές και ποικίλες και τώρα θα μάθετε για τα πιο βασικά σημεία.
Προσαρμογή της εμφάνισης και της λειτουργικότητας του ρυθμιστικού
Λοιπόν, ποιες εντολές μπορείτε να χρησιμοποιήσετε,να προσαρμόσετε το ρυθμιστικό σας; Πρώτα απ 'όλα, πρέπει να θυμάστε την εντολή item, καθώς μαζί της μπορείτε να ορίσετε έναν συγκεκριμένο αριθμό διαφανειών στο ρυθμιστικό σας. Η εντολή βρόχου θα σας επιτρέψει να επιλέξετε εάν θα κάνετε βρόχο στο ρυθμιστικό ή θα σταματήσετε την κύλιση στο τελευταίο στοιχείο. Υπάρχει επίσης μια εντολή Drag που έχει πολλές επιλογές όπως το ποντίκι και το άγγιγμα. Στην πρώτη περίπτωση, μπορείτε να το κάνετε έτσι ώστε τα στοιχεία του ρυθμιστικού σας να μπορούν να κτυπηθούν με το ποντίκι πατημένο και στη δεύτερη περίπτωση, με τη βοήθεια ενός άγγιγμα (αυτή η εντολή είναι κατάλληλη για κινητές συσκευές). Μια άλλη σημαντική εντολή είναι το nav, το οποίο επιτρέπει την εμφάνιση των βελών πλοήγησης. Μαζί με αυτήν, μπορείτε να χρησιμοποιήσετε την εντολή navText για να προσθέσετε ετικέτες στα κουμπιά πλοήγησης. Επίσης, δεν πρέπει να ξεχνάτε την εντολή αυτόματης αναπαραγωγής, η οποία σας επιτρέπει να ενεργοποιήσετε και να απενεργοποιήσετε την αυτόματη έναρξη της ενεργοποίησης των διαφανειών σας κατά τη φόρτωση της σελίδας. Μαζί με αυτήν την εντολή, μπορείτε επίσης να χρησιμοποιήσετε το autoplayTimeout, για το οποίο μπορείτε να ορίσετε μια συγκεκριμένη τιμή σε χιλιοστά του δευτερολέπτου που θα καθορίσει το χρόνο μεταξύ αυτόματης ανατροπής κάθε διαφάνειας.
Εάν χρησιμοποιείτε αποκριτική σχεδίαση Ιστού τότεΕάν η σχεδίαση της σελίδας σας αλλάζει αυτόματα ανάλογα με τη συσκευή στην οποία προβάλλεται, τότε σίγουρα πρέπει να θυμάστε σχετικά με την αποκριτική εντολή, η οποία σας επιτρέπει να ορίσετε τον αριθμό των διαφανειών που εμφανίζονται ανάλογα με το πλάτος της οθόνης στην οποία προβάλλεται η σελίδα.
