Carousel Slider Block for Gutenberg vs WP Swiper

A responsive modern carousel slider for the Gutenberg block editor that lets you add any blocks to your slides. Easily create sliders for hero sections, testimonials, products, and anything else using Gutenberg blocks. 🚀 Carousel Slider Version 2 is built on the modern Swiper.js library for improved performance and better mobile compatibility. Plugin site: carouselblock.com Features Add unlimited slides Add any blocks to the slides Preview the carousel in the editor Responsive and touch enabled Developer friendly: supports CSS variables & theme.json Settings Slides per view Slides to scroll at a time Slide speed Slide padding Prev/next arrows Dots navigation Infinite loop sliding Autoplay Pause on hover Disable on interaction Responsive settings: slides to show and scroll at given screen size RTL Advanced Settings For dynamic layouts where the slider or its surrounding layout changes after load, such as tabs, accordions, or lazy-loaded content. ResizeObserver Observer Observe parent elements Observe slide children Plugin Settings Plugin settings are available from Settings > Carousel Slider in the WordPress admin. Available options include showing legacy carousel blocks, hiding the legacy warning notice, and loading the full Swiper bundle instead of the default custom Swiper build. Included Patterns Full Width Hero Slider Testimonials Slider Logos Carousel The final look of these sliders depends on your theme styles. You can also fine-tune the design using custom CSS variables (see below). Requirements PHP 5.6+ is recommended, WordPress 5.8+, with Gutenberg active. Documentation Full documentation: carouselblock.com/docs Select the Carousel Slider block from the Design category. Click the + button located at the end of the carousel to add slides. Add any block within the slides. Use the horizontal scrollbar to preview the slides in the editor. You can reorder the slides by using the left and right arrow buttons in the toolbar. To remove a slide, select the slide and click the three dots right above it. Click the option to remove that slide. Click the Carousel Block (the block nesting all the slides) to show the carousel settings. Customizing Styles Carousel Slider v2 supports custom styling via CSS variables: Styling documentation: carouselblock.com/docs?doc=styling Navigation --wp--custom--carousel-block--navigation-size: Arrow icon size --wp--custom--carousel-block--navigation-sides-offset: Distance from edge --wp--custom--carousel-block--navigation-color: Arrow color --wp--custom--carousel-block--navigation-hover-color: Arrow hover color (falls back to navigation-color) --wp--custom--carousel-block--navigation-alignfull-color: Arrow color when carousel is full width Pagination (dots) --wp--custom--carousel-block--pagination-top: Top offset --wp--custom--carousel-block--pagination-bottom: Bottom offset --wp--custom--carousel-block--pagination-bullet-size: Bullet size --wp--custom--carousel-block--pagination-bullet-active-color: Active bullet color --wp--custom--carousel-block--pagination-bullet-inactive-color: Inactive bullet color --wp--custom--carousel-block--pagination-bullet-inactive-hover-color: Inactive bullet hover color (falls back to active-color if set) --wp--custom--carousel-block--pagination-bullet-active-opacity: Active bullet opacity --wp--custom--carousel-block--pagination-bullet-inactive-opacity: Inactive bullet opacity --wp--custom--carousel-block--pagination-bullet-inactive-hover-opacity: Inactive bullet opacity on hover (falls back to inactive-opacity if not set) --wp--custom--carousel-block--pagination-bullet-horizontal-gap: Space between bullets (horizontal) --wp--custom--carousel-block--pagination-bullet-vertical-gap: Space between bullets (vertical) Block Spacing --wp--custom--carousel-block--image-margin-top: Top margin for image blocks --wp--custom--carousel-block--image-margin-bottom: Bottom margin for image blocks --wp--custom--carousel-block--cover-margin-top: Top margin for cover blocks --wp--custom--carousel-block--cover-margin-bottom: Bottom margin for cover blocks Theme JSON Support All the CSS variables can also be defined directly inside your theme’s theme.json under the settings.custom key. For example: { "settings": { "custom": { "carousel-block": { "navigation-size": "22px", "navigation-color": "#000", "pagination-bullet-active-color": "#000" } } } } Frontend API Carousel Slider exposes a small frontend API for integrations with tabs, accordions, modals, or other hidden UI. For some of these dynamic layout cases, the Advanced Settings observer options can also handle updates automatically. window.CarouselSliderBlock.init( container ): Initializes carousel instances inside the given container. window.CarouselSliderBlock.update( container ): Updates existing carousel instances inside the given container and initializes any that are not yet initialized.

WP Swiper adds a flexible carousel block to the WordPress editor. Each slide accepts standard nested blocks, so you can combine images, headings, buttons, video, and other block content without using a separate page builder. Highlights Build slides with nested WordPress blocks. Choose from seven editable in-block starter templates without adding extra block types. Create horizontal or vertical responsive carousels. Configure navigation, pagination, autoplay, loop mode, free mode, and transition effects. Set responsive breakpoints, spacing, offsets, and slides per view. Add background images, focal points, overlays, thumbnails, and custom navigation icons. Drag image files into the editor to create slides. Load frontend assets only when a slider is detected, with an optional global-loading setting for custom setups. Use the bundled Swiper 14 runtime without a jQuery dependency. Accessibility Since version 1.4.6, WP Swiper removes non-visible slides from the accessibility tree and keyboard tab order. Focusable content is restored when its slide becomes visible, including in responsive layouts that display multiple slides. This behavior addresses one carousel accessibility barrier, but it is not a certification that WP Swiper or a website using it conforms to WCAG. Conformance must be evaluated for the complete published page and depends on the carousel configuration, slide content, theme, and other integrations. Site authors remain responsible for accessible content and configuration. Provide meaningful image alternatives, logical headings, readable contrast, and clear control labels. If autoplay is enabled, enable the pause/play control so users can stop rotation. Rotation stops when keyboard focus enters the carousel and restarts only after an explicit user request. See the W3C carousel accessibility guidance. Privacy WP Swiper does not include analytics, advertising, tracking, or telemetry. Images selected through the editor are handled by the standard WordPress Media Library and REST API. Support and development For usage questions, use the WordPress.org support forum. Report reproducible bugs and feature requests on GitHub. Security issues should be reported privately according to the repository security policy. Development is supported through Buy Me a Coffee. Developer filter The wpswiper_frontend_js_register_args filter can change the dependencies and loading arguments used for the plugin’s frontend script. add_filter( 'wpswiper_frontend_js_register_args', function ( $args ) { $args['deps'][] = 'jquery'; $args['args'] = array( 'in_footer' => true, 'strategy' => 'defer', ); return $args; } ); See the wp_enqueue_script() documentation for supported loading arguments. Frontend lifecycle WP Swiper automatically initializes blocks added after page load. Navigation and AJAX integrations can also call window.wpSwiperInit(element), window.wpSwiperDestroy(element), or window.wpSwiperReinit(element) with a .wp-swiper block wrapper. Runtime configuration corrections dispatch a wp-swiper:warning browser event with a structured diagnostic. Initialization failures dispatch wp-swiper:error, and explicit destruction dispatches wp-swiper:destroy. Contributing WP Swiper is developed openly on GitHub, and community contributions are welcome. Report reproducible bugs through the GitHub issue tracker. Suggest focused improvements and new features. Improve documentation, translations, accessibility, or test coverage. Submit pull requests after reviewing the contribution guide. Please report security issues privately according to the security policy.