- 2026-05-21
- by LethaldiranMX
- Trends
- 0 Comments
DeveloperA carousel slider block with 6 slide effects, built-in lightbox, free mode, keyboard navigation, autoplay, and CSS variable theming.
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.
