Build responsive, accessible sliders or carousel in the Block Editor fast templates, no code needed.

lubus

Ajit Bohra

Punit Verma

Tabs Block – Responsive Gutenberg Tabs for Block Editor

Tabs Block for Gutenberg – create responsive, accessible tabs using the WordPress Interactivity API.

Nagesh Pai

Rich Text Formats – Animated Highlight, Marker, Tooltip

Add tooltips, highlights & interactivity to text in the Gutenberg editor. Enhance readability with rich text formats.

<p><strong>Slider Block</strong> (part of the <strong>BlaBlaBlocks</strong> suite) is a WordPress plugin that lets you build <strong>responsive sliders</strong>, <strong>carousels</strong>, and <strong>Gutenberg sliders</strong> directly inside the Block Editor no shortcodes, no page builders, and no coding required.</p>
<p>This block gives you an intuitive, visual way to add sliders to your pages, posts, or full site editing templates. Choose from ready-to-use templates or start from scratch, fully customize slide layout, autoplay, and navigation all within the native WordPress interface.</p>
<h3>Why Choose BlaBlaBlocks Slider Block?</h3>
<ul>
<li><strong>Accessible by Design</strong> – WCAG-compliant with ARIA roles, keyboard navigation, and screen-reader support.  </li>
<li><strong>Responsive and Fluid</strong> – Automatically adapts to mobile, tablet, and desktop breakpoints.  </li>
<li><strong>Gutenberg-Native Experience</strong> – Seamlessly integrated into the Block Editor.  </li>
<li><strong>Template Library</strong> – Insert pre-built slider layouts: hero sections, testimonials, image carousels, and more.  </li>
<li><strong>Server-Side Rendering</strong> – Ensures your editor preview always matches the frontend output.  </li>
<li><strong>Lightweight and Fast</strong> – Minimal scripts, optimized rendering, and no frontend bloat.  </li>
</ul>
<p>Whether you’re creating a full-width hero slider, a small testimonial carousel, or a product showcase, the <strong>Slider Block</strong> makes it simple, accessible, and fast.</p>
<h3>Key Features</h3>
<h4><strong>Accessible Sliders</strong></h4>
<p>Every slider is fully accessible out of the box:</p>
<ul>
<li>Keyboard navigation for next/previous slides.</li>
<li>ARIA labels and roles for assistive technologies.</li>
<li>Screen reader-friendly transitions.</li>
<li>Optional focus management for improved UX.</li>
</ul>
<h4><strong>Responsive by Default</strong></h4>
<p>Your slider automatically scales to different viewports.<br />
Adjust slides per view, spacing, and breakpoints — perfect for mobile-first sites.</p>
<h4><strong>Gutenberg Integration</strong></h4>
<p>Built entirely for the <strong>WordPress Block Editor</strong>, this plugin uses the latest React-based block architecture. You can:</p>
<ul>
<li>Drag and drop slides directly in the editor.</li>
<li>Use nested blocks for advanced layouts.</li>
<li>Adjust all options in the right sidebar no shortcodes or widgets.</li>
</ul>
<h4><strong>Pre-Made Templates</strong></h4>
<p>Skip the setup with built-in templates for:</p>
<ul>
<li>Hero sliders</li>
<li>Image carousels</li>
<li>Testimonials</li>
<li>Content showcases</li>
</ul>
<p>Each template is fully customizable just insert, edit, and publish.</p>
<h4><strong>Advanced Configuration</strong></h4>
<p>Fine-tune every detail:</p>
<ul>
<li>Slides per view  </li>
<li>Pagination and navigation controls  </li>
<li>Autoplay and speed settings  </li>
<li>Transition effects  </li>
<li>Direction (horizontal/vertical)  </li>
</ul>
<h4><strong>Lightweight and Optimized</strong></h4>
<p>Slider Block uses minimal JavaScript and CSS only loading assets when the block appears on the page. This ensures fast load times and top performance scores.</p>
<h3>How to Create a Slider in Gutenberg</h3>
<ol>
<li>Open the Block Editor (Gutenberg).  </li>
<li>Search for “Slider” to add the block.  </li>
<li>Insert the <strong>BlaBlaBlocks Slider Block</strong>.  </li>
<li>Add slides you can use images, headings, buttons, or any block inside each slide.  </li>
<li>Customize slider options in the sidebar panel (autoplay, speed, arrows, pagination).  </li>
<li>Save and preview your responsive slider is ready!</li>
</ol>
<p>Check <a href="https://github.com/lubusIN/blablablocks-slider-block/wiki" rel="nofollow ugc">documentation</a> more details.</p>
<h3>How to Use Templates Library</h3>
<ol>
<li>Click the <strong>“Template Library”</strong> button inside the slider block toolbar.  </li>
<li>Choose from multiple designs Hero, Testimonial, Carousel, Gallery.  </li>
<li>Customize slide content, layout, and animations instantly.</li>
</ol>
<p>Check <a href="https://github.com/lubusIN/blablablocks-slider-block/wiki" rel="nofollow ugc">documentation</a> more details.</p>
<h3>Common Use Cases</h3>
<ul>
<li>Homepage hero sliders with call-to-action buttons.  </li>
<li>Testimonial carousels on service pages.  </li>
<li>Logo sliders for brand showcases.  </li>
<li>Product image carousels in WooCommerce product pages.  </li>
<li>Featured content sliders on blogs or portfolios.</li>
</ul>
<h3>Technical Features</h3>
<ul>
<li>Built with React + WordPress Block API.  </li>
<li>Uses Swiper.js.  </li>
<li>Supports dynamic slide content.  </li>
<li>Server-side rendering ensures perfect frontend/editor consistency.  </li>
<li>Fully compatible with WordPress 6.6+ and PHP 7.4+.</li>
</ul>
<h3>SEO and Performance</h3>
<p>Slider Block follows best practices for:</p>
<ul>
<li><strong>Semantic HTML</strong> output.  </li>
<li><strong>Accessible ARIA structure</strong> for screen readers.  </li>
<li><strong>Optimized DOM footprint</strong> for Core Web Vitals compliance.</li>
</ul>
<h3>Troubleshooting</h3>
<p><strong>The slider doesn’t autoplay:</strong><br />
Check the block settings and ensure “Autoplay” is toggled on. Autoplay is disabled by default for accessibility reasons.</p>
<p><strong>Keyboard navigation not working:</strong><br />
If multiple sliders are on a single page, ensure you’re using version 1.1.0 or later (this fixes navigation conflicts).</p>
<p><strong>Layout issues on mobile:</strong><br />
Try adjusting the “Slides per view” setting or resetting custom CSS if applied by your theme.</p>
<h3>Integrations</h3>
<ul>
<li>Works with <strong>WordPress Core Blocks</strong> (Image, Heading, Button, Group).  </li>
<li>Compatible with <strong>WooCommerce</strong> product blocks.  </li>
<li>Can be combined with <strong>block patterns</strong> and <strong>reusable blocks</strong> for advanced layouts.</li>
</ul>
<h3>Open Source and Contributions</h3>
<p>The BlaBlaBlocks Slider Block is 100% open source.<br />
You’re welcome to use, modify, or contribute improvements.</p>
<ul>
<li>
<p><strong>Source Code:</strong><br />
<a href="https://github.com/lubusIN/blablablocks-slider-block" rel="nofollow ugc">https://github.com/lubusIN/blablablocks-slider-block</a></p>
</li>
<li>
<p><strong>Report Issues:</strong><br />
<a href="https://github.com/lubusIN/blablablocks-slider-block/issues" rel="nofollow ugc">https://github.com/lubusIN/blablablocks-slider-block/issues</a></p>
</li>
</ul>


Alternatives to Slider and Carousel Block – Responsive, Accessible

Top alternatives