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?
Customizable
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.
Transition Effects
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.
User Control
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.
Responsiveness
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?
Conclusion
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!
Hey there, I am desperately looking for a carousel/gallery block that dynamically gets images from an ACF Gallery field. Is that possible with this block?
Hi Anja! Currently you cannot fetch images from an ACF Gallery field for the Carousel block. It works with individual ACF Image fields, but not the Gallery. However, I can send your suggestion to the dev team to see if this is something we can make possible 😊
I am looking for this feature too as it’s very useful for making page templates.
Hi, Ahmad, thank you for your interest to add this feature to the Carousel block. While it’s not currently supported, we appreciate your suggestion and will keep it in mind for future updates.
Amazing! Thank you for finally doing this!
Thanks for using Stackable, Logan!
Hi,
Great block, Is it possible to pull in posts within a certain category to display say the first 6 news items under the category ‘innovation’. I have a number of categories and would like to be able to show posts within each as carousels.
Thanks
Rob
Hi Rob! You can do this by using Stackable’s Dynamic Content feature. You can pull up your latest posts by selecting Latest Posts in the Dynamic Source. However, you can’t select a specific category. I’ll suggest adding this feature to our dev team and see what we can do.
Is there any way I can use this block with custom post loop?
Hi Huanyi Chuang – unfortunately, you can not use the Carousel block with the Query Loop block. However, a workaround could be using Stackable’s Dynamic Content if you want the slides to display certain post types. Let me know if this helps, otherwise, I’m here if you have any more concerns.
Hi! Is there a smooth way to change the order of the carousel’s content? Like, if I want the content showing first to be placed last in the loop instead?
Best regards
Anders
Hi Anders! Unfortunately, this is not possible with the Carousel block. I could bring this up with the dev team and see if this is a feature we can add to the block. Thanks!
hi, how do you adjust the container height so they are uniform across all slides? It seems it will only work individually when you adjust it in the layout of each images? Is there a universal control for this? https://lcs.resultspathfinder.com/home-2/
Hello! The Carousel block automatically adjusts the height of each column or slide to match the one with the longest content. This ensures that the columns or slides appear uniform in height. If you still wish to manually adjust the height of each column or slide in the carousel block, you’ll need to do so individually for each one.
Is it possible to have a random start to the content? It would be nice to not always have the same order for these as you refresh the pages.
Thanks for the suggestion! While randomizing content order isn’t supported, I’ll pass your idea along to our team for consideration. But you can use this in tandem with our Dynamic Content that can allow you to use metadata from a random post
Hello, I love Stackable carousel; it works really fine and is easy to adjust. I would like to pinch zoom the carousel when I visit the site with a mobile. How do we do it? Thanks
Hi Lilian! We’re thrilled to hear that you’re enjoying the Stackable carousel feature! While pinch zoom functionality isn’t currently supported directly within the Carousel Block, you can achieve a similar effect by toggling on the Lightbox feature for images within your carousels. This allows visitors to open the images in a larger resolution and pinch zoom as needed.
It would be nice if we could have the carousel loop through the “slides” (columns)…and if possible – have part of the previous and next slides showing. This encourages people to flip through the carousel!
Thank you for your suggestion! We’re glad to inform you that as of v3.12.12, carousels can now loop through the slides. You can find the “Infinite Scrolling” setting in the Layout tab of the Inspector. As for having part of the previous and next slides showing, while this feature isn’t currently available, I’ll relay this to the dev team and see if it’s something we can consider. We always appreciate your feedback – if you have any further suggestions or questions, please don’t hesitate to let us know!