Dismissione di OwlCarousel in favore di una libreria più moderna

[francescozaia]

Il plugin OwlCarousel, oltre ad avere qualche problema in termini di accessibilità, non è più supportato, dovremmo valutare di passare ad altro (il creatore di OwlCarousel suggerisce TinySlider, ma valutiamone la validità).

Ovviamente, contestualmente a questo cambio, vanno gestiti tutti i componenti che ne fanno uso e aggiornata la versione adeguatamente.

[enricobasso]

Perché non utilizzare il carousel “nativo” di Bootstrap?

[francescozaia]

Credo perché non era accessibile e perché era un po' troppo carente in termini di flessibilità per quello che volevamo ottenere. Detto questo, se riusciamo a realizzare quello che vogliamo può anche essere un'opzione, nell'ottica di non portarci dietro troppa zavorra.

[dej611]

Che ne dite di Slick carousel? https://kenwheeler.github.io/slick/

Ha anche il supporto per React ed Angular

[dej611]

Qual è stato il motivo originario per non utilizzare il carousel in Bootstrap, ma OwlCarousel? In resign-react-kit dobbiamo implementarlo e siamo al momento fermi per questa scelta: slick o il nativo in bootstrap potrebbero essere buoni candidati, ma servirebbe una decisione così da sbloccarci.

[gunzip]

il carousel bootstrap non supporta alcune feature (es. drag / swipe, n. di slide variabile per dimensione schermo, etc.)

[arturu]

Vorrei proporre l'uso di Swiper js: Sito web: https://swiperjs.com/ Repo GitHub: https://github.com/nolimits4web/swiper

Oltre a tutte le caratterische descritte nel sito web e nel repo, propongo questa soluzione in quanto:

• il progetto è molto attivo ed ha release regolari (dal 2013 fino a 13 giorni fa)
• il repo viene usato come dipendenza da altri 40k progetti
• Ottima documentazione https://swiperjs.com/api/

Come dice @dej611 anche slick sembra ottimo, solo che l'ultima release risale ad ottobre 2017 https://github.com/kenwheeler/slick/releases , sembra un po' abbandonato (è un'ipotesi logicamente).

[dej611]

Hai ragione, ho dato un'occhiata al repo di slick e sembra che il mantainer l'abbia abbandonato. Non ho problemi ad usare swiperjs in generale, mi basta sapere che abbia una controparte react funzionante e magari first-party. Al momento il nostro problema è sapere cosa usare aldilà della preferenza di questo o quello perchè il componente è bloccato.

[arturu]

Ho proposto l'aggiunta di swiper https://github.com/italia/bootstrap-italia/pull/462 , senza andare ad intaccare OWL-Carousel.

[akamizi]

Ho già usato swiper (proprio per le carenze del nativo bootstrap) e la trovo un'ottima scelta.

[francescozaia]

Finalmente ho avuto un po' di tempo e ho messo in piedi un micro sistema di plugin con il quale chi usa Boostrap Italia così com'è non ha più comprese le funzionalità di Carousel, che vanno aggiunte attraverso plugin. Saranno inclusi nelle release due plugin, sia OwlCarousel (che in futuro sarà dismesso) che Swiper, grazie ad @arturu. Per ora è tutto sul branch development, appena possiamo rilasciamo una nuova versione con la modifica.

[arturu]

Grandioso 🙂

Stavo notando una cosa, il codice presente in https://github.com/italia/bootstrap-italia/blob/development/_includes/scripts.html da riga 79 e il codice in https://github.com/italia/bootstrap-italia/blob/development/src/js/plugins/carousel-swiper.js sono identici. La porzione di codice duplicata dentro scripts.html si può togliere o crea problemi al funzionamento documentazione?

Ho notato che ho fatto una disgrazia ortografica, ho scritto in certo punto un'immagine senza l'apostrofo 😨 😨 😨 , posso corregere al volo?

[francescozaia]

Eh sì hai ragione, tutto il codice dentro https://github.com/italia/bootstrap-italia/blob/development/_includes/scripts.html non serve più. Mea culpa, l'avevo spostato e poi non ho più rimosso l'altro. Appena posso sistemo, anche l'apostrofo.

[francescozaia]

Vista ora https://github.com/italia/bootstrap-italia/pull/477 e mergiata, grazie.

[arturu]

Grazia a te :)

[bunglegrind]

Swiper non credo supporti IE11...parla di flex.

Scusate...ma integrare direttamente quello del WCAG?

https://www.w3.org/WAI/tutorials/carousels/working-example/

[bunglegrind]

Come non detto: quel codice ha diversi bug ed è scritto proprio male...L'unica cosa è che si può prendere come spunto per le funzionalità (che mi auguro siano corrette) e tentare di implementarle su Bootrstrap Carousel.

[bunglegrind]

Posso chiedere perché la issue è stata chiusa? OwlCarousel continua a non essere più mantenuta: https://github.com/OwlCarousel2/OwlCarousel2

La PR #611 non risolve la problematica di questa issue

[zetareticoli]

Ciao! Un alternativa valida è Flickity https://flickity.metafizzy.co

Inoltre, per determinate casistiche, si può pensare di utilizzare CSS Scroll Snap.

[OscarBresolin]

Io opterei per questo: https://splidejs.com La parte di accessibilità è fatta bene: https://splidejs.com/guides/accessibility/ Ci sono le versioni React e Vue

[arturu]

Può essere una strada percorribile la seguente considerazione?

Visto che ci sono diverse preferenze, perché non prendere la direzione che sintetizza e armonizza un po' tutte le esigenze? Deprecare OwlCarousel e in futuro toglierlo dal bundle, chi è interessato integra la libreria di terze parti che preferisce.

Magari nella documentazione si mettono degli esempi sull'integrazione delle diverse librerie (mantenendo la pagina di OWL carousel per retrocompatibilità). Tempo fa con #462 proposi una cosa del genere.

[OscarBresolin]

@arturu assolutamente d'accordo. Procederemo così al momento:

• Rimozione di owl dal bundle ed aggiornamento dei docs;
• Inserimento di Splider (sempre fuori dal bundle) e relativa pagina di documentazione per l'importazione e l'utilizzo

In futuro, con il passaggio di BS5 dismissione completa di OWL

[arturu]

Sulla falsa riga della pagina di Splider si può proporre anche quella di swiper? (giusto per non fare lavoro inutile)

[OscarBresolin]

Secondo me si, c'è da fare solo un'analisi sull'accessibilità di Swiper

[arturu]

Di default sono attive le descrizioni della UI, ha diverse API per personalizzare nel dettaglio l'accessibilità https://swiperjs.com/swiper-api#accessibility-a11y

[dej611]

Io sarei per decidere una libreria solamente per il kit, che sia poi a parte o meno la documentazione dovrebbe spiegare i vari utilizzi.

Disperdere ulteriori energie nel mantenimento di altre librerie o implementazioni non la vedo una strada utile, già le risorse son poche per tutto il kit, sprecarne per il carousel non sarebbe saggio. Ormai siamo a Febbraio e spero che a breve esca una roadmap con la scelta dell’implementazione di questo carousel così da poter andare avanti anche sul kit React.

Per chi volesse usare altro rispetto alla scelta in questo kit, ci sono sempre le linee guida a cui attenersi per una implementazione personalizzata.

[arturu]

Sì, in effetti mantenere tanta documentazione e integrazioni per uno slider è un po' uno spreco di tempo e risorse. Ormai gli slider, a livello di interazione con gli utenti non sono molto efficaci, tutti gli utenti tendono a scorrere verso il basso e pochissimi fanno lo swipe laterale. "Gli slider non sono ancora morti ma emanano uno strano odore..." :p

[zetareticoli]

...tutti gli utenti tendono a scorrere verso il basso e pochissimi fanno lo swipe laterale. "Gli slider non sono ancora morti ma emanano uno strano odore..." :p

Lo swipe laterale è un'interazione idonea in un contesto mobile. Come tale, andrebbe riservata solo per specifici flussi di navigazione.

Sarebbe interessante sperimentare un approccio responsive:

• CSS Scroll Snap per dispositivi touch
• Liste (Flexbox o CSS Grid) per notouch

[astagi]

La PR in questione https://github.com/italia/bootstrap-italia/pull/622 è in aggiornamento, presenta l'implementazione con Splide e la separazione del carousel dal bundle, mantenendo anche Owl per retrocompatibilità (sempre separato). Viene risolta anche la questione loop che presentava il bug descritto qua https://github.com/italia/bootstrap-italia/issues/376.