Cubix Connect Facilis Web Widget

Tips & tricks

Here are some tips on how to customize this carousel.
Please, read if you working with the carousel for the first time.

Active slide

You must mark some of your slides as active. Otherwise, the carousel will not work (because it shows only the active slide).

To do that, choose Slide-X in the left panel, go to the Advanced tab in the right column and add an active class to the chosen slide. If you\'re using indicators, you should also add an active class to one of the indicators. e.g. Slide 2 and Indicator for slide 2 should have an active class

Height of the carousel

We\'ve set the minimal height of the carousel equals to 40rem (640px). The minimal height is set to make all slides have an equal height which prevents page height from squeezing/leaping while changing the slides (if they have a different height).
To change this minimal height, choose the most top-level Carousel element in the left panel, open the Advanced tab and change the 40rem value for the style attribute.

If you want to make the height of a carousel equal to the height of the screen, change the 40rem value to 100vh. The vh units are relative to the screen size. So 100vh is 100% of a screen height, 80vh is 80% of a screen height.

You can also move the carousel outside the Bootstrap Container element to make it screen-wide.

Dark/light controls

You can switch between light or dark controls.

Choose the most top-level Carousel element in the left panel, open the Advanced tab and add or remove the carousel-dark class.

You can also toggle on/off circles under the Previous/Next buttons by adding/removing the carousel-arrows-circled class for the Carousel element.

You can simply remove the Control - Previous and Control - Next elements if you don\'t need to use them.

Carousel indicators

The number of indicators must be the same as the number of slides. That means that if you\'re adding a new slide, you should also add an indicator for it.

Each indicator points to the slide it\'s connected with via the data-bs-slide-to attribute. The enumeration starts from 0. That means that the indicator pointing to the first slide has adata-bs-slide-to attribute with the 0 value and the indicator pointing to the third slide has adata-bs-slide-to attribute with the 2 value.

So, the regular workflow of adding the new slide is:
Choose the last slide in the left panel and clone it;
Choose the last indicator in the left panel and clone it;
Choose the newly created indicator, go to the Advanced tab, and increase the value of the data-bs-slide-to attribute on 1.

You can simply remove the Indicators container if you don\'t need to use them.

Fade/Slide effect

You can switch between fade or slide effects.

Choose the most top-level Carousel element in the left panel, open the Advanced tab and add or remove the carousel-fade class.

Autoplay

You can make carousel cycle slides automatically.

To enable autoplay, choose the most top-level Carousel element in the left panel, open the Advanced tab and set the data-bs-interval attribute value to 5000. The 5000 is the 5000ms = 5s. That means that the carousel will change slides every 5 seconds. You can change this value as you want. Set the value to false to disable autoplay.

Then add the data-bs-ride attribute with value carousel. It will start cycling slides after the page load.

Then press Save & Close button and refresh the page to apply changes.

You can find some more useful options here: https://getbootstrap.com/docs/5.0/components/carousel/#options