Anything Carousel

Anything Carousel

Anything Carousel is a creative slider. A carousal or a slide show to cycling through elements.

Pro tip
Showcase long product shots such as a tablescape, or a line-up of different products in this creative one.

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.

Table Of Contents

Setting up

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.

1. Layout

Content

Slides

A repeater to add multiple slides. Add as much you want to.

Title

Add slide title.

Block Template

Select a reusable block to display in that slide here.

Back-end Visibility

Show a preview of block template in back-end or not.

Connections

Unique Carousel ID

Add a Unique ID for your carousel to connect it with other blocks like Anything Carousel Remote, Switcher, Tabs-Tours.

Extra Options

Overflow Hidden

Content breaking the border of its base container in any slide will be not displayed or cut down.

Random Order

Slides will be displayed in random order on each rotation.

2. Style

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

Layout

Mode

Select the slide direction of the slider from here.

Column

Select how many columns you want to have per slide.

Row

Select how many rows you want to have per slide.

Active Slide

Select the first slide to display on slider load.

Next Previous

Select if you want to rotate all rows at once or not.

Columns Gap

Put in some space between columns.

Slide Speed

Slider speed in milliseconds.

Dot & Arrows

Dots

Select if you want dots / slide count or not.

Dots style

Select dots / slider counter style from here.

Background Color

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.

Above space

Apply space from the top in root container from here.

On Hover Dots

Show dots on hover.

Arrows

Show arrows / slider navigator or not.

Arrows Style

Select arrows / slider navigator’s style from here.

Arrows Position

Select arrows / slider navigator’s position from here.

Background Color

A color picker to assign a suitable color to the background of arrows.

Icon Color

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.

Outside Container

Place arrows outside its root container or not.

On Hover Arrows

Show arrows on hover.

Center Mode

Center Mode

Center mode enables active slide to be shown as visually center or in braced up mode.

Center Padding

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

Box Shadow

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.

Trim Space

Option for remove space before the first slider when you give center padding.

Extra Options

Auto play

If auto play is enabled, the slider will be in play state when page load is completed.

Autoplay Speed

Select speed for slider using the range.

Draggable

If the slider is draggable, then you can drag any slide to the side and see the next one without using arrows for navigation.

Infinite Mode

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.

3. Advanced

Advanced Tab Options are common across all the blocks. So, we have written a detailed tutorial explaining how to use these options.

View The Advanced Tab Tutorial

Was this article helpful?
0 out of 5 stars
5 Stars 0%
4 Stars 0%
3 Stars 0%
2 Stars 0%
1 Stars 0%
How can we improve this article?
Please submit the reason for your vote so that we can improve the article.