When it comes to engaging and captivating website visitors, the layout and presentation of the content is as crucial as the content itself. There are now many ways to present information—one of them being a carousel.
Carousels are very versatile because it can be utilized in different use cases, like storytelling, presenting a gallery, or highlighting featured content. With this in mind, Stackable brings to you our new Carousel block—a dynamic and highly customizable tool to showcase content on your website through sliders and carousels.
In this article, we will introduce you to the power-packed features of the Carousel block and what you can create with it.
What is a Carousel or Slider?
A carousel, often synonymous with a slider, allows you to display multiple pieces of content (such as images, text, videos) in a rotating or sliding format. It saves space, keeps the design uncluttered, and enables the audience to interact with or consume content in an engaging manner.
Stackable’s Carousel Block
We’ve made creating carousels and sliders very effortless and easy. With the Carousel block, you don’t need any coding knowledge or separate slider plugins. Here’s what makes Stackable’s Carousel block a great asset for any web creator:
What are the features of the Carousel block?
You can add literally any block inside the Carousel block. Whether it is text, images, videos, buttons, or a combination of these elements. Simply add a block by clicking the plus button like in the video below:
If you want to add more blocks, just select the Inner Column and click on the inserter.
Autoplay and Looping
Stackable’s Carousel block has an autoplay toggle that will slide content automatically after a set interval. This is so that you can display the different slides without requiring any interaction. 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 find this setting by navigating to Layout tab > Layout Panel.
You can set what type of carousel you will be displaying on your page with the Carousel Type controls.
Here’s what it looks like when the carousel is set to Slide.
And with the slide option, you can also set the carousel to show one or more slides at a time.
On the other hand, here is an example of a carousel with the Fade option selected.
You can opt to add some controls so that website visitors have the ability to manually navigate through a carousel. You can even further customize how the dots look like in the Inspector.
The Carousel block can be made responsive to adapt to different screen sizes and devices. On smaller screens, the carousel may resize or show fewer items at once.
How to Create a Slider or Carousel using Stackable’s Carousel Block
To get started, simply add the Carousel block to where you want your slider to appear. From there, you can start adding slides, customizing content, and styling the appearance and animations.
Here’s an example of a Carousel block:
We’ll teach you how easy it is to recreate this slider using the Stackable Carousel block. Below is a sample homepage for a yoga studio. We’ll add a carousel as its hero section and we’ll walk you through how to create it.
First add the Carousel block. Heading over to the Layout tab > Layout Panel, we’ve adjusted this to have one column for now and set the Block and Content Widths to Align Full.
Moving on to the content inside the carousel, we’re adding a Columns block. We’ve selected the 50 / 50 option for this, however, in the Layout tab > Layout panel, we’re adjusting the widths to be 40 / 60 to allot space for our image. Selecting the right inner column, we’ve headed to the Advanced tab > Position panel and set the Right position to 100. Selecting the inner column on the left, we stayed in the Advanced tab > Position panel and set the Z-index to 2 so that it will appear on top of the right column. Going further, we’ve set the left position to 100.
Now let’s add content to our columns inside the first slide of the Carousel block. Inside the right inner column, we’ve added the image and set the height to 600. We’ve also added a beige overlay. Inside the left inner column, we’re adding a heading and a button.
For the button, we headed to the Style tab > Styles panel and selected the Ghost option. We set a custom color for the text and the border. We’ve also changed the font to Hind and changed the transform to Uppercase.
Finally, we just need to change the alignment of the left inner column so it’s centered vertically. Select the Inner Column block, and in the Layout tab > Layout Panel, select Center for the Column Alignment.
Going back to the Carousel block, we navigated to the Layout tab > Layout panel. For the Slides control, we made sure the Clone button was selected and changed the slide number to 3. This was done so that the new slides will clone what we’ve added in the first slide. This makes it so much easier and faster to reproduce similar content.
Now all that’s left to do is to change up the content of each of the slides, such as the heading texts, button texts, and the images.
To finish up, let’s make some finishing touches for our carousel. We’ll leave the Autoplay toggle turned on and the speed as it is so that our carousel plays automatically when users visit this website.
Moving on to the Style tab, we toggled the arrows off and finally, customized the dots to make it cohesive with the rest of the website motif.
Once that’s done, save your draft (or publish) and preview how your Carousel block looks like! Wasn’t that easy?
The Carousel is a great way to showcase content on your website. Thanks to Stackable’s Carousel block, you have a powerful and customizable tool for creating engaging web content. With its ease of use, versatile content options, and customizable features, it’s a fantastic asset for any web designer or content creator using WordPress. Slide into an exciting new way to present your content with the Stackable Carousel block!