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.

• 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.

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

• • 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 Hooks

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