Introducing: New Carousel Block

Introducing: New Carousel Block

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!

10 thoughts on “Introducing: New Carousel Block

  1. 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?

    1. 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 😊

  2. 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

    1. 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.

    1. 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.

  3. 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

    1. 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!

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.