Προγραμματισμός

Τα καλύτερα jQuery Carousels

Συγκρίνω τρία από τα δεκάδες jQuery Carousels που υπάρχουν στο διαδίκτυο, που είναι open source και με άδεια ελεύθερης χρήσης για εμπορική χρήση: jQuery lightSlider, Owl carousel 2.0 και slick. Δεν θα αναφερθώ στην χρησιμότητα ή όχι του συγκεκριμένου στοιχείου UI, θα μείνω μόνο στα τεχνικά.

Τα τρία αυτά carousels έχουν λίγο-πολύ τα ίδια χαρακτηριστικά:

  • Responsive — η εμφάνιση μπορεί να διαφέρει ανάλογα με το πλάτος της οθόνης
  • Χειρισμός με την αφή, το ποντίκι και τα πλήκτρα
  • CSS3 animations, αλλά και υποστήριξη για παλαιότερους browser
  • Αυτόματη εναλλαγή, κυκλική ή όχι, σταθερό ή μεταβαλλόμενο ύψος
  • Dots για σελίδες, βελάκια για μετακίνηση
  • API για χειρισμό μέσω JavaScript, προσθήκη / αφαίρεση slides

jQuery lightSlider

Το lightSlider είναι 49 KB και χρησιμοποιεί ένα αρχείο CSS 9 KB. Το default theme απαιτεί και ένα αρχείο PNG για τα βελάκια, αλλά μπορείτε να αλλάξετε το CSS και τον κώδικα ώστε να χρησιμοποιηθούν icon fonts ή SVGs. Ο κώδικας HTML που παράγει είναι λογικός, με κάποιους περιορισμούς όμως που αναφέρω στα μειονεκτήματα.

Επισημαίνω πως οι ρυθμίσεις που επιτρέπονται στα responsive breakpoints είναι οι item, slideMove, slideMargin, thumbItem και thumbMargin, ενώ τα ίδια τα breakpoints υπολογίζονται desktop first.

Πλεονεκτήματα

Ένα χαρακτηριστικό που διαφοροποιεί το lightSlider από τα υπόλοιπα είναι το “Gallery mode” — η δυνατότητα slideshow μίας εικόνας με thumbnails, οριζόντια ή κάθετα. Αυτό το χαρακτηριστικό μπορεί να υλοποιηθεί με διαφορετικό τρόπο και στο slick (συγχρονισμένα carousels), αλλά με το Owl carousel θα χρειαστεί να το φτιάξετε μόνοι σας χρησιμοποιώντας το API.

Μειονεκτήματα

  • Απαιτείται συγκεκριμένος HTML κώδικας: λίστα UL
  • Σε λειτουργία “loop”, η εναλλαγή των slides είναι υποχρεωτικά ανά ένα
  • Λείπει η δυνατότητα “center mode”, που εμφανίζει ένα (ή περισσότερα) slides ολόκληρα στο κέντρο και 2 «κομμένα» αριστερά και δεξιά, που υποδεικνύουν πως το συγκεκριμένο στοιχείο UI είναι carousel, χαρακτηριστικό χρήσιμο αν δεν θέλετε να έχετε βελάκια / μπιλάκια σε touch screens

Δείτε το Pen Testing jQuery lightSlider (@PVgr) on CodePen.0

Owl Carousel 2

Το Ownl Carousel 2 είναι σε beta. Έχει γραφτεί εκ νέου σε σχέση με την version 1 και το API ενδέχεται να αλλάξει. Επίσης, το documentation δεν είναι ακόμα πλήρες. Το πλήρες distributable είναι 83 KB και απαιτεί τουλάχιστον ένα αρχείο Sass των 2 KB ή το compiled CSS.

Τα breakpoints στις ρυθμίσεις responsive στο Owl Carousel 2 υπολογίζονται mobile first.

Πλεονεκτήματα

Το Owl Carousel 2 υποστηρίζει plugins για διάφορες έξτρα δυνατότητες, που σημαίνει πως μπορείτε να “χτίσετε” μια ελαφρύτερη version. Προσφέρει επίσης margins ανάμεσα στα slides, stage padding που κρατάει χώρο για ένα μικρό μέρος από το προηγούμενο και το επόμενο slide ώστε να ξεχωρίζει το carousel, και ένα χαρακτηριστικό που λέγεται merge και ενώνει slides υπό προϋποθέσεις. Φοβάμαι πως δεν έχω κάποιο πραγματικό σενάριο για αυτή τη λειτουργία!

Μειονεκτήματα

Δεν υποστηρίζεται κάθετο slideshow.

See the Pen Testing Owl Carousel 2 by Panayiotis Velisarakos (@PVgr) on CodePen.0

Slick

Το Slick είναι αρκετά μεγάλο, στα 84 KB και χρειάζεται ένα (ή δύο, αν θέλετε το default theme) stylesheet, το οποίο είναι σε Less, Sass και CSS μορφή. Επίσης, by default χρησιμοποιεί icon fonts.

Τα breakpoints στις ρυθμίσεις responsive στο Slick υπολογίζονται desktop first.

Πλεονεκτήματα

Εκείνο το χαρακτηριστικό που διαχωρίζει το Slick είναι τα Aria roles που εφαρμόζει στον κώδικα HTML.

Μειονεκτήματα

Το slick δεν υπολογίζει κενό ανάμεσα στα slides. Για την ακρίβεια, αν χρησιμοποιηθεί margin ενδέχεται το slick να μην κάνει σωστούς υπολογισμούς, επομένως θα πρέπει να βάλετε paddings.

See the Pen Testing jQuery slick by Panayiotis Velisarakos (@PVgr) on CodePen.0

Σχολιάστε

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