Post Overview
Web Development
4 λεπτά ανάγνωση

12 Καρουζέλ Φτιαγμένα με Δημοφιλή Πρόσθετα JavaScript

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

Σε αυτό το άρθρο, θα ελέγξουμε διάφορες βιβλιοθήκες που η Double Dot έχει χρησιμοποιήσει στο παρελθόν ως μέρος ενός προσαρμοσμένου θέματος WordPress για να παράγει την επιθυμητή λειτουργικότητα.

UIkit

Όπως έχουμε συζητήσει σε προηγούμενο άρθρο, μας αρέσει πολύ το UIkit και στην Double Dot το χρησιμοποιούμε από την έκδοση v2. Έτσι, έχουμε κατασκευάσει πολλά slideshows, τόσο απλά όσο και πιο σύνθετα, εκμεταλλευόμενοι τα Slideshow και Slider components.

Δείτε παρακάτω μερικά από αυτά τα παραδείγματα:

ouranosmy.com

samossteamship.gr

roussakis.com.gr

verinahotelsifnos.com

Swiper

Το Swiper είναι μια από τις πιο δημοφιλείς βιβλιοθήκες JavaScript που μπορεί να χρησιμοποιηθεί είτε ως αυτόνομο πρόσθετο JavaScript είτε ως μέρος ενός JavaScript framework (π.χ. React).

Παρακάτω ένα πρόσφατο έργο όπου εκμεταλλευτήκαμε αυτή την εξαιρετική βιβλιοθήκη και δημιουργήσαμε διαφορετικά layouts:

deloudis.gr

Owl Carousel

Το Owl Carousel είναι ένα jQuery πρόσθετο με δυνατότητα αφής που σας επιτρέπει να δημιουργήσετε όμορφα responsive sliders καρουζέλ.

Ακολουθούν μερικοί ιστότοποι στους οποίους το έχουμε χρησιμοποιήσει:

omiros.gr

aegeancollege.gr

bend.gr

dolce.pub

Slick

Το Slick είναι ένα άλλο δημοφιλές slider του jQuery. Ένα από τα πιο χρήσιμα χαρακτηριστικά του (`asNavFor`) είναι η δυνατότητα συγχρονισμού δύο διαφορετικών καρουζέλ.

Εδώ είναι μια ιστοσελίδα όπου κάνουμε χρήση αυτής της δυνατότητας:

deadpoets.live

Και εδώ είναι άλλα δύο παραδείγματα με ενσωμάτωση Slick:

timafoundation.org

lawspace.gr

Ανακεφαλαιώνοντας

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

Δες το project
play video