WordPress is a great platform for building a website with a variety of features and content. One of the most useful options for website owners is the use of a carousel slider, which is a popular feature for displaying multiple pieces of content in a visually-appealing way. It provides a convenient way to display multiple images, videos, posts and other content in a single, attractive, and dynamic way.
The Carousel Anything block from The Plus Blocks for Gutenberg offers many powerful features to create some truly unique carousel sliders in WordPress.
- Make sure the default WordPress Block editor is active.
- You need to have The Plus Blocks for Gutenberg plugin installed and activated.
- This is a premium block you need the PRO version of The Plus Blocks for Gutenberg.
- Make sure the Carousel Anything block is activated, to verify this visit Plus Settings → and Search for Carousel Anything and activate.
Learn via Video Tutorial:
How to activate the Carousel Anything Blocks?
- The Plus Settings → Plus blocks
- Search the block name and turn on the toggle then click Save.
- Use WordPress reusable blocks – You can create amazing carousel sliders by using the WordPress reusable blocks in your slides.
- Unique Carousel ID – You can easily connect your carousel with other blocks using a unique id.
- Vertical Carousel – Easily make vertical carousel sliders.
- Multiple Columned – Create multiple columned sections in your sliders.
- Custom active slide – Easily choose any specific slide to be the active slide.
- Infinite loop carousel – Easily make an infinite loop carousel slider.
- Mousewheel – You can allow users to interact with the slider on mousewheel.
- Keyboard Navigation – Allow users to navigate the slider with their keyboard.
- Autoplay carousel – You can have your carousel autoplay without user interaction.
How to add Carousel Anything Block on WordPress websites?
There are multiple ways you can add the Carousel Anything block or any other block in the WordPress block editor.
Click on the + icon at the top left of the editor or the + icon in the editor and search for the name of the block or widget, for instance, Carousel Anything Block, then click on the block to add to the page.
Or you can type / (forward slash) in the editor and type the name of the block and then click on it to add.
This way you can add a Carousel Anything block or any other Gutenberg block.
How to add content in WordPress Carousel Anything block?
In order to add content in the Carousel Anything block, you have to use WordPress reusable blocks. This gives you limitless possibilities to come up with some of the most amazing layouts for your carousel slider using the powerful WordPress/Gutenberg editor.
You can easily add images with text, have video backgrounds or showcase products etc. in your slider.
So to add the content, first, add the Carousel Anything block on the page and go to the slide item you want to add the content in.
In the Title field, you can add a title for your slide tab it won’t be visible on the page it is just for your reference.
Now for the content, you have to use the Reusable blocks, so you have to create and save Reusable blocks for your carousel slides first.
Then from the Reusable Block dropdown, choose your reusable block.
You can also click on the + Create Reusable Block button within the tab to create a reusable block.
After choosing the Reusable block, you will see a Backend Visibility toggle option, this is turned off by default to offer a better editing experience. You can turn it on to see your block in the backend. Once done it is advisable to turn it off.
Following the same process, you can add content to other slides as well.
You can add more slides to your WordPress carousel slider by clicking on the +Add Slide button.
But if you want to create different types of sliders like a Testimonial slider, Woocommerce product slider or Blog post slider, we have dedicated blocks for each, so instead of using the Carousel Anything block you can use those.
- Post Listing Block
- Product Listing Block
- Testimonial Block
- Media Carousel (Includes Image and VIdeo)
- Service Box Carousel
What is Connections?
With the Carousel Anything block from The Plus Blocks for Gutenberg, you get a unique feature, you can connect it with other The Plus Blocks for Gutenberg blocks like the Accordion block, Tabs block, Carousel Remote block or the Process Steps block using a unique id.
How does this Work?
The connection feature of The Plus Blocks for Gutenberg allows you to interconnect two blocks with a common id. Which means the id you have used on one block, you have to use the same id on the other block as well to establish the connection.
Both blocks should have the same settings for the common properties for example, if you are connecting the Carousel Anything block with the Process Steps block, then the number of steps in the Process Steps block and the number of slides in the carousel should be the same.
And once the connection is established, if you slide the slider, the process steps will change too.
We have linked a few docs which will help you with some use case
- Carousel Anything with Carousel Remote
- Carousel Anything with Tabs & Trous
- Carousel Anything with Accordion block
- Carousel Anything with Process Steps block
Then you’ll find some options under the Extra options tab –
Overflow Hidden – If your slides are overflowing on any other element, you can turn this option on.
Random Order – To make your slides play in a random order, you can use this option.
How to make randomize WordPress carousel slides?
With the Carousel Anything block, you have the option to show your carousel slides in a random order, so every time a user plays the slider, they will see the slides in a different order making your website look more dynamic.
To do this, add the block on the page and after you’ve created your slides, go to Extra Options and turn on the Random Order toggle.
How to style Carousel Anything Block in WordPress?
You’ll find all the styling and customization options under the Style tab.
Layout – Under this tab, you’ll find some powerful options like changing the slider mode, choosing the number of columns to be shown on each slide, choosing a custom active slide, choosing the slider next/previous slide movement behaviour, managing column gap and slide speed.
Dots & Arrow – You can style and customise the slider navigations from this tab. Learn more about the process.
Center Mode – From this tab, you can make your slider more accessible by allowing mousewheel and keyboard navigation. You can also manage the centre position of your slider from here.
Extra Options – Under this tab, you’ll find options to make your slider autoplay, auto scroll, turn it into an infinite loop slider, make your sliders draggable or pause them on hover.
Note: For Auto scroll to work, make sure to disable Autoplay. This feature only works in the front end, you won’t see any preview in the backend.
Advanced – This is our global extension available for all our blocks. From here you can add a custom CSS class in the Additional CSS class(es) field. If you know CSS you can use this class to further finetune the style by using your own custom CSS.
Advanced options remain common for all our blocks, you can explore all it options from here.