PlugVista Carousel Builder Block

PlugVista Carousel Builder Block adds a powerful and flexible carousel slider to the WordPress block editor. Each slide can hold any Gutenberg block — images, text, buttons, covers, WooCommerce products, and more — giving you complete creative freedom.

Key Features

• Use any Gutenberg block as slide content
• 6 slide transition effects — Slide, Fade, Coverflow, Flip, Cube, Cards
• Built-in Lightbox — click any image in a slide to open a fullscreen modal with keyboard navigation (Arrow keys, Escape) and captions
• Free Mode — physics-based momentum scrolling without snapping, ideal for logo carousels
• Centered Slides — display the active slide in the center with partial neighbors visible on both sides
• Auto Height — carousel height adapts dynamically to the active slide’s content
• Mousewheel / Trackpad Scroll — navigate slides by scrolling the mouse wheel or trackpad
• Keyboard Navigation — move through slides using the left/right arrow keys
• Navigation arrows (toggleable)
• Pagination dots (toggleable)
• Autoplay with configurable delay, pause-on-hover, and disable-on-interaction options
• Infinite loop sliding
• RTL (right-to-left) language support
• Live multi-column preview in the block editor
• Responsive breakpoints — configure slides-per-view for mobile separately
• CSS variable theming (theme.json compatible)
• On-demand loading — Swiper assets load only on pages that use the carousel
• Public JavaScript API for integration with tabs, accordions, and modals

Starter Block Patterns

Three ready-to-use block patterns are included:

• Full Width Hero Slider — full-width cover slides with call-to-action buttons
• Testimonials Slider — quote blocks with autoplay
• Logos Carousel — image-based logo ticker with free mode

CSS Customization

Style the carousel using CSS custom properties in your theme’s theme.json or Additional CSS:

• --wp--custom--scb--navigation-color — Arrow color
• --wp--custom--scb--navigation-hover-color — Arrow hover color
• --wp--custom--scb--navigation-size — Arrow size (height in px)
• --wp--custom--scb--navigation-sides-offset — Arrow horizontal offset
• --wp--custom--scb--navigation-alignfull-color — Arrow color for full-width carousels
• --wp--custom--scb--pagination-bullet-active-color — Active dot color
• --wp--custom--scb--pagination-bullet-inactive-color — Inactive dot color
• --wp--custom--scb--pagination-bullet-size — Dot diameter
• --wp--custom--scb--pagination-bottom — Dot pagination vertical offset

Public JavaScript API

Integrate with tabs, accordions, modals, and other dynamic layouts that show/hide content:

window.PlugVistaCarouselBuilder.init(container);   // Initialize all carousels inside a container
window.PlugVistaCarouselBuilder.update(container); // Update/re-initialize existing carousels

Third-Party Libraries

This plugin bundles the following third-party library:

Swiper (https://swiperjs.com/)
License: MIT
Copyright: Vladimir Kharlampidi
Source: https://github.com/nolimits4web/swiper

The full Swiper bundle (v11.2.10, ~154 KB) is included and loaded on-demand only on pages that contain a carousel block.

Credits

Developed by Sourav Biswas.

Powered by Swiper.js — the most modern mobile touch slider, released under the MIT license.