Descrizione
Il blocco Splide Carousel introduce la funzionalità di creare caroselli/slider all’interno dell’editor a blocchi. Ogni carosello può contenere un numero infinito di slide, ciascuna slide contiene i propri blocchi interni.
Usa il blocco Splide Carousel per creare caroselli di immagini, slider di testimonial e altro ancora in Gutenberg!
Opzioni
- Navigazione con frecce
- Dots Pagination
- Riproduzione automatica
- Transizioni di scorrimento e dissolvenza
- Loop infinito
- API per controllare il carosello utilizzando JavaScript
- Fixed Slide Width / Height
- Larghezza / altezza variabile della slide
- Numero di slide per pagina
- Spaziatura slide
- Supporto video
- Scorrimento automatico
- Hash Navigation
- Lazyload
- Compatibile con FSE (Full Site Editing)
- Completamente accessibile
- Supporto RTL
- Responsive
- Nessun problema con Google Lighthouse
- Leggero
- …e altro ancora!
Attribuzione
Il blocco Splide Carousel utilizza la libreria Splide.
Screenshot
Vista editor a blocchi 
Vista editor a blocchi 
Vista frontend 
Vista frontend 
Controlli del blocco
Blocchi
Questo plugin fornisce 2 blocchi.
- Splide Carousel
- Splide Carousel Item
Installazione
- Carica i file del plugin nella directory
/wp-content/plugins/splide-carousel, oppure installa il plugin direttamente dalla schermata dei plugin di WordPress. - Attiva il plugin dalla schermata ‘Plugin’ su WordPress
FAQ
-
Ci sono altre opzioni che posso utilizzare?
-
Sì, nelle impostazioni avanzate del blocco Splide Carousel è possibile inserire una stringa JSON valida contenente opzioni aggiuntive disponibili qui.
es.:
{"focus":"center","trimSpace":false} -
Posso impostare le opzioni predefinite del carosello a livello globale?
-
Sì, dobbiamo attendere un evento JavaScript che viene attivato quando il carosello è pronto, e poi quindi aggiungere le impostazioni predefinite.
document.addEventListener( 'splideReady', function( e ) { e.detail.defaults = { arrowPath: 'M30.2 19.4L11 .2c-.3-.3-.9-.3-1.2 0-.3.3-.3.8 0 1.2L28.4 20 9.8 38.6c-.3.3-.3.9 0 1.2.3.3.9.3 1.2 0l19.2-19.2c.3-.3.3-.9 0-1.2z', perPage: 3 }; } ); -
Posso controllare il carosello utilizzando JavaScript / API?
-
Yes, each carousel is given a unique ID by default, or you can provide your own using the HTML Anchor field under the block Advanced Settings.
Ogni blocco espone una variabile globale che segue questa convenzione:
{ID}Carousel. Ad esempio, se l’ID del carosello è testimonials, la variabile globale saràtestimonialsCarousel.Using this global variable, you can control the carousel programatically using the Splide API.
Esempio per passare alla terza slide:
testimonialsCarousel.Components.Controller.go(2);
Recensioni
Contributi e sviluppo
“Splide Carousel Block” è un software open source. Le persone che hanno contribuito allo sviluppo di questo plugin sono indicate di seguito.
Collaboratori
“Splide Carousel Block” è stato tradotto in 1 lingua. Grazie a chi traduce per il contributo.
Traduci “Splide Carousel Block” nella tua lingua.
Ti interessa lo sviluppo?
Esplora il codice segui il repository SVN, segui il log delle modifiche tramite RSS.
Changelog
1.7.0
- Enhancement – Update Add New Slide button to work with native Inserter to support
cloudcatch/splide-carousel-itemvariations / defaults
1.6.0
- Enhancement – Bump block apiVersion to 3
- Chore – Update dependencies and WordPress compatibility to 6.8
1.5.0
- Enhancement – Compatibility with WordPress 6.7
1.4.7
- Fix – Slides not visible in RTL direction mode
1.4.6
- Fix – Speed setting change causing unexpected / invalid content error
1.4.5
- POTENTIAL BREAKING CHANGE:
Now using the CSS class.wp-block-splide-carouselto encapsulate the carousel and its components. If you have any custom styles applied to the carousel or its components, it’s recommended to test this update in a staging environment before updating in production.
1.4.4
- Fix – Carousel JavaScript variable name duplicating “Carousel” in the name
1.4.3
- Fix – HTML Anchor not applying to carousel
1.4.2
- Fix – Prevent autoplay and auto scroll in block editor
1.4.1
- Docs – Update tested up to
1.4.0
- Enhancement – Improved editor UX
- Enhancement – Added ability to make entire slide clickable link
1.3.0
- Enhancement – Added Grid extension
- Enhancement – Added autoplay play/pause buttons
1.2.0
- Enhancement – Added Inspector Controls to avoid having to use JSON
- Enhancement – Exposed global variable to programatically control the carousel using the Splide API
1.1.0
- Enhancement – Ability to add photos in bulk when new block is created and when block has no slides
1.0.0
- Initial release