Create a Responsive Image Carousel in WordPress

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.

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.

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 and swipe gestures. When activated an additional toggle to show image captions within the Lightbox view is enabled.

Note: Show Caption in Lightbox control only displays when Enable Lightbox is active

Show Overlay on Hover

The Show Overlay on Hover toggle enables an overlay effect with the Image title to display when you hover over an image.

An additional Select Control allows you to set the Hover Style where you can select from a Blur, Fade, Gradient, Chip, or Color Overlay. With the Color Overlay selected you can additionally customize the color of the text and background on the Overlay.

You can edit each image’s Caption, Title, or Alt Text directly from the image block settings.

Note: Changes made to Image’s caption, title, or alt text currently do not sync back to the WordPress Media Library.

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 which allows you to specify if you want to always display the download icon or display it only when the user hovers over the image.

Settings for setting the icon & background color of the Download icon can be found in the Justified Gallery Block’s styles panel when the Enable Image Downloads setting is active.

Note: Enable Image Downloads can not be used when Enable WooCommerce Integration is active.

Enable WooCommerce Integration

This toggle 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.

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.

Control Background Color & Control Icon Color

These settings allow you to change the Background Color and Icon Color on the Carousel control buttons.

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.