Name: Slider and Carousel Block – Responsive, Accessible
Availability: InStock
Rating: 5 (1 reviews)
Author: lubus

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

Slider and Carousel Block – Responsive, Accessible

<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>Query Loop Support</strong> – Turn WordPress posts into a dynamic carousel using the native Query Loop block.</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>Posts Carousel with Query Loop</strong></h4>
<p>Build dynamic carousels from your latest or filtered posts using the native <strong>Query Loop</strong> block. You can:</p>
<ul>
<li>Insert the <strong>Posts Carousel</strong> variation directly from the Slider block.</li>
<li>Use WordPress query controls to choose post type, order, and posts per page.</li>
<li>Customize the post template with core blocks like featured image, title, excerpt, date, and read more.</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>


Alternative Plugins for

Discover the Lists with Slider and Carousel Block – Responsive, Accessible