Anything Carousal Remote

Anything Carousal Remote

Anything Carousal Remote basically buttons to handle the movement of different kinds of blocks which we provide. It is an external remote button to have better UI and positioning options.

Pro tip
Want to handle two slider on single button click ? Don’t worry we got you.

How to use the Anything Carousel Remote Block of The Plus Addons For Gutenberg

The Anything Carousel Remote 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 Carousal Remote

Anything Carousal Remote can be integrated with carousal, switcher and tabs & tours blocks mainly. We have provided all needed support in all of our blocks which can be integrated with this anything carousal remote. The basic idea of using this external remote is to have a better UI and multiple usage options for the blocks. You can handle your carousal from any pixel of the page you want using these remote buttons.

Table Of Contents

Setting up

Gutenberg gives multiple ways to add a Carousal Remote 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 Carousal Remote after “/” sign, eg.“/Carousal Remote”, 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

Connection

Unique Carousal ID

Give input of the ID of a slider / Tabs & Tours / Switcher you want to control from these buttons. We have provided an option to add custom ID in these blocks so you can take reference from there and use that ID here.

Prev / Next Button

Button

The first option for handling a slider we provided is by using buttons. You can have prev / next slide buttons by enabling this.

Connection

Choose a connection type from here. You can control carousal, switcher and tabs & tours from here.

Prev / Next Button Text

Add the text you want to have on the prev / next buttons here.

Icon

Choose your icon preference for buttons from here.

Select Previous / Next Icon (Icon Library)

On selection of Icon in the previous dropdown, you’ll be displayed a whole list of icons provided by the FontAwesome icon library. If you have purchased licence for the pro plan and activation has been done you’ll be able to use pro icons.

Custom Image

On selection of Image in the previous dropdown, you’ll be asked to choose and upload an image, and after uploading the image basic styling option for the image would be displayed there.

Dots

Dots

Choose if you want to have slider navigation buttons or we say dots.

Dots Slide

A repeater to customize each dot related to a particular slide.

Label

Label is on hover text on the icon which can be added here.

Icon

Choose your icon preference for buttons from here.

Select Icon (Icon Library)

On selection of Icon in the previous dropdown, you’ll be displayed a whole list of icons provided by the FontAwesome icon library. If you have purchased licence for the pro plan and activation has been done you’ll be able to use pro icons.

Custom Image

On selection of Image in the previous dropdown, you’ll be asked to choose and upload an image, and after uploading the image basic styling option for the image would be displayed there.

Icon Color

A color picker to assign a suitable color to the icon.

Background

Apply suitable background like color/ gradient / image to the icon.

Layout

Select horizontal or vertical layout whichever you want from here.

Active Dot Style

Choose Active / Current slide’s dot style from this select box.

Duration

Give animation duration timing here.

Border Color

A color picker to assign a suitable color to the icon’s border.

Tooltip Direction (Style-2)

Set a tooltip / information text visibility direction from here.

Pagination

Pagination

Enable pagination from here.

Total Slides

Enter a number of slides you want to paginate here.

Color

A color picker to assign a suitable color to the pagination text.

Typography

Assign a size, weight, spacing and much more to pagination text.

Layout

Alignment

Alignment of the Remote button and Pagination text into left, center or right direction.

2. Style

The Style tab is used for customizing the appearance of all the Anything Carousal Remote 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

Prev / Next

Icon Size

Set Icon size for prev / next button from here.

Icon Space

Set space between icon and text in prev / next button from here.

Icon Color

A color picker to assign a suitable color to the icon.

Gap / Space

Set spacing between prev and next buttons from here.

Padding

Put in some inner space to an element.

Typography

Assign a size, weight, spacing and much more to fonts.

Color

A color picker to assign a suitable color to the text.

Border

Draw a border around the element and give width and color to it.

Border Radius

Set the radius curve of the element’s corner.

Background

Apply suitable background like color/ gradient / image to an element.

Box Shadow

Give Box/Text/Drop shadow effect and color to an element.

Dot

Dot Size

Assign slider navigator / dot size from here.

Dot Space between

Set space between two dots from here.

Icon Size

Set Icon size for dots from here.

Image Size

Set custom images’ size for dots from here.

Margin

Put in some outer space to an element.

Padding

Put in some inner space to an element.

Tooltip Margin

Put in some outer space to a tooltip-text.

Tooltip Padding

Put in some inner space to a tool-tip text.

Text Alignment

Alignment of text into left, center or right direction.

Tooltip Typography

Assign a size, weight, spacing and much more to fonts.

Color

A color picker to assign a suitable color to the text.

Background Color

A color picker to assign a suitable color to the text background.

Tooltip Height

Set height of tool-tip box from here.

Tooltip Arrow

Check if you want an arrow on tool-tip activation or not.

Arrow Color

A color picker to assign a suitable color to the tool-tip arrow.

Box Shadow

Give Box/Text/Drop shadow effect and color to an element.

Border Radius

Set the radius curve of the tool-tips corner.

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.