Παρακαλώ πείτε μου αν είναι δυνατόν να φτιάξω ένα ρυθμιστικό εικόνα φόντουχρησιμοποιώντας το slick slider;
Η Google δεν βοηθά (Η τεκμηρίωση λέει ότι οι εικόνες πρέπει να τοποθετούνται σε μπλοκ div. Τι γίνεται όμως με τις εικόνες φόντου;

@charset utf-8; html body t,dd,ol,ul,li,fieldset,form,label, legend,table,caption,tbody,tfoot,thead,tr,th,td(φόντο: καμία επαναλαμβανόμενη κύλιση 0 0 διαφανές; περίγραμμα: 0 κανένα; μέγεθος γραμματοσειράς: 100%; περίγραμμα: 0; e: σύμπτυξη; καμβάς, λεπτομέρειες, υπότιτλους, εικόνα, υποσέλιδο, κεφαλίδα, hgroup, πλοήγηση, ενότητα, σύνοψη (εμφάνιση: μπλοκ;) * ( -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box, buttonover a boxover:border-box; ( -moz-transition:all 2 00ms linear; -ms-transition:all 200ms linear; -o-transition:all 200ms linear; -webkit-transition:all 200ms linear; transition:all 200ms linear; cursor: pointer; ) .F_COL_C-EN-Freeflow: F_COL_C-START_ justify-content: flex-start; στοίχιση-στοιχεία: κέντρο; ) .F_ROW_C-START_I-CENTER ( display: flex; flex-flow: row nowrap; justify-content: flex-start; align-item: center; ) .F_ROW_C-S-B_I-F-S ( display: flex; flex-flow: row nowrap; justify-betemswetent; ROW_C-STAR T_I-STRETCH ( display: flex; flex-flow: row nowrap; justify-content: flex-start; align-item: stretch; ) body (φόντο-χρώμα: #fff; χρώμα: #413d4b; γραμματοσειρά-οικογένεια:"Roboto", sans-serif3:00:0. x; ) .wrap ( πλάτος: 58,75vw ; περιθώριο: 0 αυτόματο, θέση: σχετική g_header.jpg); background-repeat: no-repeat; background -size: cover; background-position: center; overflow: hidden; ) #top_header ( display: flex; flex-flow: row nowrap; justify-content: space-between; align-item: center; margin-top: 3.2vh.top. οθόνη: flex; flex-flow: row nowrap; ) nav li( στιλ λίστας: κανένας; μετατροπή κειμένου: κεφαλαία; χρώμα: #fff; γραμματοσειρά οικογένειας: "Roboto Black", sans-serif; περιθώριο-αριστερό: 1,25vw; ) nav a( κείμενο-διακόσμηση: κανένα; βάρος γραμματοσειράς: έντονη; χρώμα: #fff; -top: 24,4 vh; ) #header_content h2( font-family: "Playfair Display", σερίφ; χρώμα: #fff; μέγεθος γραμματοσειράς: 2vw; στοίχιση κειμένου: κέντρο; ) hr ( περίγραμμα: κανένα; πλάτος: 3. 12vw; ύψος: 1px; χρώμα φόντου: #00e0d0; χρώμα: #00e0d0; margin-top: 3,8vh; ) #header_content p ( πλάτος: 48,6vw; χρώμα: #fff; ύψος γραμμής: 3,5vh; στοίχιση κειμένου: κέντρο; περιθώριο-πάνω: 4,17vh; ) .btn ( padding: 0,8vw 1,5vw; γραμματοσειρά-οικογένεια: "Onethser-family:"Hammerswmi. #00e0d0; μορφή μετατροπής κειμένου: κεφαλαία; περίγραμμα: 1px συμπαγές #00e0d0; χρώμα φόντου: διαφανές; ακτίνα περιγράμματος: 2 px; margin-top: 7,3vh; ) flex-start; margin-top: 18,9vh;)

We Are Awesome Creative Agency

---

Αυτή είναι η έκδοση του Lorem Ipsum του Photoshop. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. αναμμένο.

Μάθε περισσότερα

Εάν πρέπει να προσθέσετε ένα ρυθμιστικό εικόνας jQuery υψηλής ποιότητας στον ιστότοπό σας, τότε σε αυτό το άρθρο θα βρείτε μια περιγραφή των απαραίτητων προσθηκών. Παρόλο που το jQuery έχει κάνει πολύ πιο εύκολη την εργασία με το JavaScript, εξακολουθούμε να χρειαζόμαστε πρόσθετα για να επιταχύνουμε τη διαδικασία σχεδίασης ιστού.

Μπορούμε να κάνουμε αλλαγές σε ορισμένα από αυτά τα πρόσθετα και να δημιουργήσουμε νέα ρυθμιστικά που ταιριάζουν πολύ καλύτερα στις ανάγκες του ιστότοπού μας.

Για άλλα ρυθμιστικά, απλώς προσθέστε τίτλους, εικόνες και επιλέξτε εφέ μετάβασης διαφανειών που συνοδεύουν το ρυθμιστικό. Όλα αυτά τα πρόσθετα συνοδεύονται από λεπτομερή τεκμηρίωση, επομένως είναι εύκολο να προσθέσετε νέα εφέ ή δυνατότητες σε αυτά. Μπορείτε ακόμη και να αλλάξετε τους κανόνες που βασίζονται σε συμβάντα εάν είστε έμπειρος προγραμματιστής jQuery.

Πρόσφατες τάσεις όπως προσαρμοστικός σχεδιασμός, είναι πολύ σημαντικά για έργα web, είτε εφαρμόζετε ένα πρόσθετο είτε ένα σενάριο. Όλα αυτά τα στοιχεία καθιστούν κάθε ένα από αυτά τα πρόσθετα πολύ ευέλικτο. Όλα όσα βγήκαν το 2014 περιλαμβάνονται σε αυτή τη λίστα.

Ρυθμιστικά εικόνας jQuery

Jssor Responsive Slider

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

• Προσαρμοστικός σχεδιασμός;
• Πάνω από 15 επιλογές προσαρμογής.
• Περισσότερα από 15 εφέ αλλαγής εικόνας.
• Συλλογή εικόνων, καρουζέλ, υποστήριξη μεγέθους πλήρους οθόνης.
• Κατακόρυφος περιστροφέας banner, λίστα διαφανειών.
• Υποστήριξη βίντεο.

Επίδειξη | Κατεβάστε

PgwSlider - ρυθμιστικό με απόκριση βάσει jQuery / Zepto

Ο μοναδικός σκοπός αυτής της προσθήκης είναι να εμφανίζει διαφάνειες εικόνων. Είναι πολύ συμπαγές, καθώς τα αρχεία jQuery είναι μόνο 2,5 KB, γεγονός που το καθιστά πολύ γρήγορο στη φόρτωσή του:

• Αποκριτική διάταξη.
• Βελτιστοποίηση SEO?
• Υποστήριξη για διαφορετικά προγράμματα περιήγησης.
• Απλές μεταβάσεις εικόνας.
• Το μέγεθος του αρχείου είναι μόνο 2,5 KB.

Επίδειξη | Κατεβάστε

jQuery Vertical News Slider

Ένα ευέλικτο και χρήσιμο ρυθμιστικό jQuery σχεδιασμένο για ειδησεογραφικούς πόρους με λίστα δημοσιεύσεων στην αριστερή πλευρά και προβολή εικόνας στα δεξιά:

• Προσαρμοστικός σχεδιασμός;
• Ειδήσεις αλλαγής κάθετης στήλης.
• Εκτεταμένες κεφαλίδες.

Επίδειξη | Κατεβάστε

Wallop Slider

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

• Αποκριτική διάταξη.
• Απλός σχεδιασμός?
• Διάφορες επιλογές για αλλαγή διαφανειών.
• Ελάχιστος κώδικας JavaScript.
• Το μέγεθος είναι μόνο 3Kb.

Επίδειξη | Κατεβάστε

Επίπεδη γκαλερί Polaroid

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

• Ρυθμιστικό με απόκριση.
• Επίπεδη σχεδίαση?
• Τυχαία αλλαγή διαφάνειας.
• Πλήρης πρόσβαση στον πηγαίο κώδικα.

Επίδειξη | Κατεβάστε

A-Slider

Επίδειξη | Κατεβάστε

HiSlider - HTML5, jQuery και ρυθμιστικό εικόνας WordPress

Το HiSlider παρουσίασε ένα νέο δωρεάν πρόσθετο slider jQuery με το οποίο μπορείτε να δημιουργήσετε μια ποικιλία από γκαλερί εικόνων με φανταστικές μεταβάσεις:

• Ρυθμιστικό με απόκριση.
• Δεν απαιτεί γνώσεις προγραμματισμού.
• Πολλά καταπληκτικά πρότυπα και δέρματα.
• Όμορφα εφέ μετάβασης.
• Υποστήριξη για διαφορετικές πλατφόρμες.
• Συμβατό με WordPress, Joomla, Drupal.
• Δυνατότητα προβολής περιεχομένου ΔΙΑΦΟΡΕΤΙΚΟΙ ΤΥΠΟΙ: εικόνες, βίντεο youtubeκαι βίντεο Vimeo?
• Ευέλικτη ρύθμιση.
• Χρήσιμα πρόσθετα χαρακτηριστικά.
• Απεριόριστος αριθμός εμφανιζόμενου περιεχομένου.

Επίδειξη | Λήψη

wow ρυθμιστικό

Το WOW Slider είναι ένα αποκριτικό ρυθμιστικό εικόνας jQuery με εκπληκτικό οπτικά εφέ (ντόμινο, περιστροφή, θόλωση, αναστροφή και φλας, flyout, blinds) και επαγγελματικά πρότυπα.

Το WOW Slider συνοδεύεται από έναν οδηγό εγκατάστασης που σας επιτρέπει να δημιουργείτε φανταστικά ρυθμιστικά σε δευτερόλεπτα χωρίς να χρειάζεται να καταλάβετε τον κώδικα και να επεξεργαστείτε εικόνες. Διατίθενται επίσης για λήψη εκδόσεις του πρόσθετου για Joomla και WordPress:

• Πλήρως απόκριση.
• Υποστήριξη για όλα τα προγράμματα περιήγησης και όλους τους τύπους συσκευών.
• Υποστήριξη συσκευές αφής;
• Εύκολη εγκατάσταση στο WordPress.
• Ευελιξία στην προσαρμογή.
• Βελτιστοποιημένο για SEO.

Επίδειξη | Λήψη

Nivo Slider - δωρεάν πρόσθετο jQuery

Το Nivo Slider είναι παγκοσμίως γνωστό ως το πιο όμορφο και εύχρηστο ρυθμιστικό εικόνας. Το πρόσθετο Nivo Slider είναι δωρεάν και κυκλοφορεί με την άδεια MIT:

• Απαιτεί jQuery 1.7 και άνω.
• Όμορφα εφέ μετάβασης.
• Απλό και ευέλικτο στη ρύθμιση.
• Συμπαγές και προσαρμοστικό.
• Ανοιχτή πηγή;
• Δυνατό και απλό.
• Πολλά διαφορετικά πρότυπα.
• Αυτόματη περικοπή εικόνας.

Επίδειξη | Λήψη

Απλό ρυθμιστικό jQuery με τεχνική τεκμηρίωση

Η ιδέα ήταν εμπνευσμένη από τα ρυθμιστικά της Apple, στα οποία πολλά μικρά στοιχεία μπορούν να πετάξουν έξω με διάφορα εφέ κινούμενων σχεδίων. Οι προγραμματιστές προσπάθησαν να εφαρμόσουν αυτήν την ιδέα, λαμβάνοντας υπόψη ελάχιστες απαιτήσειςγια να δημιουργήσετε ένα απλό σχέδιο για ένα ηλεκτρονικό κατάστημα, στο οποίο τα στοιχεία "αναχωρούν" αντιπροσωπεύουν διάφορες κατηγορίες:

• Αποκριτική διάταξη.
• Μινιμαλιστικός σχεδιασμός;
• Διάφορα εφέ μετάβασης εγκατάλειψης και διαφάνειας.

Επίδειξη | Λήψη

Ρυθμιστικό εικόνας πλήρους μεγέθους jQuery

Ένα πολύ απλό ρυθμιστικό που καταλαμβάνει το 100% του πλάτους της σελίδας και προσαρμόζεται στα μεγέθη οθόνης κινητές συσκευές. Λειτουργεί με μεταβάσεις CSS και οι εικόνες «στοιβάζονται» με άγκυρες. Η άγκυρα μπορεί να αντικατασταθεί ή να αφαιρεθεί εάν δεν θέλετε να συνδέσετε την εικόνα.

Όταν οριστεί, το ρυθμιστικό επεκτείνεται στο 100% του πλάτους της οθόνης. Επίσης, μπορεί να μειώσει αυτόματα το μέγεθος των εικόνων διαφανειών:

• Αποκριτικό ρυθμιστικό jQuery
• πλήρες μέγεθος?
• Μινιμαλιστικό σχέδιο.

Επίδειξη | Λήψη

Elastic Content Slider + επίδομα

Το Elastic Content Slider προσαρμόζει αυτόματα το πλάτος και το ύψος με βάση τις διαστάσεις γονικό στοιχείο. Αυτό είναι ένα απλό ρυθμιστικό jQuery. Αποτελείται από μια περιοχή διαφάνειας στο επάνω μέρος και μια γραμμή καρτέλας πλοήγησης στο κάτω μέρος. Το ρυθμιστικό προσαρμόζει το πλάτος και το ύψος του ανάλογα με το μέγεθος του μητρικού του δοχείου.

Όταν προβάλλονται σε διαγώνια μικρές οθόνες, οι καρτέλες πλοήγησης μετατρέπονται σε μικρά εικονίδια:

• Προσαρμοστικός σχεδιασμός;
• Κύλιση με κλικ του ποντικιού.

Επίδειξη | Λήψη

Δωρεάν 3D Stack Slider

Ένα πειραματικό ρυθμιστικό που κάνει κύλιση στις εικόνες σε 3D. Δύο στοίβες μοιάζουν με στοίβες χαρτιού, από τις οποίες, κατά την κύλιση, εμφανίζονται εικόνες στο κέντρο του ρυθμιστικού:

• Προσαρμοστικός σχεδιασμός;
• Αναστροφή - μετάβαση?
• 3D εφέ.

Επίδειξη | Λήψη

Slider πλήρους οθόνης βασισμένο σε εγχειρίδιο jQuery και CSS3 +

Στο σεμινάριο, θα μάθετε πώς να δημιουργείτε ένα ρυθμιστικό με περιστροφή: η ιδέα είναι να "κόψετε" και να εμφανίσετε την τρέχουσα διαφάνεια όπως είναι όταν ανοίγετε την επόμενη ή την προηγούμενη εικόνα. Χρησιμοποιώντας jQuery και CSS animation, μπορούμε να δημιουργήσουμε μοναδικά εφέ μετάβασης:

• Προσαρμοστικός σχεδιασμός;
• Διαίρεση μετάβασης;
• Ρυθμιστικό πλήρους οθόνης.

Επίδειξη | Λήψη

Unislider - ένα πολύ μικρό ρυθμιστικό jQuery

Χωρίς περιττά κουδούνια και σφυρίχτρες και σήμανση, το μέγεθος είναι μικρότερο από 3KB. Χρησιμοποιήστε οποιονδήποτε κώδικα HTML για τις διαφάνειές σας, επεκτείνετε τον με χρησιμοποιώντας CSS. Όλα όσα σχετίζονται με το Unslider φιλοξενούνται στο GitHub:

• Υποστήριξη για διάφορα προγράμματα περιήγησης.
• Υποστήριξη πληκτρολογίου.
• Ρύθμιση ύψους;
• Προσαρμοστικός σχεδιασμός;
• Υποστήριξη για είσοδο αφής.

Επίδειξη | Κατεβάστε

Ελάχιστες διαφάνειες απόκρισης

Απλό και συμπαγές πρόσθετο ( το μέγεθος είναι μόνο 1 Kb) που δημιουργεί ένα αποκριτικό ρυθμιστικό χρησιμοποιώντας στοιχεία μέσα σε ένα κοντέινερ. Το ResponsiveSLides.js λειτουργεί με μεγάλο αριθμό προγραμμάτων περιήγησης, συμπεριλαμβανομένων όλων των εκδόσεων του IE από IE6 και νεότερες εκδόσεις:

• Πλήρως απόκριση.
• Μέγεθος 1 KB;
• Μεταβάσεις CSS3 που μπορούν να ενεργοποιηθούν μέσω JavaScript.
• Απλή σήμανση με χρήση λίστας με κουκκίδες.
• Δυνατότητα προσαρμογής των εφέ μετάβασης και της διάρκειας προβολής μιας διαφάνειας.
• Υποστηρίζει τη δυνατότητα δημιουργίας πολλαπλών προβολών διαφανειών.
• Αυτόματη και χειροκίνητη κύλιση.

Επίδειξη | Λήψη

Κάμερα - δωρεάν ρυθμιστικό jQuery

Η κάμερα είναι ένα πρόσθετο με πολλά εφέ μετάβασης, διάταξη με απόκριση. Εύκολη ρύθμιση, που υποστηρίζεται από κινητές συσκευές:

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

Επίδειξη | Λήψη

SlidesJS, Responsive jQuery Plugin

Το SlidesJS είναι προσαρμοστικό πρόσθετογια jQuery (1.7.1 και άνω) με υποστήριξη για συσκευές αφής και μεταβάσεις CSS3. Πειραματιστείτε με αυτό, δοκιμάστε μερικά έτοιμα παραδείγματαγια να σας βοηθήσει να καταλάβετε πώς να προσθέσετε SlidesJS στο έργο σας:

• Προσαρμοστικός σχεδιασμός;
• CSS3 μεταβάσεις.
• Υποστήριξη για συσκευές αφής.
• Εύκολο στη ρύθμιση.

Επίδειξη | Κατεβάστε

BX Jquery Slider

Αυτό είναι ένα δωρεάν ρυθμιστικό jQuery με απόκριση:

• Πλήρως απόκριση - προσαρμόζεται σε οποιαδήποτε συσκευή.
• Οριζόντια, κατακόρυφη αλλαγή διαφάνειας.
• Οι διαφάνειες μπορεί να περιέχουν εικόνες, βίντεο ή περιεχόμενο HTML.
• Εκτεταμένη υποστήριξη για συσκευές αφής.
• Χρήση μεταβάσεων CSS για κινούμενα σχέδια διαφανειών ( επιτάχυνση υλικού);
• API ανακλήσειςκαι πλήρως δημόσιες μεθόδους.
• Μικρό μέγεθος αρχείου.
• Εύκολο στην εφαρμογή.

Επίδειξη | Λήψη

Flex Slider 2

Το καλύτερο ρυθμιστικό απόκρισης. Μια νέα έκδοσηοριστικοποιήθηκε προκειμένου να αυξηθεί η ταχύτητα εργασίας, η συμπαγής.

Επίδειξη | Κατεβάστε

Galleria - Responsive JavaScript Photo Gallery

Το Galleria χρησιμοποιείται από εκατομμύρια ιστότοπους για τη δημιουργία γκαλερί εικόνων υψηλής ποιότητας. Ο αριθμός των θετικών κριτικών για τη δουλειά της μόλις ξεπερνά:

• Εντελώς δωρεάν.
• Λειτουργία προβολής πλήρους οθόνης.
• 100% προσαρμοστικό?
• Δεν απαιτείται εμπειρία προγραμματισμού.
• Υποστήριξη για iPhone, iPad και άλλες συσκευές αφής.
• Flickr, Vimeo, YouTube και άλλα.
• Αρκετά θέματα.

Επίδειξη | Κατεβάστε

Blueberry - Απλό ρυθμιστικό εικόνας jQuery με απόκριση

Σας παρουσιάζω ένα ρυθμιστικό εικόνας jQuery γραμμένο ειδικά για responsive web design. Το Blueberry είναι μια πειραματική προσθήκη ρυθμιστικού εικόνων ανοιχτού κώδικα που γράφτηκε ειδικά για να λειτουργεί με αποκριτικά πρότυπα.

1. Εξαιρετική παρουσίαση jQuery

Εξαιρετική εντυπωσιακή παρουσίαση με χρήση τεχνολογίας jQuery.

2. Πρόσθετο jQuery "Scale Carousel"

Παρουσίαση με δυνατότητα μεγέθυνσης χρησιμοποιώντας jQuery. Μπορείτε να ορίσετε τις διαστάσεις για το slideshow που σας ταιριάζει καλύτερα.

3. Πρόσθετο jQuery "slideJS"

Ρυθμιστικό εικόνας με περιγραφή κειμένου.

4. Πρόσθετο "JSliderNews"

5. CSS3 jQuery Slider

Όταν τοποθετείτε το δείκτη του ποντικιού πάνω από τα βέλη πλοήγησης, εμφανίζεται μια στρογγυλή μικρογραφία της επόμενης διαφάνειας.

6. Όμορφο ρυθμιστικό jQuery “Presentation Cycle”.

Ρυθμιστικό jQueryμε ένδειξη φόρτωσης εικόνας. Παρέχεται αυτόματη αλλαγή διαφανειών.

7. Πρόσθετο slider jQuery Parallax

Ρυθμιστικό με εφέ 3D φόντου. Το κύριο σημείο αυτού του ρυθμιστικού είναι η κίνηση του φόντου, το οποίο αποτελείται από πολλά επίπεδα, καθένα από τα οποία κυλά με διαφορετική ταχύτητα. Το αποτέλεσμα είναι μια απομίμηση ενός ογκομετρικού εφέ. Φαίνεται πολύ ωραίο, μπορείτε να το δείτε μόνοι σας. Το εφέ εμφανίζεται πιο ομαλά σε προγράμματα περιήγησης όπως: Opera, Google Chrome.ΔΗΛ.

8. Φρέσκο, ελαφρύ ρυθμιστικό jQuery "bxSlider 3.0"

Στη σελίδα επίδειξης στην ενότητα "παραδείγματα" μπορείτε να βρείτε συνδέσμους προς όλους πιθανές επιλογέςχρησιμοποιώντας αυτό το πρόσθετο.

9. jQuery Image Slider Plugin "slideJS"

Το κομψό ρυθμιστικό jQuery θα είναι σίγουρα σε θέση να διακοσμήσει το έργο σας.

10. Πρόσθετο jQuery slideshow "Easy Slides" v1.1

Ευκολο να χρησιμοποιώντας jQueryπρόσθετο slideshow.

11. Πρόσθετο "JQuery Slides"

Ανετα Πρόσθετο jQueryσε διάφορες παραστάσεις. Παρέχεται αυτόματη αλλαγή διαφανειών.

12. Συλλογή jQuery CSS με αυτόματη μετάβαση διαφανειών

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

13. jQuery Nivo Slider

Πολύ επαγγελματική ποιότητα ελαφρύ πρόσθετο με έγκυρος κωδικός. Υπάρχουν πολλά διαφορετικά εφέ μετάβασης διαφανειών.

14. jQuery Mobile Slider

Φρέσκο ​​ρυθμιστικό. Ρυθμιστικό jQuery με διαφορετικά εφέ μετάβασης εικόνας.

15. Πρόσθετο jQuery Slider²

Ελαφρύ ρυθμιστικό με αυτόματη αλλαγή ολίσθησης.

16. Φρέσκο ​​ρυθμιστικό Javascript

Ρυθμιστικό με αυτόματη αλλαγή εικόνας.

Πρόσθετο για εφαρμογή παρουσίασης με αυτόματη αλλαγή διαφανειών. Είναι δυνατός ο έλεγχος της οθόνης χρησιμοποιώντας μικρογραφίες εικόνων.

Ρυθμιστικό εικόνας jQuery CSS χρησιμοποιώντας το πρόσθετο NivoSlider.

19. Ρυθμιστικό jQuery "jShowOff".

Πρόσθετο εναλλαγής περιεχομένου. Τρεις περιπτώσεις χρήσης: χωρίς πλοήγηση (με αυτόματη αλλαγή στη μορφή προβολής διαφανειών), πλοήγηση με κουμπιά, πλοήγηση σε μικρογραφίες εικόνας.

20. Πρόσθετο χαρτοφυλακίου εφέ κλείστρου

Φρέσκο ​​πρόσθετο jQuery για σχεδιασμό χαρτοφυλακίου φωτογράφων. Η γκαλερί έχει ένα ενδιαφέρον αποτέλεσμα αλλαγής εικόνων. Οι φωτογραφίες διαδέχονται η μία την άλλη με εφέ παρόμοιο με τη λειτουργία ενός κλείστρου φακού.

21. Ελαφρύ slider javascript CSS "TinySlider 2"

Εφαρμογή ενός ρυθμιστικού εικόνας με χρησιμοποιώντας javascriptκαι CSS.

22. Φοβερό ρυθμιστικό "Tinycircleslider"

Κομψό στρογγυλό ρυθμιστικό. Η μετάβαση μεταξύ των εικόνων πραγματοποιείται σύροντας το ρυθμιστικό με τη μορφή ενός κόκκινου κύκλου γύρω από την περιφέρεια. Θα ταιριάζει απόλυτα στον ιστότοπό σας εάν χρησιμοποιείτε στρογγυλά στοιχεία στο σχέδιό σας.

23. Ρυθμιστικό εικόνας jQuery

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

24. Συλλογή μικρογραφιών Slider Kit

Slider Kit Gallery. Οι μικρογραφίες πραγματοποιούνται με κύλιση τόσο κάθετα όσο και οριζόντια. Η μετάβαση μεταξύ των εικόνων πραγματοποιείται χρησιμοποιώντας: τροχό ποντικιού, κλικ του ποντικιού ή αιώρηση πάνω από μια μικρογραφία.

25. Ρυθμιστικό περιεχομένου jQuery Slider Kit

Κάθετο και οριζόντιο ρυθμιστικό περιεχομένου jQuery.

26. Παρουσίαση παρουσίασης jQuery Slider Kit

Παρουσίαση με αυτόματη αλλαγή διαφανειών.

27. Ελαφρύ επαγγελματικό slider javascript CSS3

Προσεγμένο slider jQuery και CSS3 που δημιουργήθηκε το 2011.

Παρουσίαση μικρογραφιών jQuery.

29. Απλή παρουσίαση jQuery

Παρουσίαση με κουμπιά πλοήγησης.

30. Φοβερό jQuery Skitter Slideshow

Πρόσθετο jQuery "Skitter" για τη δημιουργία εκπληκτικών slideshows. Το πρόσθετο υποστηρίζει 22 (!) τύπους διαφορετικών εφέ κινούμενων εικόνων κατά την αλλαγή εικόνων. Μπορεί να λειτουργήσει με δύο επιλογές πλοήγησης διαφανειών: τη χρήση αριθμών διαφανειών και τη χρήση μικρογραφιών. Βεβαιωθείτε ότι έχετε ελέγξει το demo, ένα εύρημα πολύ υψηλής ποιότητας. Τεχνολογίες που χρησιμοποιούνται: CSS, HTML, jQuery, PHP.

31. Awkward Slideshow

Λειτουργική παρουσίαση. Οι διαφάνειες μπορεί να είναι: απλές εικόνες, εικόνες με λεζάντες, εικόνες με συμβουλές εργαλείων, βίντεο κλιπ. Μπορείτε να χρησιμοποιήσετε τα βέλη, τους συνδέσμους αριθμών διαφανειών και τα πλήκτρα δεξιά/αριστερά στο πληκτρολόγιό σας για πλοήγηση. Η προβολή διαφανειών γίνεται σε διάφορες εκδόσεις: με μικρογραφίες και χωρίς αυτές. Για να δείτε όλες τις επιλογές, ακολουθήστε τους συνδέσμους Επίδειξη #1 - Επίδειξη #6 που βρίσκονται στο επάνω μέρος της δοκιμαστικής σελίδας.

Ένα πολύ πρωτότυπο σχέδιο του ρυθμιστικού εικόνας, που θυμίζει ανεμιστήρα. Κινούμενη μετάβαση διαφανειών. Η πλοήγηση μεταξύ των εικόνων πραγματοποιείται χρησιμοποιώντας βέλη. Υπάρχει επίσης μια αυτόματη αλλαγή που μπορεί να ενεργοποιηθεί και να απενεργοποιηθεί χρησιμοποιώντας το κουμπί Αναπαραγωγή / Παύση που βρίσκεται στο επάνω μέρος.

Κινούμενο ρυθμιστικό jQuery. Οι εικόνες φόντου κλιμακώνονται αυτόματα όταν αλλάζει το μέγεθος του παραθύρου του προγράμματος περιήγησης. Για κάθε εικόνα, εμφανίζεται ένα μπλοκ με περιγραφή.

34. Ρυθμιστικό "Flux Slider" σε jQuery και CSS3

Νέο ρυθμιστικό jQuery. Πολλά δροσερά κινούμενα εφέ κατά την αλλαγή διαφανειών.

35. Πρόσθετο jQuery "jSwitch"

Κινούμενη γκαλερί jQuery.

Εύκολη παρουσίαση jQuery με αυτόματη αλλαγή διαφανειών.

37. Νέα έκδοση του πρόσθετου "SlideDeck 1.2.2"

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

38. jQuery Sudo Slider

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

39. Παρουσίαση jQuery CSS3

Η προβολή διαφανειών με μικρογραφίες υποστηρίζει τη λειτουργία αυτόματης μετάβασης διαφανειών.

40. Ρυθμιστικό jQuery Flux

Ρυθμιστικό με πολλά εφέ αλλαγής εικόνας.

41. Απλό ρυθμιστικό jQuery

Κομψό ρυθμιστικό εικόνας jQuery.

Ο χρόνος δεν σταματά και μαζί του και η πρόοδος. Αυτό επηρέασε και το Διαδίκτυο. Μπορείτε ήδη να δείτε την αλλαγή εμφάνισητοποθεσίες, ειδικά η προσαρμοστική σχεδίαση είναι πολύ δημοφιλής. Και ως αποτέλεσμα, πολλά νέα αποκριτικά ρυθμιστικά jquery, γκαλερί, καρουζέλ ή παρόμοια πρόσθετα.
1. Ρυθμιστικό Responsive Horizontal Posts

Οριζόντιο καρουζέλ με απόκριση με αναλυτική οδηγίαμε εγκατάσταση. Είναι φτιαγμένο σε απλό στυλ, αλλά μπορείτε να το διαμορφώσετε μόνοι σας.

2. Ρυθμιστικό στο Glide.js

Αυτό το ρυθμιστικό είναι κατάλληλο για κάθε τοποθεσία. Χρησιμοποιεί ανοιχτού κώδικα Glide.js. Τα χρώματα του ρυθμιστικού μπορούν εύκολα να αλλάξουν.

3. Παρουσίαση με κλίση περιεχομένου

Αποκριτικό ρυθμιστικό περιεχομένου. Το αποκορύφωμα αυτού του ρυθμιστικού είναι το 3d εφέ των εικόνων, καθώς και διάφορα κινούμενα σχέδια τυχαίας εμφάνισης.

4. Ρυθμιστικό με χρήση καμβά HTML5

Πολύ όμορφο και εντυπωσιακό ρυθμιστικό με διαδραστικά σωματίδια. Φτιαγμένο με καμβά HTML5

5. Ρυθμιστικό μορφοποίησης εικόνας

Ρυθμιστικό με εφέ μορφοποίησης (Ομαλή μετατροπή από το ένα αντικείμενο στο άλλο). ΣΕ αυτό το παράδειγματο ρυθμιστικό είναι κατάλληλο για το χαρτοφυλάκιο ενός προγραμματιστή ιστού ή ενός web studio με τη μορφή χαρτοφυλακίου.

6. Κυκλικό ρυθμιστικό

Ρυθμιστικό σε μορφή κύκλου με εφέ αναστροφής της εικόνας.

7. Θολό ρυθμιστικό φόντου

Αποκριτικό ρυθμιστικό με εναλλαγή και θάμπωμα φόντου.

8. Αποκριτικό ρυθμιστικό μόδας

Απλό, ελαφρύ και ανταποκρινόμενο ρυθμιστικό ιστότοπου.

9. Slicebox - slider εικόνας jQuery 3D(ΕΠΙΚΑΙΡΟΠΟΙΗΜΕΝΟ)

Ενημερωμένη έκδοση του ρυθμιστικού Slicebox με διορθώσεις και νέες δυνατότητες.

10.Δωρεάν κινούμενο πλέγμα απόκρισης εικόνας

Ένα πρόσθετο jQuery για τη δημιουργία ενός ευέλικτου πλέγματος εικόνων που θα αλλάζει λήψεις χρησιμοποιώντας διαφορετικά κινούμενα σχέδια και χρονισμούς. Αυτό μπορεί να φαίνεται καλό ως φόντο ή διακοσμητικό στοιχείο στον ιστότοπο, καθώς μπορούμε να ορίσουμε την επιλεκτική εμφάνιση νέων εικόνων και τις μεταβάσεις τους. Το πρόσθετο κατασκευάζεται σε διάφορες εκδόσεις.

11.Ρυθμιστικό Flex

Καθολική δωρεάν προσθήκη για τον ιστότοπό σας. Αυτό το πρόσθετο διατίθεται σε πολλαπλές επιλογές ρυθμιστικού και καρουζέλ.

12. Κορνίζα φωτογραφιών

Φωτόραμαείναι ένα καθολικό πρόσθετο. Έχει πολλές ρυθμίσεις, όλα λειτουργούν γρήγορα και εύκολα, είναι δυνατή η προβολή διαφανειών σε πλήρη οθόνη. Το ρυθμιστικό μπορεί να χρησιμοποιηθεί τόσο σε σταθερό μέγεθος όσο και προσαρμοστικό, με και χωρίς μικρογραφίες, με και χωρίς κυκλική κύλιση και πολλά άλλα.

ΥΣΤΕΡΟΓΡΑΦΟ.Έβαλα το ρυθμιστικό αρκετές φορές και νομίζω ότι είναι από τα καλύτερα

13. Δωρεάν και αποκριτικό ρυθμιστικό 3D Thumbnail Gallery.

Πειραματική συλλογή slider 3DPanelLayoutμε πλέγμα και ενδιαφέροντα εφέκινούμενα σχέδια.

14. Ρυθμιστικό στο css3

Αποκριτικό ρυθμιστικό κατασκευασμένο με χρήση css3 με ομαλή εμφάνιση περιεχομένου και ελαφριά κινούμενη εικόνα.

15. WOW Slider

WOW Sliderείναι ένα ρυθμιστικό εικόνας με εκπληκτικά οπτικά εφέ.

17.Ελαστικό

Ελαστικό ρυθμιστικό με πλήρη απόκριση και μικρογραφίες διαφανειών.

18. Σχισμός

Αυτό είναι ένα ρυθμιστικό που ανταποκρίνεται σε πλήρη οθόνη που χρησιμοποιεί κινούμενα σχέδια css3. Το ρυθμιστικό κατασκευάζεται σε δύο εκδόσεις. Το animation γίνεται αρκετά ασυνήθιστα και όμορφα.

19. Responsive photo gallery plus

Απλή δωρεάν συλλογή ρυθμιστικών με μεταφόρτωση εικόνων.

20. Αποκριτικό ρυθμιστικό για WordPress

Αποκριτικό δωρεάν ρυθμιστικό για WP.

21. Ρυθμιστικό περιεχομένου Parallax

Ρυθμιστικό με εφέ παράλλαξης και έλεγχος κάθε στοιχείου με CSS3.

22. Ρυθμιστικό με δέσιμο μουσικής

Ρυθμιστικό χρησιμοποιώντας JPlayer ανοιχτού κώδικα. Αυτό το ρυθμιστικό μοιάζει με παρουσίαση με μουσική.

23. Ρυθμιστικό με jmpress.js

Το αποκριτικό ρυθμιστικό βασίζεται στο jmpress.js και επομένως θα επιτρέψει την εφαρμογή μερικών ενδιαφέροντων τρισδιάστατων εφέ στις διαφάνειες.

24. Fast Hover Slideshow

παρουσίαση διαφανειών με γρήγορη εναλλαγήδιαφάνειες. Διακόπτης slides σε λειτουργία αιώρησης.

25. Ακορντεόν εικόνας με CSS3

Ακορντεόν εικόνας με css3.

26. Προσθήκη βελτιστοποιημένης συλλογής με άγγιγμα

Αυτή είναι μια αποκριτική συλλογή που είναι βελτιστοποιημένη για συσκευές αφής.

27. Γκαλερί 3D

3D Wall Gallery- δημιουργήθηκε για το πρόγραμμα περιήγησης Safari, όπου θα είναι ορατό το 3D εφέ. Όταν προβάλλεται σε διαφορετικό πρόγραμμα περιήγησης, η λειτουργικότητα θα είναι καλή, αλλά το εφέ 3D δεν θα είναι ορατό.

28. Ρυθμιστικό με σελιδοποίηση

Αποκριτικό ρυθμιστικό σελιδοποίησης με ρυθμιστικό jQuery UI. Η ιδέα είναι να χρησιμοποιήσετε μια απλή ιδέα πλοήγησης. Είναι δυνατή η επαναφορά όλων των εικόνων ή η εναλλαγή μεταξύ διαφανειών.

29.Μοντάζ εικόνας με jQuery

Αυτόματη διάταξη εικόνων ανάλογα με το πλάτος της οθόνης. Ένα πολύ χρήσιμο πράγμα κατά την ανάπτυξη ενός ιστότοπου χαρτοφυλακίου.

30. Γκαλερί 3D

Ένα απλό τρισδιάστατο κυκλικό ρυθμιστικό σε css3 και jQuery.

31. ΛΕΙΤΟΥΡΓΙΑ ΠΛΗΡΟΥΣ ΟΘΟΝΗΣμε εφέ 3D σε css3 και jQuery

Ρυθμιστικό με δυνατότητα προβολής εικόνων πλήρους οθόνης με όμορφη μετάβαση.

Το Temdo Slider είναι ένα ισχυρό και εύκολο στη διαχείριση εργαλείο για τη δημιουργία όμορφων ρυθμιστικών για τον ιστότοπό σας. Τα κύρια χαρακτηριστικά του ρυθμιστικού:

• Μπορείτε να επιλέξετε οποιαδήποτε εικόνα ή βίντεο ως φόντο κάθε διαφάνειας
• Πρόσθετη εικόνα επικάλυψης
• Κινούμενα σχέδια σε κύλιση
• Κινούμενα σχέδια κατά την αλλαγή διαφανειών

Εάν χρειάζεται να δημιουργήσετε ένα όμορφο "κλασικό" ρυθμιστικό (φόντο, όχι περισσότερα από δύο επιπλέον επίπεδα γραφικών, τίτλος, υπότιτλος, κείμενο και όχι περισσότερα από δύο κουμπιά ανά διαφάνεια), συνιστάται το Temdo Slider, ειδικά εάν χρειάζεστε ρυθμιστικά πλήρους οθόνης και βίντεο φόντου.

Δημιουργία ρυθμιστικού

Για να δημιουργήσετε ένα νέο ρυθμιστικό, στο αριστερό μενού του Πίνακα ελέγχου του WordPress, επιλέξτε Ολισθητής > Προσθήκη νέας διαφάνειας:

τύπος διαφάνειας

Η βασική ρύθμιση για μια διαφάνεια είναι ο τύπος φόντου (εικόνα ή βίντεο). Ανάλογα με την επιλογή αυτής της παραμέτρου, η διεπαφή ρυθμίσεων διαφανειών αλλάζει: όταν επιλέγετε βίντεο, αντί για μια ομάδα ρυθμίσεων Στατικό φόντοεμφανίζεται μια ομάδα κινούμενο φόντο.

φόντο διαφάνειας

Επιλέξτε μια εικόνα φόντου για τη διαφάνεια. Λάβετε υπόψη ότι η εικόνα φόντου θα τεντωθεί σε όλο το πλάτος της οθόνης (με διατήρηση της αναλογίας διαστάσεων). Επομένως, συνιστώνται εικόνες ανάλυσης Full HD (1920 x 1080 pixel). Εάν θέλετε το ρυθμιστικό να μην καταλαμβάνει ολόκληρη την οθόνη σε ύψος, πρέπει να ορίσετε το ύψος στις ρυθμίσεις του ρυθμιστικού.

εικόνα επικάλυψης

Χρησιμοποιήστε αυτήν την επιλογή για να επικαλύψετε μια πρόσθετη εικόνα με διαφανές ή ημιδιαφανές φόντο πάνω από την κύρια εικόνα φόντου. Η εικόνα επικάλυψης θα αναπαραχθεί σε ολόκληρη την επιφάνεια της διαφάνειας ως υφή.

Κινούμενα σχέδια φόντου

Επιλέξτε αυτήν την επιλογή εάν θέλετε να κάνετε κίνηση στην εικόνα φόντου. Μετά την ενεργοποίηση, γίνονται διαθέσιμοι οι ακόλουθοι τύποι κινούμενων εικόνων:

• Κέντρο ζουμ (προεπιλογή)
• Μεγέθυνση από την επάνω αριστερή γωνία
• Μεγέθυνση από την επάνω δεξιά γωνία
• Μεγέθυνση από την κάτω αριστερή γωνία
• Μεγέθυνση από την κάτω δεξιά γωνία

βίντεο φόντου

Το ρυθμιστικό Temdo υποστηρίζει μορφές βίντεο webm, mp4 και ogg.

Για να χρησιμοποιήσετε ένα βίντεο ως φόντο, πρέπει πρώτα να το ανεβάσετε στη βιβλιοθήκη πολυμέσων του ιστότοπού σας. Για να το κάνετε αυτό, στο αριστερό πλαίσιο του πίνακα ελέγχου του WordPress, επιλέξτε αρχεία πολυμέσων > Προσθεσε νεο. Αφού ολοκληρωθεί η μεταφόρτωση του βίντεο, αντιγράψτε τη διεύθυνσή του στο πρόχειρο και επιστρέψτε στην επεξεργασία της διαφάνειας. Επικολλήστε τη διαδρομή προς το αρχείο βίντεο από το πρόχειρο στην κατάλληλη ενότητα των ρυθμίσεων της διαφάνειας. Συνιστάται η χρήση βίντεο και στις τρεις μορφές όποτε είναι δυνατόν για υποστήριξη μέγιστος αριθμόςσύγχρονα προγράμματα περιήγησης.

Ιδιότητες διαφάνειας

Αυτή η ενότητα ορίζει τις βασικές παραμέτρους της διαφάνειας:

• Σχεδίαση κεφαλίδας: Μπορείτε να επιλέξετε ένα ανοιχτό σχέδιο που θα χρησιμοποιηθεί σε συνδυασμό με σκούρο φόντο ή ένα σκούρο σχέδιο για να εμφανίσετε την επικεφαλίδα σε αντίθεση σε ανοιχτό φόντο.
• Χρώμα πλοήγησης: Επιλέξτε ένα χρώμα για τα δεξιά-αριστερά βέλη και τις κουκκίδες πλοήγησης στο κάτω μέρος του ρυθμιστικού
• Κύλιση στην ενότητα: εμφανίστε ένα βέλος στο οποίο, όταν κάνετε κλικ, θα πραγματοποιήσει κύλιση της σελίδας στην καθορισμένη θέση. Εισαγάγετε το όνομα της άγκυρας, για παράδειγμα '#contact'
• Να μην εμφανίζεται τίτλος: Επιλέξτε αυτήν την επιλογή εάν δεν θέλετε να εμφανίζεται ο τίτλος σε αυτήν τη διαφάνεια.
• Να μην εμφανίζεται η σκιά τίτλου: απενεργοποιήστε την εμφάνιση της σκιάς τίτλου για αυτήν τη διαφάνεια
• Γραφικά κινούμενα σχέδια: Επιλέξτε από δύο εφέ κίνησης για το γραφικό της διαφάνειας
• Κινούμενη εικόνα περιεχομένου: Επιλέξτε από δύο τρόπους για να κάνετε κίνηση στον τίτλο, τον υπότιτλο, το κείμενο και τα κουμπιά

Προσαρμογή του στυλ περιεχομένου της διαφάνειας

Ρυθμίσεις στυλ περιεχόμενο κειμένουοι διαφάνειες (τίτλος, υπότιτλος και κείμενο) ορίζονται στις αντίστοιχες ομάδες ρυθμίσεων:

• Τίτλος διαφάνειας
• Υπότιτλος διαφάνειας
• Κείμενο διαφάνειας

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

Γραφικά και γραφικά SVG

Εδώ μπορείτε να κάνετε λήψη ενός επιπλέον στοιχείου γραφικού (), καθώς και διανυσματικά γραφικά V Μορφή SVG. Για καθένα από αυτά τα στοιχεία, μπορείτε να ορίσετε έναν σύνδεσμο που θα ανοίγει όταν κάνετε κλικ στο στοιχείο.

Κουμπιά στη διαφάνεια

Σε αυτήν την ενότητα, μπορείτε να ορίσετε παραμέτρους για ένα ή δύο κουμπιά:

• Κείμενο κουμπιού
• Σύνδεσμος
• Κινούμενα σχέδια σε αιώρηση
• Εικόνισμα

Κινούμενη εικόνα διαφανειών σε κύλιση

Σε αυτήν την ενότητα, μπορείτε να ενεργοποιήσετε και να απενεργοποιήσετε την κίνηση κατά την κύλιση ολόκληρου του περιεχομένου της διαφάνειας ή μεμονωμένων στοιχείων της διαφάνειας. Αν θέλετε (και δεξιότητα) μπορείτε να φτιάξετε λεπτό συντονισμόκινούμενα σχέδια με στυλ CSS.

Αποθήκευση διαφάνειας

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