Simple Carousel Block for Gutenberg

Plugin features

No jQuery

If you don’t want jQuery on your website, then this plugin fits perfectly. No jQuery Migrate script either.

Beautifully designed

It looks like a native Gutenberg block. I even drew icons in Sketch myself to make them match the style :)

With care about performance

No unneeded libraries, no libraries in Block Editor at all, JavaScript is in the footer, all is minified, CSS and JS added to <body> when reasonable!

Responsive the way you want it

The plugin allows you to create up to three responsive breakpoints for every carousel slider. Swipes are also smooth and effortless on mobile.

Latest Gutenberg practices

Block Editor gets updated heavily with every WordPress version, and my goal here is to update the plugin accordingly.

Customisation
Wide/Full width alignment
Vertical alignment
Responsive endpoints
Block styles
Custom animation effect
Performance
Dequeue Swiper CSS and JS
CDN for Swiper assets

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

Gutenberg carousel block alignment controls

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

Responsive carousel slider block for Gutenberg, breakpoint settings

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.js is 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.

FAQs

Do you offer support if I need help?

Yes, of course!

You will receive 2 weeks of support if you purchase a personal license of the plugin. But you can purchase a developer license and receive lifetime support.

You can get support on this page.

What happens when my license expires?

You still can use the plugin as usual. The only thing is you will be unable to receive more support or to get the latest version of the plugin. Sometimes it is important to keep your website fast and secure, but not necessary.

Can I upgrade my license to a higher plan?

Yes, you can upgrade your license at any time. You will only need to cover the price difference. You can easily manage your licenses from your account area.

Can I create a hero slider using this plugin?

Generaly speaking, yes.

You just need to set “Slides to show” option to 1 and use Gutenberg “Cover block”.

My carousel slider block uses Swiper JS library which is intended to work great for both sliders and carousels. Also since the version 1.1 the plugin has the option to display arrows which are usually used for sliders.

But since I am not a big fan of any kind of sliders on websites plus they are becoming kind of outdated across the web, I developed this block to be used for carousels specifically – for logos, reviews or just images. I will provide you the support if you use it for sliders anyway, but can not gurantee that I could add all the functionality you might need.

Is it possible to remove all carousel styles and put custom CSS instead?

Sure it is.

As easy as selecting a single checkbox in plugin settings.

Can I use SVG logos in the carousel?

My plugin supports SVG logos, but WordPress doesn’t. But do not worry, all you need to do is to install a free plugin “SVG Support” directly from WordPress dashboard (or any other similar plugin) and you are good to go.

Is there a demo?

Yes, here it is.

Have more questions? Feel free to contact me.