We’ve included just the bare minimum amount of settings, and similar to the C9 Image Carousel, this block has settings for # of slides, wrapping slide animations, auto-slide advancement, a slide duration setting that goes with enabling the auto-slide advancement, and the ability to hide/show the two sets of indicator controls that come with the carousel.

Our carousel uses Bootstrap’s Owl Carousel. It can have a C9 Column Container block placed within it, which is just the container portion of our C9 Grid block. You can learn more about our responsive column grid container blocks on the Making Responsive Layouts with Gutenberg with the help of the C9 Grid block.

Carousels come with three slides by default. To add an additional slide, open up the Block Settings in the inspector by clicking on the gear icon next to the feather icon.

Defaults to three slides. Removing slides will delete content so keep that in mind when reducing slide numbers.

Slide, fade, or no transition between slides.

Set the height for the carousel in pixels

Set the default alignment for content appearing inside of slides

Restart slides back at beginning after it has played through.

Automatically paginate between images in the carousel

How many milliseconds do you want to have for each slide? 5000ms would be 5 seconds.

The backend WordPress admin will see a dashed outline around the carousel controls. The front end only has simple arrow controls. If you want to hide those, select this toggle. (Visible/enabled by default)

The indicators are the little dashed lines at the bottom of the carousel images to indicate how many total images there are. They are visible by default.

Add a custom CSS class for additional styling or customization.