Πολλοί άνθρωποι στον δικό τους ιστότοπο θέλουν να βλέπουν ρυθμιστικά - αυτά είναι μπλοκ που εμφανίζουν ένα στοιχείο περιεχομένου στην οθόνη και μετά από ένα ορισμένο χρονικό διάστημα αλλάζουν αυτό το περιεχόμενο σε άλλο. Φυσικά, κάθε προγραμματιστής ιστού μπορεί να δημιουργήσει ανεξάρτητα ένα ρυθμιστικό χρησιμοποιώντας HTML, CSS και JavaScript, αλλά αυτό δεν έχει πάντα νόημα. Θα ξοδέψετε πολύ χρόνο, παρά το γεγονός ότι υπάρχουν αρκετές έτοιμες λύσεις στο Διαδίκτυο που κάνουν τη ζωή σας πολύ πιο εύκολη και κάνουν τον ιστότοπό σας πολύ πιο ελκυστικό. Αυτό το άρθρο θα επικεντρωθεί σε μία από αυτές τις λύσεις που ονομάζεται Owl Carousel. Η ρύθμιση αυτού του ρυθμιστικού είναι απίστευτα απλή, οπότε ακόμη και ένας αρχάριος μπορεί να το χειριστεί. Τώρα θα μάθετε τι είναι αυτό το ρυθμιστικό, καθώς και άλλες σημαντικές λεπτομέρειες. Η ρύθμιση του Owl Carousel είναι μια διαδικασία βήμα προς βήμα, επομένως θα πρέπει να μελετήσετε αυτό το υλικό μόνο με τη σειρά.
Τι είναι και γιατί να επιλέξετε αυτό το συγκεκριμένο ρυθμιστικό;
Το Owl Carousel, η διαμόρφωση του οποίου θα συζητηθεί σε αυτό το άρθρο, είναι μια πολύ αποτελεσματική προσθήκη που προσθέτει ένα όμορφο και βολικό ρυθμιστικό στη σελίδα σας, το οποίο θα διευκολύνει σημαντικά την εργασία σας στον ιστότοπο,εξοικονομώντας πολύ χρόνο, κόπο και χρήματα. Ποια είναι τα πλεονεκτήματα του συγκεκριμένου πρόσθετου, επειδή υπάρχουν αρκετά ρυθμιστικά στον Ιστό; Γεγονός είναι ότι αυτό το ρυθμιστικό σας προσφέρει δεκάδες επιλογές προσαρμογής, που θα σας επιτρέψουν να κάνετε τη σελίδα σας μοναδική και απαράμιλλη. Είναι ένα responsive plugin που θα λειτουργεί σε όλες τις εκδόσεις του προγράμματος περιήγησης και μπορεί εύκολα να συνδεθεί με το WordPress και άλλα δημοφιλή CMS. Γενικά, αυτό το ρυθμιστικό έχει πολλά πλεονεκτήματα, επομένως πρέπει οπωσδήποτε να κάνετε μια επιλογή υπέρ του. Ωστόσο, πριν ξεκινήσετε τη ρύθμιση του Owl Carousel, αυτή η προσθήκη πρέπει να φορτωθεί.
Λήψη
Η ρύθμιση του Owl Carousel 2 δεν είναι δυνατή εάν δεν το έχετε κατεβάσει στον υπολογιστή σας, και επειδή αυτή είναι μια οδηγία βήμα προς βήμα, θα πρέπει να ξεκινήσετε από την αρχή. Έτσι, το πρόγραμμα μπορεί να ληφθεί χρησιμοποιώντας διαχειριστές πακέτων, αλλά αυτά είναι προηγμένα εργαλεία προγραμματιστή, επομένως εδώ θα σας πούμε πώς να αποκτήσετε αυτό το πρόσθετο με τον τυπικό τρόπο. Πρέπει να μεταβείτε στον επίσημο ιστότοπο του πρόσθετου και να κατεβάσετε την τελευταία του έκδοση. Μετά από αυτό, όλα τα ληφθέντα αρχεία πρέπει να μεταφερθούν στον κατάλογο του ιστότοπού σας, έχοντας προετοιμάσει έναν βολικό φάκελο, ο οποίος ονομάζεται το ίδιο με το ίδιο το πρόσθετο. Σημειώστε ότι αυτό το πρόσθετο συνοδεύεται από jQuery, επομένως πρέπει να έχετε και αυτή τη βιβλιοθήκη διαθέσιμη. Λοιπόν, αφού κατεβάσετε αυτήν την προσθήκη, θα πρέπει να φροντίσετε για το επόμενο βήμα που είναι η ρύθμιση του ρυθμιστικού Owl Carousel 2.
CSS
ΒΟι ρυθμίσεις του Owl Carousel 1.3 παραμένουν σχεδόν οι ίδιες με τη νεότερη έκδοση 2, προστίθενται μόνο νέες δυνατότητες. Ωστόσο, οι βασικές πληροφορίες θα είναι οι ίδιες, ξεκινώντας με την προσθήκη CSS στο έγγραφό σας. Έτσι, το πρώτο βήμα είναι να προσθέσετε τη γραμμή. Τι σου δίνει; Αυτή είναι μια συμβολοσειρά που φορτώνει τα απαραίτητα στυλ στον ιστότοπο για την εμφάνιση του ρυθμιστικού. Εδώ μπορείτε να ολοκληρώσετε κάνοντας μόνοι σας την οπτική επεξεργασία. Ωστόσο, υπάρχει μια πιο βολική και πιο γρήγορη λύση. Μπορείτε επίσης να προσθέσετε μια γραμμή που φορτώνει επίσης το προεπιλεγμένο θέμα του ρυθμιστικού, καθιστώντας το άμεσα έτοιμο για χρήση. Μπορείτε να επεξεργαστείτε μερικά από τα στυλ για να κάνετε το ρυθμιστικό σας πιο μοναδικό και διαφορετικό και πιο κατάλληλο για το περιεχόμενό σας. Φυσικά, οι ρυθμίσεις του Owl Carousel στα Ρωσικά θα ήταν πολύ βολικές, αλλά κάθε άτομο που δημιουργεί ιστότοπους θα πρέπει να καταλάβει ότι δεν μπορεί να κάνει χωρίς γνώση αγγλικών.
σύνδεση JavaSpript
Φυσικά, το ρυθμιστικό δεν θα λειτουργήσει χωρίς JS, επομένως θα πρέπει επίσης να φροντίσετε να συμπεριλάβετε το κατάλληλο αρχείο που περιέχει τον απαραίτητο κώδικα. Για να γίνει αυτό, πρέπει να εισαγάγετε μια γραμμή κώδικα από την τεκμηρίωση, ωστόσο, πρέπει να πληρούται μία προϋπόθεση. Όλοι γνωρίζουν ότι η JS είναι μια γλώσσα προγραμματισμού που εκτελεί όλες τις εντολές με τη σειρά, οπότε σε αυτήν την περίπτωση θα πρέπει να προσθέσετε αυτήν τη γραμμή κώδικα μετά τη γραμμή που προσθέτει τη βιβλιοθήκη jQuery στο έγγραφό σας. Περισσότερα με το JS στην περίπτωση αυτού του ρυθμιστικού, δεν έχετε τίποτα να κάνετεανάγκη.
HTML κωδικοποίηση
Λοιπόν, συνδέσατε το ρυθμιστικό, τώρα ήρθε η ώρα να το σχεδιάσετε και να το προσαρμόσετε. Πρώτα απ 'όλα, πρέπει να γράψετε τον κώδικα HTML για να εμφανίζεται καθόλου το ρυθμιστικό στη σελίδα σας. Για να το κάνετε αυτό, πρέπει να δημιουργήσετε ένα δοχείο που θα περιέχει τις διαφάνειες. Αυτό μπορεί να γίνει χρησιμοποιώντας την ετικέτα div, στην οποία πρέπει να εκχωρηθεί η κλάση κουκουβάγια-καρουσέλ. Αυτή η κλάση είναι που διασφαλίζει ότι θα ενεργοποιηθούν όλα τα στυλ που σχετίζονται με το ρυθμιστικό. Μπορείτε επίσης να γράψετε μια άλλη τάξη - θέμα κουκουβάγιας. Θα σας φανεί χρήσιμο εάν αποφασίσετε να χρησιμοποιήσετε την προεπιλεγμένη σχεδίαση ή να χρησιμοποιήσετε την τυπική έκδοση του ρυθμιστικού ως βάση για περαιτέρω εργασία.
Στη συνέχεια, πρέπει να προσθέσετε κάθε διαφάνεια σε ξεχωριστό δοχείο με ετικέτα div. Φυσικά, μπορείτε να χρησιμοποιήσετε άλλες ετικέτες, αλλά αυτή η ετικέτα είναι η καλύτερη για ρυθμιστικά.
Προσθήκη κλήσης
Και το τελευταίο πράγμα που πρέπει να κάνετε για να έχετε ένα έτοιμο ρυθμιστικό στον ιστότοπό σας είναι να χρησιμοποιήσετε αυτό το μπλοκ κώδικα:
$(document).ready(function(){
$(".owl-carousel").owlCarousel();
});
Διασφαλίζει ότι το ρυθμιστικό αρχίζει να λειτουργεί, δηλαδή κύλιση στο περιεχόμενο, όταν φορτώνεται η σελίδα σας. Με τον ίδιο κωδικό, μπορείτε να συνδέσετε το Owl Carousel στο WordPress. Οι ρυθμίσεις αυτής της προσθήκης είναι πολλές και ποικίλες, και τώρα θα μάθετε για τα πιο βασικά σημεία.
Ρύθμιση της εμφάνισης και της λειτουργικότητας του ρυθμιστικού
Λοιπόν, ποιες εντολές μπορείτε να χρησιμοποιήσετε για να προσαρμόσετε το ρυθμιστικό σας; Πρώτα απ 'όλα, πρέπει να θυμάστε την εντολή αντικείμενα, γιατί με αυτήν μπορείτε να ορίσετε έναν συγκεκριμένο αριθμό διαφανειών στο ρυθμιστικό σας. Η εντολή βρόχου θα σας επιτρέψει να επιλέξετε εάν θα επαναφέρετε το ρυθμιστικό ή αν θα σταματήσετε την κύλιση στο τελευταίο στοιχείο. Υπάρχει και η εντολή Drag, η οποία έχει αρκετές επιλογές, όπως ποντίκι και αφή. Στην πρώτη περίπτωση, μπορείτε να το κάνετε έτσι ώστε τα στοιχεία του ρυθμιστικού σας να μπορούν να σύρονται με το ποντίκι πατημένο και στη δεύτερη περίπτωση, με τη βοήθεια ενός αγγίγματος (αυτή η εντολή είναι κατάλληλη για κινητές συσκευές). Μια άλλη σημαντική εντολή είναι η nav, η οποία επιτρέπει την εμφάνιση των βελών πλοήγησης. Μαζί με αυτό, μπορείτε να χρησιμοποιήσετε την εντολή navText για να προσθέσετε ετικέτες στα κουμπιά πλοήγησης. Επίσης, δεν πρέπει να ξεχνάτε την εντολή αυτόματης αναπαραγωγής, η οποία σας επιτρέπει να ενεργοποιήσετε και να απενεργοποιήσετε την αυτόματη έναρξη της περιστροφής των διαφανειών του ρυθμιστικού σας κατά τη φόρτωση της σελίδας. Με αυτήν την εντολή, μπορείτε επίσης να χρησιμοποιήσετε το autoplayTimeout, για το οποίο μπορείτε να ορίσετε μια συγκεκριμένη τιμή σε χιλιοστά του δευτερολέπτου, η οποία θα καθορίσει το χρόνο μεταξύ της αυτόματης περιστροφής καθεμιάς από τις διαφάνειες.
Εάν χρησιμοποιείτε responsive web design, δηλαδή η σχεδίαση της σελίδας σας αλλάζει αυτόματα ανάλογα με τη συσκευή που προβάλλεται, τότε πρέπει οπωσδήποτε να θυμάστε την εντολή responsive, η οποία σας επιτρέπει να ορίσετε τον αριθμό των διαφανειών για εμφάνιση ανάλογα με το πλάτος της οθόνης στην οποία προβάλλεται η σελίδα.
