Anything Carousel is a creative slider. A carousal or a slide show to cycling through elements.
How to use the Anything Carousel Block of The Plus Addons For Gutenberg
The Anything Carousel is an advanced block and needs to be set up properly. Let’s understand how to use this block in the tutorial below.
Configuration for Anything Carousel
Anything Carousel works like PowerPoint slides. Use your different use cases in each slide and manage them accordingly.
Gutenberg gives multiple ways to add Anything Carousel into the content building area or we say playground. Check for the “+” icon in the top toolbar or click the “+” icon in the content area or start typing Anything Carousel after “/” sign, eg.“/anything carousel”, in the content area. Gutenberg also provides drag & drop after opening the list of blocks panel.
After placing the block you’ll see three tabs on the right editing panel containing “Layout”, “Style” and “Advanced”. Go and start with the Layout tab.
A repeater to add multiple slides. Add as much you want to.
Add slide title.
Select a reusable block to display in that slide here.
Show a preview of block template in back-end or not.
Unique Carousel ID
Add a Unique ID for your carousel to connect it with other blocks like Anything Carousel Remote, Switcher, Tabs-Tours.
Content breaking the border of its base container in any slide will be not displayed or cut down.
Slides will be displayed in random order on each rotation.
The Style tab is used for customizing the appearance of all the Anything Carousel block components. All these styling options include customizing the fonts, colors, background, margins and padding which are common across all the blocks. So, we have created a single detailed article explaining these Styling Options.
View The Style Tab Article
Select the slide direction of the slider from here.
Select how many columns you want to have per slide.
Select how many rows you want to have per slide.
Select the first slide to display on slider load.
Select if you want to rotate all rows at once or not.
Put in some space between columns.
Slider speed in milliseconds.
Dot & Arrows
Select if you want dots / slide count or not.
Select dots / slider counter style from here.
A color picker to assign a suitable color to the background.
Active Background Color
A color picker to assign a suitable color to the currently active slide’s background.
Apply space from the top in root container from here.
On Hover Dots
Show dots on hover.
Show arrows / slider navigator or not.
Select arrows / slider navigator’s style from here.
Select arrows / slider navigator’s position from here.
A color picker to assign a suitable color to the background of arrows.
A color picker to assign a suitable color to the icons of arrows.
Hover Background Color
A color picker to assign a suitable color to the background of arrows on hover.
Hover Icon Color
A color picker to assign a suitable color to the icons of arrows on hover.
Place arrows outside its root container or not.
On Hover Arrows
Show arrows on hover.
Center mode enables active slide to be shown as visually center or in braced up mode.
Put in some inner space to the centered slide.
Center Slide Effect
Choose how you want to make the look center slide different from others.
Center Slide Scale
Choosing a scale would make the center slide look bigger than others. Choose the scale for the center slide.
Normal Slide Scale
Choosing a scale would make the normal slide look different from the center slide. Choose the scale for the normal slide
Choosing shadow would create a shadow effect on the center slide different than others. Apply custom shadow from the below option provided.
Normal Slide Opacity
Apply opacity / transparency for normal slide from here.
Option for remove space before the first slider when you give center padding.
If auto play is enabled, the slider will be in play state when page load is completed.
Select speed for slider using the range.
If the slider is draggable, then you can drag any slide to the side and see the next one without using arrows for navigation.
If the slider is in infinite mode, the slider will repeat itself after the last slide.
Pause on Hover
A slider will stop sliding on the mouse hover.