How To Use the Carousel Block to Display Your Content
Stackable’s Carousel / Slider block is a versatile block that lets you add almost any type of block to display your content in a neat series of slides.
The Carousel block comes with Slide and Fade Effects, the ability to show one or more slides (not applicable for Fade Effect), Previous and Next Arrows, Dot Navigation and an Autoplay function to enable the sliding effect.
Some common uses of Carousels in websites include but are not limited to:
- Hero carousel
- Image carousel
- Product carousel
- Feature carousel
- Testimonial carousel
- Posts carousel
How to Use the Carousel Block
First, add the Carousel block to your page from the block library.
Next, click the plus sign (+) button inside the Carousel block to add columns or pre-made blocks into the Carousel.
Customizing the Carousel Block
You can customize the Carousel block just like any other block.
In addition to this, you can also customize the individual blocks you have added inside the Carousel block.
Once you have added blocks into the Carousel, you can modify the layout and style settings of each block inside it.
Changing the Number of Slides
You can increase the number of slides that appear in the Carousel block using the Slides setting in the Layout tab.
To duplicate your slides, click on the copy icon next to the Slides label then increase the number of slides using the range slider.
Slide or Fade
Under Carousel Type, you can choose between Slide or Fade for the transition effect of the slides.
Select Slide and you can adjust the number of Slides to Show in the Carousel block.
Click on the Responsive Toggle Icon next to the Slides to Show label and you can choose the number of slides you want visible on mobile or tablet.
Select Fade as your Carousel Type and you can adjust the Fade duration.
Autoplay and Looping
You can toggle on Autoplay if you want the Carousel block to automatically move through each slide without the need to click on the arrows or dots.
When the autoplay toggle is turned on, it also automatically loops the carousel so that when the carousel reaches the last slide, it loops back to the first. You will only see the effect of this option in the frontend.
Note that when the mouse is hovered over the Carousel block in Autoplay, the sliding action will pause.
Using Arrows and Dots
Arrows and Dots are options in the Carousel block that allow users to navigate through the slides.
In the Style tab of the Carousel block, you can customize the Arrows and Dots.
When Arrows and Dots are turned on, you have full control over how it looks and where it is positioned in the block.
In the Arrows panel, you can customize the Previous and Next arrows that appear by default on each side of the Carousel block.
You can change the Previous/Next Slide Icons to icons of your choosing.
You can also select between Inside or Outside for the Arrow Position then pick a layout using the Button Justify and Alignment settings.
You can use the Button Justify and Alignment settings to choose precisely where the arrow buttons are positioned when inside or outside the block. Then use the Button Offset and Button Gap to modify the spacing of your arrows.
You can further customize the Arrows by changing the Button and Icon color, size, Border Radius and Opacity.
In the Dots panel, you have the options Dot Justify and Dot Offset to modify the layout and spacing of your dot navigation.
With Dot Style, you can choose between Solid color or Outline for the dots.
Once you’ve chosen a Dot Style, you can go on to customize your Dot Color and Active Dot Color.
The Active Dot Color corresponds to the slide that is visibly shown in the Carousel.
Use the Dots Gap setting to adjust the space between the dots.
You can also set the values for the Active Dot Width and the Active Dot Height.
Show Arrows or Dots on Mobile
Stackable’s Carousel block is responsive.
In the Arrows and Dots panel of the Style tab, you have the option to show or hide the arrows and dots on mobile.
When this option is disabled, users will still be able to touch and swipe across the slides on mobile and tablet devices.
