The Carousel Gallery Block in FolioBlocks lets you create smooth, swipe-able image carousels directly inside the WordPress Block Editor (Gutenberg). Designed for photographers, designers, and creatives, this block provides a fast, lightweight way to showcase your best images with elegant transitions and full control over playback behavior.
Note: This article focuses on the Professional (Pro) version of FolioBlocks. Some of the features described here may not be available in the free version.
Table of Contents
What Is the Carousel Gallery Block?
The Carousel Gallery Block is a dynamic, responsive slider that displays one image at a time (or several, depending on your settings) while allowing visitors to navigate through your gallery using arrows, dots, or swipe gestures.
Unlike static gallery layouts such as Grid or Masonry, the Carousel layout emphasizes one image at a time, making it perfect for hero sections, project showcases, and storytelling sequences. It’s powered entirely by modern WordPress block technology — no shortcodes, no heavy scripts.
Perfect for:
- Hero galleries and featured images
- Product or portfolio slideshows
- Event recaps or storytelling sequences
- Landing pages and homepage highlights
How to Add the Carousel Gallery Block
1. Insert the Block
In the WordPress Block Editor, click the ➕ Add Block button and search for “Carousel Gallery.” You’ll find it under the FolioBlocks section.
2. Upload or Select Images
Use the Media Library or Upload button to add your images.
You can insert multiple images at once and reorder them later using drag and drop or the List View sidebar.
3. Adjust Gallery Width & Behavior
Use the toolbar alignment options to select Content Width, Wide Width, or Full Width.
Then, open the block settings panel to fine-tune autoplay, slide speed, and navigation controls.
General Gallery Settings
Image Resolution
Choose between Thumbnail, Medium, Large, or Full image resolutions to balance sharpness with loading performance.
Image Orientation (Mobile)
The Carousel Gallery block is responsive out the box and doesn’t require you to change any settings. However if you have a Carousel where all your images are in a Portrait (vertical) orientation activate this setting and the responsive layout on mobile will be tuned to those images ensuring they fill up more of the available viewport.
Enable Image Downloads
Allows you to add a download icon to each image thumbnail and inside the Lightbox, allowing clients or visitors to save high-resolution versions of your work. When enabled an extra drop-down select control is enabled allowing you to specify if you want to always display the download icon or display it only when the user hovers over the image.
Note: Enable Image Downloads can not be used when Enable WooCommerce Integration is active.
Enable WooCommerce Integration
Enables WooCommerce Integration allowing you to link gallery images with WooCommerce products on your website. Instructions for WooCommerce integration are included later in this tutorial.
Note: Toggle for Enable WooCommerce Integration will only display if WooCommerce plugin is installed and active on your website. Enable WooCommerce Integration can not be used when Enable Image Downloads is active.
Disable Right-Click on Page
Blocks right-click functionality to discourage casual image saving.
Note: This adds a layer of protection but cannot prevent image access through browser developer tools or page source.
Enable Lazy-Load of Images
Load images only when they become visible in the carousel viewport, improving page load speed and performance.
Gallery Control Settings
Autoplay
Enable autoplay to let your carousel automatically cycle through images. You can adjust the autoplay speed (in seconds) to control pacing.
Navigation Controls
Show or hide navigation arrows and play/pause button (when Autoplay is activated). Visitors can also swipe between images on touch devices.
The alignment of the Carousel controls can be adjusted between Left, Center, and Right.
Note: Additional style options for the Carousel Controls are available in the blocks style settings panel.
Gallery Image Settings
Enable Lightbox
Enable the built-in Lightbox to let visitors view your images full-screen when the user clicks on them.
It supports keyboard navigation, swipe gestures, and the option to show image captions within the Lightbox view.
Note: Show Caption in Lightbox control only displays when Enable Lightbox is active.
Show Title on Hover
Use Show Title on Hover to provide context to your visitors adding a description or credit to the image.
By selecting any image that you added to your Carousel Gallery Block, you can update its Image Caption, Image Title, or Alt Text directly in the block editor.
Note: Changes made to Image’s caption, title, or alt text currently do not sync back to the WordPress Media Library.
Gallery Styles Panel
Background
The Background setting allows you to customize the backdrop behind your Carousel Gallery block. You can choose any color from your theme palette or define a custom color to help your images stand out or blend seamlessly with the surrounding layout.
A subtle background tone can make white borders or drop shadows more visible, while a dark background often enhances contrast and gives a cinematic look.
Dimensions – Padding & Margin
The Padding and Margin controls give you fine-grained control over the spacing inside and around your Carousel Gallery block.
Use Padding to create breathing room between your gallery content and its edges — useful for highlighting the gallery within a colored background.
Use Margin to control the outer spacing between the gallery and adjacent blocks or page sections, ensuring perfect alignment and balance within your overall page design.
Carousel Control Styles
Control Background Color & Control Icon Color
These settings allow you to change the Background Color and Icon Color on the Carousel control buttons.
Gallery Image Styles
Border Color, Width, & Radius
These settings allow you to add custom borders to the images in your gallery. Select the color of your border and then adjust the border width slider to your liking.
The images in the editor update in real time so you can see how they look without having to visit the front end of the site.
Border Radius slider allows you to add a radius to the corner of the images to further create special effects.
Enable Drop Shadow
Enable Drop Shadow adds a subtle drop shadow to your images that helps them pop off the page.
WooCommerce Integration
Display Add To Cart icon
With Enable WooCommerce Integration turned on you will be presented with a new select control that lets you choose if you want to always display the Add To Cart button or Display it only Hover.
Gallery Image Settings for WooCommerce
Additional settings controls are added in Gallery Image Settings. If you Enable Lightbox you will now have the option to Show Image Caption or Product Info inside the Lightbox.
The same applies to Show Overlay on Hover, it now gives you the option to display the Image Title or to display the Product Name & Price.
These two options downgrade gracefully so there is no need for you to link every image in your gallery to a WooCommerce product. Image linked to products will display the Product Description in Lightbox or Product Name & Price on Hover and Images not linked to WooCommerce products will default to showing the Image Caption in the Lightbox and the Image Title on Hover.
Linking Images to WooCommerce Products
Linking your images to products is super simple, with Enable WooCommerce Integration turned on simply select one of the images in your gallery and look in it’s blocks settings.
You will see a new setting available, Linked WooCommerce Products, with an input field that allows you to search through the all of the WooCommerce Products on your site.
Simple search for your product and select it to link it with the image.
Note: The settings for Linked WooCommerce Products only appear when Enable WooCommerce Integration is active on the parent gallery block.
Example Carousel Gallery
Below is an example of a Carousel Gallery created with FolioBlocks:
Common Questions
How many images can I add?
There are no limits on how many images you can add.
Can I mix portrait and landscape images?
Yes, the Carousel gallery automatically sizes all images to a uniform height. If using only portrait images it is recommended to turn the Image Orientation setting to Vertical Images.
Does it work with my theme?
For the best experience it is recommended to use a block based theme. However FolioBlocks does work with classic themes provided they support wp_block_styles and the block editor.
Is it compatible with WordPress 6.x or newer?
Absolutely. The Carousel Gallery Block is built for the WordPress Block Editor (Gutenberg) and fully supports the latest WordPress versions.
Get Started
Ready to create your first responsive image carousel? Get FolioBlocks and start building professional, responsive carousels in the WordPress Block Editor (Gutenberg) today.