Contents

Carousel Addon

The Carousel Addon adds a Carousel element to the Gridder. A carousel can contain images, mp4 videos, YouTube / Vimeo videos, text slides, project thumbnails or product thumbnails.

Get the Addon

Buy the Carousel Addon, then install it as a WordPress plugin.

After installing and activating the addon, the + Carousel button appears in the Gridder toolbar. Click it to open the Carousel modal.

The Carousel button in the Gridder toolbar

The "+ Carousel" button appears in the Gridder toolbar

In the Edit Carousel modal you can add images, videos, text slides or project / product thumbnails as slides. The + Video button covers both .mp4 files from the Media Library and YouTube / Vimeo videos via URL.

The Edit Carousel modal

The Carousel modal is where you add slides and choose carousel behavior

You can toggle Random Order, Autoplay, Free Drag and Show Multiple Slides, choose the transition type (Slide, Fade or None) and decide whether slides use a custom aspect ratio or a fixed height like 100vh.

Select a slide to set its Classes. The class names are added to that slide's .lay-carousel-slide element and stay attached to the slide when slides are reordered.

Use the carouselSlideChanged event to react whenever a carousel selects a different slide. The payload contains the concrete carousel and slide DOM elements, so code can distinguish multiple carousels on the same page.

window.laytheme.on('carouselSlideChanged', function (event) {
	console.log(event.carousel)      // .lay-carousel DOM element
	console.log(event.carouselWrap)  // .lay-carousel-wrap DOM element
	console.log(event.slide)         // selected .lay-carousel-slide
	console.log(event.index, event.previousIndex)
	console.log(event.relid, event.transition, event.initial)
})

The public API can navigate a specific carousel. Pass a .lay-carousel or .lay-carousel-wrap DOM element, a jQuery object, a CSS selector or a carousel relid. When a page contains multiple carousels, passing the concrete DOM element is the safest target.

const carousel = document.querySelector('.lay-carousel[data-relid="123"]')

window.laytheme.carousel.next(carousel)
window.laytheme.carousel.previous(carousel)
window.laytheme.carousel.goTo(carousel, 2) // zero-based slide index

const state = window.laytheme.carousel.getState(carousel)

Global settings live in Lay Options → Carousel Addon. These settings define the default look and behavior for carousel navigation, captions, numbers and buttons.

Carousel Addon options in Lay Options

The Carousel Addon options page

  • General controls transition defaults, drag behavior, looping, autoplay and random order.
  • Captions controls caption placement, typography and spacing.
  • Numbers lets you show slide numbers such as "1/4" and style them.
  • Circles adds small pagination dots below or above the carousel.
  • Arrows and Buttons control previous / next navigation.
  • Phone lets you adjust carousel behavior and navigation for smaller screens.

For the general Gridder element explanation, see Carousel in Gridder Elements. For the addon product page, see Carousel Addon.