Carousel Slider Block for Gutenberg vs Shortcodes Ultimate – Content Elements

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.

Building new pages with Gutenberg? Explore VovaBlocks, a focused collection of native marketing and content blocks from the creator of Shortcodes Ultimate. View VovaBlocks → About Shortcodes Ultimate Shortcodes Ultimate is a WordPress shortcode plugin for adding tabs, accordions, buttons, FAQs, sliders, carousels, lightboxes, columns, boxes and other reusable content elements without coding. It is ideal for site owners who want richer content layouts and practical UI elements without switching to a full page builder. Use Shortcodes Ultimate in the Block Editor, Classic Editor, widgets and template files. Generate shortcodes visually, preview the result before inserting it, and reuse the same elements across posts, pages and existing shortcode-based content. Trusted by hundreds of thousands of WordPress sites, Shortcodes Ultimate helps you replace multiple single-purpose UI plugins with one maintained toolkit. Explore live examples What you can build With Shortcodes Ultimate, you can quickly add common WordPress content elements such as: Accordions and FAQ sections Responsive tabs CTA buttons and download buttons Boxes, notes and callouts Columns and layout helpers Sliders and carousels Lightboxes for images and custom content Post lists and dynamic content blocks Spoilers, toggles and expandable content Media embeds and visual content blocks Instead of installing a separate plugin for every small content element, Shortcodes Ultimate gives you one maintained toolkit for everyday WordPress content tasks. Works with modern and classic WordPress workflows Shortcodes Ultimate works with the Block Editor, Classic Editor, widgets and template files. You can insert shortcodes manually, use WordPress shortcode blocks or use the built-in shortcode generator to configure elements visually. This makes the plugin useful for: Site owners who want to improve content without coding Bloggers and affiliate publishers who need reusable CTA and content blocks Agencies and freelancers maintaining multiple WordPress sites Developers who want shortcode-friendly output in templates Existing sites with older content that already uses shortcodes Why use Shortcodes Ultimate? 50+ ready-to-use WordPress shortcodes Visual shortcode generator Live preview Works with the Block Editor and Classic Editor Shortcodes can be used in posts, pages, widgets and template files Responsive elements that work with your theme Built-in Custom CSS editor Developer-friendly hooks and documentation Free version available on WordPress.org Pro version available for advanced shortcodes, extra styles and premium support Why shortcodes still matter in WordPress The WordPress Block Editor is great for visual content editing, but shortcodes are still useful when you need portable, reusable content elements that work across different parts of a WordPress site. Shortcodes are especially helpful when you want to: Reuse the same content element in many posts or pages Add dynamic content inside widgets or templates Maintain older WordPress sites that already use shortcodes Work across Classic Editor and Block Editor workflows Add content elements without switching to a full page builder Keep common UI elements available through a simple text-based syntax Shortcodes Ultimate is designed for these practical workflows. It gives you a large collection of ready-made shortcodes and a visual generator, so you do not need to write shortcode syntax manually unless you want to. Free and Pro The free version of Shortcodes Ultimate includes a large collection of useful shortcodes for everyday WordPress content tasks. Shortcodes Ultimate Pro adds advanced shortcodes, additional styles, Content Slider, Pricing Table, Testimonials, Shortcode Creator, Elementor support and premium support. Compare Free and Pro Useful links Documentation Live Examples Pro features Support