Get Started

Image Carousel

5 min read

0:00 5:18

The Image Carousel Block lets you display multiple images in a responsive, interactive slider. You can control autoplay, continuous scrolling, looping, navigation arrows, pagination dots, image dimensions, spacing, image fit, borders, backgrounds, and hover-related slide effects.

How to Add an Image Carousel Block

Follow these steps to add and configure the Image Carousel Block in the WordPress Gutenberg editor.

Step 1: Add the Image Carousel Block

  1. Open the page or post where you want to display the image carousel.
  2. Click the + (Add Block) button in the Gutenberg editor.
  3. Search for Image Carousel in the block inserter.
  4. Select the Image Carousel block from the ShapeBlock category.
  5. The Image Carousel block will be added to your page with image placeholders.
  6. Select the block to configure its settings using the sidebar.

Step 2: Configure the Image Carousel Block

Select the Image Carousel Block to access its configuration options in the sidebar. The available options are organized into four tabs:

  • Settings: Add and manage images, choose image sizes, configure playback behavior, and control navigation.
  • Layout: Set the number of visible images, spacing between slides, and image height.
  • Style: Customize image fitting, backgrounds, borders, padding, inactive slide appearance, navigation arrows, and pagination dots.
  • Advanced: Configure padding, margin, and background.

Settings Tab

The Settings tab contains the Images, Playback, and Navigation panels for managing carousel images and playback behavior.

1. Images

  • Image Items: Each image appears as a separate item with a preview and management controls.
    • Select Image: Choose an image from the WordPress Media Library.
    • Replace Image: Replace the selected image with another image.
    • Move Up: Move the image one position upward.
    • Move Down: Move the image one position downward.
    • Duplicate: Create a copy of the image item.
    • Remove: Delete the image item.
  • Add Images: Select multiple images from the Media Library to add them to the carousel.
  • Add Empty Item: Add an empty image item and select an image later.
  • Image Size: Choose an available WordPress image size for the carousel. Smaller sizes can improve loading speed, while larger sizes may provide better image clarity.

2. Playback

  • Continuous Scroll: Enable continuous scrolling so the slides glide without stopping, like a marquee.
  • Loop: Enable or disable looping so the carousel can cycle through the slides continuously.
  • Centered Slides: Keep the active image centered, with neighboring slides partially visible.
  • Autoplay: Automatically advance the slides. This option is available when Continuous Scroll is disabled.
  • Autoplay Delay (ms): Set the delay between automatic slide changes. This option appears when Autoplay is enabled and Continuous Scroll is disabled.
  • Pause on hover: Pause autoplay when a visitor hovers over the carousel. This option appears when Autoplay or Continuous Scroll is enabled.
  • Scroll Speed (ms): Set the duration of the continuous scrolling movement. A larger value makes scrolling slower. This option appears when Continuous Scroll is enabled.
  • Transition Speed (ms): Set the duration of the slide transition. This option appears when Continuous Scroll is disabled.

3. Navigation

  • Show Arrows: Enable or disable the previous and next navigation arrows.
  • Show Dots: Enable or disable pagination dots below the carousel.

Layout Tab

The Layout tab contains the Slides panel for controlling the number of visible images and the dimensions of each slide.

1. Slides

  • Images Per View: Set how many images are visible at the same time. Responsive settings are available for desktop, tablet, and mobile.
  • Space Between (px): Adjust the spacing between slides. Responsive settings are available for desktop, tablet, and mobile.
  • Image Height (px): Set the height of the slide containers. Responsive settings are available for desktop, tablet, and mobile.

Style Tab

The Style tab contains the Image Box, Arrows, and Dots panels for customizing the appearance of the slides and navigation elements. The Arrows panel appears when Show Arrows is enabled, and the Dots panel appears when Show Dots is enabled.

1. Image Box

  • Image Fit: Choose how images fit inside their containers:
    • Cover: Fill the container while cropping parts of the image when necessary.
    • Contain: Display the entire image within the container.
    • Fill: Stretch the image to fill the container.
  • Background: Set a background color or gradient for the slide container.
  • Border: Customize the slide container’s border.
  • Border Radius: Adjust the rounding of the slide container’s corners.
  • Padding: Set the inner spacing around each slide. Responsive settings are available for desktop, tablet, and mobile.
  • Inactive Image Scale (%): Reduce the scale of inactive slides so the active slide stands out. Leave empty to keep all slides at the same scale.
  • Inactive Image Opacity (%): Adjust the opacity of inactive slides. Leave empty to keep all slides fully opaque.
  • Image Overlay: Set an overlay color or gradient over the images.

2. Arrows

This panel appears when Show Arrows is enabled in the Settings tab.

  • Icon Color: Set the color of the navigation arrow icons.
  • Background: Set a background color or gradient for the navigation arrows.
  • Size (px): Adjust the size of the navigation arrows. Responsive settings are available for desktop, tablet, and mobile.
  • Border Radius: Customize the rounding of the navigation arrow containers.

3. Dots

This panel appears when Show Dots is enabled in the Settings tab.

  • Color: Set the color of the inactive pagination dots. You can use a solid color or gradient.
  • Active Color: Set the color or gradient of the active pagination dot.
  • Size (px): Adjust the size of the pagination dots.

Advanced Tab

The Advanced tab contains the Spacing and Background panels for controlling the spacing and background of the entire Image Carousel Block.

1. Spacing

  • Padding: Set the inner spacing around the entire Image Carousel Block. Responsive settings are available for desktop, tablet, and mobile.
  • Margin: Set the outer spacing around the entire Image Carousel Block. Responsive settings are available for desktop, tablet, and mobile.

2. Background

  • Background: Set a background color or gradient for the entire Image Carousel Block.
Updated on October 15, 2026

What are your feelings

  • Happy
  • Normal
  • Sad
Table Of Contents

Download Now & Design Without Limits!

Bring your Gutenberg designs to life with ShapeBlock create stunning, animated websites effortlessly. No code. No limits. Just motion made easy.

Get Started Free
Buy Now
FAQ

Frequently
Asked Questions

Common questions answered, if you still have any
questions
feel free to ask.

What is ShapeBlock?
ShapeBlock is a block library for the WordPress block editor. It adds 33 native blocks sliders, carousels, grids, tabs, counters, filters and more each with Settings, Layout and Style tabs (plus a shared Advanced tab) and a live preview on the canvas.
No. The blocks are native to the block editor, so there is no page-builder layer and no shortcode is needed for normal use. ShapeBlock does not depend on any other plugin.
Upload the plugin via WordPress Dashboard or FTP and activate it.
WordPress 6.6 or newer and PHP 7.4 or newer.
ShapeBlock is built to stay light. A block’s styles are added only to pages that contain that block, small stylesheets are printed inline instead of as extra requests, and nothing relies on jQuery. Blocks you switch off are never registered at all.
Yes. The ShapeBlock dashboard lists every block with a switch. A disabled block is not registered, so it adds nothing to the editor or to your pages.
Yes. Most spacing, size, alignment and typography controls take a separate value for Desktop, Tablet (up to 1024px) and Mobile (up to 767px). Leave a device empty and it follows the larger screen.
Yes. Blocks render the same in both, and their styles are printed in the page head rather than whenever the theme happens to run.
Not by default. Google Fonts is optional and stays off until you enable it in ShapeBlock → Settings. Video blocks only load YouTube or Vimeo when you add a video link, and share buttons are plain links that do nothing until a visitor clicks them.
Yes. The Theme Builder lets you build headers and footers with blocks and choose where each one appears with display conditions. Reusable templates can be placed anywhere with the shortcode.
Yes. ShapeBlock → Settings can export and import your block settings, colours, layout, templates and Theme Builder templates as a file, so a second site can start from the same setup.

Our core value is regularity, responsiveness, and innovation. This is why people love us With the qualified dedicated support.

Follow our Socials

Useful Link

Supports

News Letter

Subscribe to our newsletter

© All Rights Reserved – shapeblock by ShapeKode.