Creating Slides With the Simple Carousel Block
After you have installed and activated the plugin, you can go ahead and edit any Gutenberg-compatible custom post type (Posts, Pages, etc.).
After that, click the + button or type / and select a “Carousel” block in the “Design” section:
After that, you just need to click the square + button inside the block to add new slides to the carousel:
And then you can add whatever you like into the slides themselves:
Block Styles (and Demo)
Without a doubt – I added block style customization to a “Slide” block. You can change the following styles:
- Colors (Text, Background, and Links),
- Paddings,
- Borders (Width, Radius, and Color).
Please check the demo video below to see how it looks in action:
Custom animation effect
Sometimes, you might want something more interesting than just a linear CSS transition. There are 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 the jQuery library is included three times!
Here is 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 to the Block Editor (What is the point of using it there, guys? It should be included only on the website front end).
swiper.jsis added to the website footer, not the header (obviously).- All assets are minified (obviously).
- No additional HTTP requests except swiper.js and swiper.css.
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 a CDN. It could be helpful for websites with bandwidth limitations or just for high-traffic websites.
