The GenerateBlocks carousel block includes a query layout that lets you display blog posts dynamically in a slider. This tutorial walks through building a full-width, single-card carousel from scratch — with the featured image on the right and post metadata on the left.
Setting Up the Carousel Block
Add a new section to your page, then insert the carousel block from GenerateBlocks. When prompted with the five preset options, select the query layout.
The default preset loads a three-column layout with a title and navigation at the top. For this build, delete the inner container so you can start fresh. Starting from scratch is almost always easier than working backwards through a preset.
Before building out the card, go to the carousel block settings and set slides per view to one. This tutorial uses a full-width card that displays one post at a time.
Building the Card Layout
Inside the loop item, add a container. This will be the wrapper for the card design.
Set the layout to grid and choose a 50/50 two-column layout. Add a rem-based column and row gap, then add two containers inside — one for the content on the left and one for the image on the right.
Left container: Add a text block and select the dynamic tag for term list, set to current post categories with no link. Below that, add a headline block using the post title dynamic tag, then link it to the post. Add a text block below that using the post date dynamic tag.
Right container: Add an image block and assign the featured image as the dynamic data source. Apply a global class called image-background to the outer container holding the image — this is an accessibility-friendly approach to handling background images. Set a minimum height of 300px on that container so it holds its size relative to the content on the left.
Styling the Card
Apply a global subheading style to the category text — this typically adds letter spacing, all caps formatting, and removes the bottom margin to tighten up the spacing below it.
On the headline, remove the link underline by targeting the link selector under typography and setting text decoration to none.
Apply a small body text global class to the date for a smaller font size.
On the grid, set alignment to center to vertically align the content with the image.
Add a background color to the grid container, then apply a medium border radius global class. To make the border radius clip the image on the right side correctly, set overflow-x and overflow-y to clip on the grid container.
Apply a padding global class to the left container only — not the grid itself. Adding padding to the grid would push the image inward, which you want to avoid since the image should extend to the edge of the card. Zero out the bottom margin on the date to keep it centered with the image.
Responsive Adjustments
Tablet: Change slides per view to one. The layout works well at this breakpoint with that single change.
Mobile: Switch the grid to a one-column layout. Set the image container minimum height to around 200px — a range of 175 to 225px works well for this type of card on mobile. Zero out the row gap on the grid since the padding on the content container already provides enough spacing.
For the title and navigation arrow area at the top of the carousel, change the flex layout from row to column and set alignment to start so the arrows sit left-aligned beneath the heading.
Finishing the Navigation
Add a row gap of about 1.5rem between the heading and navigation arrows to give them breathing room.
On the carousel navigation controls, update the arrow color to match your brand. Set the border to the same color, and on hover, swap the background to that color with white for the arrow. This creates a clean hover state that also grays out when the control is disabled.
In the carousel settings, disable bullets and enable infinite loop. Remove the pagination block from the page if the bullets persist after saving — that block overrides the setting if it is still present.
The Finished Result
The carousel displays one full-width blog post card at a time, with infinite looping, custom navigation arrows, and a clean responsive layout across desktop, tablet, and mobile. It works well on homepages or any page where you want to feature recent posts.
