Image Carousel

Add multiple images in a carousel

link Block names

t2/image-carousel, t2/image-carousel-image

link Properties (t2.json)

• showPagination

  booleanfalse

  Show pagination dots for the slider.

• slidesPerView

  number|string1

  Number of slides per view.

• breakpointMobile

  integer640

  Add a mobile breakpoint for the carousel with more than 2 images.

• spaceBetween

  integer16

  Add the space (in pixels) between the carousel slides.

• spaceBetweenMobile

  integer16

  Add the space (in pixels) between the carousel slides in the mobile view.

• slidesPerView

  number|string1

  Default number of slides per view.

link

icons

• sliderPrev

  stringarrowBack

  Icon used for the previous arrow in the image carousel.

• sliderNext

  stringarrowForward

  Icon used for the next arrow in the image carousel.

• lightboxOpen

  stringzoom

  Icon used to open the image in a lightbox.

• lightboxClose

  stringclose

  Icon used for the close button in the lightbox.

• lightboxPrev

  stringarrowBack

  Icon used for the left arrow in the lightbox.

• lightboxNext

  stringarrowForward

  Icon used for the right arrow in the lightbox.

link

features

• effect

  array'slide', 'fade'

  Array of supported effects.

link

features.aspect-ratio

• default

  string'16:9'

  Default aspect ratio.

• options

  array'16:9', '16:10', '4:3', '1:1'

  Array of supported aspect ratios. It will also contain the default value if it is not present in the list.

link Style properties

• • Icon color

  • --t2-image-carousel-color-icon
  • Theme.json: wp.custom.t2-image-carousel.color.icon
  • Default: #fff

• • Color of the background

  • --t2-image-carousel-color-background
  • Theme.json: wp.custom.t2-image-carousel.color.background
  • Default: #000

• • Wrapper row gap (between main carousel and thumbnails)

  • --t2-image-carousel-row-gap
  • Theme.json: wp.custom.t2-image-carousel.row-gap
  • Default: var(--wp--preset--spacing--40)

• • Gap between image and caption

  • --t2-image-carousel-caption-gap
  • Theme.json: wp.custom.t2-image-carousel.caption.gap
  • Default: --wp--preset--spacing--30

• • Gap between pagination bullets

  • --t2-image-carousel-pagination-gap
  • Theme.json: wp.custom.t2-image-carousel.pagination.gap
  • Default: --wp--preset--spacing--20

• • Color of the pagination bullet

  • --t2-image-carousel-color-pagination-bullet
  • Theme.json: wp.custom.t2-image-carousel.color.pagination-bullet
  • Default: var(--wp--preset--color--foreground,

• • Color of the pagination bullet on hover

  • --t2-image-carousel-color-pagination-bullet-hover
  • Theme.json: wp.custom.t2-image-carousel.color.pagination-bullet-hover
  • Default: rgba(0,

• • Color of the active pagination bullet

  • --t2-image-carousel-color-pagination-bullet-active
  • Theme.json: wp.custom.t2-image-carousel.color.pagination-bullet-active
  • Default: rgba(0,

link Image sources

The block supports three mutually exclusive image sources, selected via "Image source" in the sidebar. Switching source never clears data from the other modes.

link Media library (default)

Images are picked from the WordPress media library. Each image is stored with its attachment id and url. This is the original behaviour and is fully unchanged.

link External URLs

Images are entered as plain URLs in the sidebar, one per image entry. Each entry also has optional Alt text and Caption fields. No media library modal is shown.

The externalImages attribute stores the list:

[
  { "url": "https://example.com/photo.jpg", "alt": "A photo", "caption": "Photo caption" }
]

link Post meta

Images are read from a post meta field at render time. The meta field must contain an array of URL strings. Both native PHP serialised arrays (already decoded by WordPress) and JSON-encoded strings (e.g. stored via json_encode / JSON.stringify) are supported.

Select the meta key from the dropdown in the sidebar — only meta keys whose value is an array are listed. No media library modal is shown.

The metaKey attribute stores the chosen meta key name:

{ "metaKey": "vehicle_picturesPaths" }

Example meta value (either format is accepted):

["https://example.com/img1.jpg", "https://example.com/img2.jpg"]

link Hooks

• t2/block/image-carousel/image_size Filters the carousel image size. Has 2 params: $image_size, $attributes, returns a string.