Customisation
My goal was to not overload the plugin with settings. Now it has the bare minimum but you’re always welcome to request features you need (without extra charges of course).
Wide/Full width aligment
Vertical alignment
It is not always happens when slides in your carousel block are the same height. So the block allows you to decide whether you would like to vertical align child blocks by center or not.
Responsive endpoints
Block Styles
Without a doubt – I added block styles customisation to a “Slide” block. You can change the following styles:
- Colors (Text, Background and Links),
- Paddings,
- Borders (Width, Radius and Color).
Please check the video below to see how it looks in action:
Custom transition (animation effect)
Sometimes you might want something more interesting than just a linear CSS transition. There is no settings to change that (yet), but you can easily do it with CSS.
.wp-block-rudr-carousel .swiper-wrapper{
/* I like this effect! */
transition: transform 300ms cubic-bezier(0.545, 0.005, 0.12, 1) 0s;
}Performance
During my WordPress developer journey I’ve seen so many poorly coded plugins so you’ll never surprise me, even if you show me a website where jQuery library is included three times!
A quick overview of what has been done in this Gutenberg carousel block in terms of performance:
- No jQuery library at all (I’ve already mentioned that),
- No Swiper JavaScript library is added in Block Editor (What is the point of using it there guys? It should be included only on website front end).
swiper.jsis added to website footer, not header (obviously).- All assets are minified (obviously).
- No additional HTTP requests except swiper.js and swiper.css.
And the plugin also allows you to skip including swiper.js and swiper.css files or to use their CDN versions.
Dequeue Swiper CSS and JS files
The plugin includes Swiper assets – one CSS and one JS file. In some cases you may not need them (maybe you have already included them in your theme or maybe you have them customised).
And it is quite easy to not include them, just check a checkbox in settings:
Using CDN for Swiper
My carousel slider block for Gutenberg allows you to decide whether you would like to include its assets from your own server or from CDN. It could be helpful for websites with bandwith limitation or just for for high traffic websites.
