19 ρυθμιστικά ή καρουζέλ CSS και HTML για τον ιστότοπό σας

δωρεάν ρυθμιστικά

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

Ο Δωρεάν ρυθμιστικά, κύλινδροι ή καρουζέλ σε CSS που θα βρείτε παρακάτω, αποτελούν ένα καλό ρεπερτόριο για κάθε είδους στόχους στην εργασία που πρόκειται να δείξουμε στον πελάτη πριν αποδεχτεί τον προϋπολογισμό μας. Είναι μια συλλογή ρυθμιστικών σε HTML και CSS με λίγο JavaScript σε οριζόντια και κάθετη μορφή. Ας το κάνουμε ώστε να έχετε πρόσβαση στον κώδικα για να τα εφαρμόσετε γρήγορα.

Οριζόντια καρουζέλ

Responsive

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

σχετικό άρθρο:
27 ρυθμιστικά HTML και CSS για να δώσουν στον ιστότοπό σας αυτό το ιδιαίτερο άγγιγμα

Αποκριτικό άπειρο καρουσέλ

Αυτο-αναπαραγωγή

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

Αντιδράστε καρουσέλ

3D καρουσέλ

Αυτή η κύλιση ξεχωρίζει για το React.js. που προσφέρεται για την εμφάνιση εικόνων σε αναλογικό μέγεθος καθώς μεταβαίνουμε από τη μία εικόνα στην άλλη σε συνεχή κίνηση. Λίγα περισσότερα να πούμε για αυτό το αρκετά απλό CSS, αλλά έχει μεγάλο αποτέλεσμα αν ξέρουμε πώς να το τοποθετήσουμε σωστά στον Ιστό.

Ομαλό 3D ρυθμιστικό

3D καρουσέλ

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

σχετικό άρθρο:
46 Ρυθμιστές και κύλινδροι Javascript

Αυτόματο άπειρο καρουσέλ

Άπειρο καρουσέλ

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

Hover Carousel

Hover Carousel

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

Κινητό καρουσέλ

Κινητό καρουσέλ

επίσης που ονομάζεται Carousel Material Design, και με την τρέχουσα τάση με όλους τους τύπους καρτών, Εδώ μπορείτε να βρείτε ένα άλλο άρθρο με μεγάλο αριθμό από αυτά σε CSS / HTML, απομακρύνεται από τα υπόλοιπα επειδή αποτελείται από τη σχεδιαστική γλώσσα που δημοσιεύεται από την Google. Μπορείτε να μετακινήσετε τα διαφορετικά φύλλα πατώντας παρατεταμένα τις κάρτες.

Carousel τροφοδοσίας Instagram

Instagram

Μπορείτε να διακόψετε την ιδέα πίσω από αυτό το ρυθμιστικό επισήμανσης από μια λωρίδα εικόνων που μπορεί να μεγεθυνθεί κάνοντας κλικ σε ένα από αυτά. Ένα κινούμενο σχέδιο με μεγάλο εφέ, αν και απευθύνεται σε έναν συγκεκριμένο τύπο ιστότοπου. Οι αναρτήσεις του Instagram μεταφέρθηκαν σε ένα καρουσέλ slick.js.

Απλό συγχρονισμένο καρουσέλ

Απλό καρουσέλ

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

3D οριζόντια καρουζέλ

3D οριζόντιο καρουσέλ

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

CSS Carousel

CSS 3D

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

Ambilight Bootstrap Carousel

Καρουζέλ Bootstrap

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

Ομάδα καρουσέλ

Ομάδα καρουσέλ

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

Carousel Cube

Τρισδιάστατος κύβος

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

Πλήκτρα βέλους καρουζέλ

Κλειδιά CSS

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

Κάθετα καρουζέλ

Κάθετο καρουσέλ

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

Καθαρό καρουσέλ CSS

Carousel

Αυτό το καρουσέλ ξεχωρίζει για το ότι έχει πλευρικό μενού από το οποίο μπορούμε να πάμε κάνοντας κλικ σε κάθε μία από τις επιλογές του. Οι πληροφορίες εμφανίζονται με ένα καλά επιτυγχανόμενο αποτέλεσμα ανάκαμψης χωρίς πολύ περισσότερα από αυτά που ειπώθηκαν.

Το κατακόρυφο καρουσέλ αντιδρά

Carousel

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

3D Split Carousel

Σπλιτ

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


Το περιεχόμενο του άρθρου συμμορφώνεται με τις αρχές μας συντακτική ηθική. Για να αναφέρετε ένα σφάλμα κάντε κλικ Aquí.

4 σχόλια, αφήστε τα δικά σας

Αφήστε το σχόλιό σας

Η διεύθυνση email σας δεν θα δημοσιευθεί. Τα υποχρεωτικά πεδία σημειώνονται με *

*

*

  1. Υπεύθυνος για τα δεδομένα: Miguel Ángel Gatón
  2. Σκοπός των δεδομένων: Έλεγχος SPAM, διαχείριση σχολίων.
  3. Νομιμοποίηση: Η συγκατάθεσή σας
  4. Κοινοποίηση των δεδομένων: Τα δεδομένα δεν θα κοινοποιούνται σε τρίτους, εκτός από νομική υποχρέωση.
  5. Αποθήκευση δεδομένων: Βάση δεδομένων που φιλοξενείται από τα δίκτυα Occentus (ΕΕ)
  6. Δικαιώματα: Ανά πάσα στιγμή μπορείτε να περιορίσετε, να ανακτήσετε και να διαγράψετε τις πληροφορίες σας.

  1.   Mayra orellana dijo

    Καλημέρα, θέλω να χρησιμοποιήσω το Pure CSS Carousel στον ιστότοπό μου, αλλά βρίσκεται σε μία μόνο θέση, πώς μπορώ να το βάλω στη θέση που θέλω στη σελίδα μου.

    Παρακαλώ τη βοήθειά σας με αυτό. Σας ευχαριστώ πολύ

  2.   Xavier Cañizares dijo

    Πώς μπορώ να κάνω το Hover Carousel να εμφανίζεται καλά στην έκδοση για κινητά του ιστότοπού μου;

  3.   Γαβριήλ dijo

    Εξαιρετική, τι καλή δουλειά έκαναν!

  4.   Τόνι Ζαμπράνο dijo

    Γεια σας, τα καροτσάκια είναι πολύ ωραία, αλλά μόλις το ανεβάσω, το αντιγράφω και το επικολλάω, το javascrip μου δίνει ένα σφάλμα λόγω του var max = $ ('# c> li) .lenght…. Τι προτείνεις