Slider and Carousel Block – Responsive, Accessible
Slider Block (part of the BlaBlaBlocks suite) is a WordPress plugin that lets you build responsive sliders, carousels, and Gutenberg sliders directly inside the Block Editor no shortcodes, no page builders, and no coding required. 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. Why Choose BlaBlaBlocks Slider Block? Accessible by Design – WCAG-compliant with ARIA roles, keyboard navigation, and screen-reader support. Responsive and Fluid – Automatically adapts to mobile, tablet, and desktop breakpoints. Gutenberg-Native Experience – Seamlessly integrated into the Block Editor. Query Loop Support – Turn WordPress posts into a dynamic carousel using the native Query Loop block. Template Library – Insert pre-built slider layouts: hero sections, testimonials, image carousels, and more. Server-Side Rendering – Ensures your editor preview always matches the frontend output. Lightweight and Fast – Minimal scripts, optimized rendering, and no frontend bloat. Whether you’re creating a full-width hero slider, a small testimonial carousel, or a product showcase, the Slider Block makes it simple, accessible, and fast. Key Features Accessible Sliders Every slider is fully accessible out of the box: Keyboard navigation for next/previous slides. ARIA labels and roles for assistive technologies. Screen reader-friendly transitions. Optional focus management for improved UX. Responsive by Default Your slider automatically scales to different viewports. Adjust slides per view, spacing, and breakpoints — perfect for mobile-first sites. Gutenberg Integration Built entirely for the WordPress Block Editor, this plugin uses the latest React-based block architecture. You can: Drag and drop slides directly in the editor. Use nested blocks for advanced layouts. Adjust all options in the right sidebar no shortcodes or widgets. Posts Carousel with Query Loop Build dynamic carousels from your latest or filtered posts using the native Query Loop block. You can: Insert the Posts Carousel variation directly from the Slider block. Use WordPress query controls to choose post type, order, and posts per page. Customize the post template with core blocks like featured image, title, excerpt, date, and read more. Pre-Made Templates Skip the setup with built-in templates for: Hero sliders Image carousels Testimonials Content showcases Each template is fully customizable just insert, edit, and publish. Advanced Configuration Fine-tune every detail: Slides per view Pagination and navigation controls Autoplay and speed settings Transition effects Direction (horizontal/vertical) Lightweight and Optimized 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. How to Create a Slider in Gutenberg Open the Block Editor (Gutenberg). Search for “Slider” to add the block. Insert the BlaBlaBlocks Slider Block. Add slides you can use images, headings, buttons, or any block inside each slide. Customize slider options in the sidebar panel (autoplay, speed, arrows, pagination). Save and preview your responsive slider is ready! Check documentation more details. How to Use Templates Library Click the “Template Library” button inside the slider block toolbar. Choose from multiple designs Hero, Testimonial, Carousel, Gallery. Customize slide content, layout, and animations instantly. Check documentation more details. Common Use Cases Homepage hero sliders with call-to-action buttons. Testimonial carousels on service pages. Logo sliders for brand showcases. Product image carousels in WooCommerce product pages. Featured content sliders on blogs or portfolios. Technical Features Built with React + WordPress Block API. Uses Swiper.js. Supports dynamic slide content. Server-side rendering ensures perfect frontend/editor consistency. Fully compatible with WordPress 6.6+ and PHP 7.4+. SEO and Performance Slider Block follows best practices for: Semantic HTML output. Accessible ARIA structure for screen readers. Optimized DOM footprint for Core Web Vitals compliance. Troubleshooting The slider doesn’t autoplay: Check the block settings and ensure “Autoplay” is toggled on. Autoplay is disabled by default for accessibility reasons. Keyboard navigation not working: If multiple sliders are on a single page, ensure you’re using version 1.1.0 or later (this fixes navigation conflicts). Layout issues on mobile: Try adjusting the “Slides per view” setting or resetting custom CSS if applied by your theme. Integrations Works with WordPress Core Blocks (Image, Heading, Button, Group). Compatible with WooCommerce product blocks. Can be combined with block patterns and reusable blocks for advanced layouts. Open Source and Contributions The BlaBlaBlocks Slider Block is 100% open source. You’re welcome to use, modify, or contribute improvements. Source Code: https://github.com/lubusIN/blablablocks-slider-block Report Issues: https://github.com/lubusIN/blablablocks-slider-block/issues
Top keywords
- block23×3.09%
- slider18×2.42%
- slider block9×1.21%
- sliders9×1.21%
- wordpress8×1.08%
- editor7×0.94%
- autoplay6×0.81%
- carousels6×0.81%
- navigation6×0.81%
- posts6×0.81%
- slides6×0.81%
- accessible5×0.67%
Media Slider for Photos Images Videos
Create a responsive image slider to display photos, picture galleries, and play video slides on your WordPress website. Media Slider Description for Photos and Videos Media Slider helps you create beautiful slideshows for your site. You can showcase photo galleries, list portfolio items, or embed videos. This easy-to-use plugin organizes all media files in one dashboard. View Free Demo: Media Slider | View Pro Demo: Media Slider Pro Learn More About Pro: Media Slider Pro | Purchase Pro: Buy Media Slider Pro You can upload photos from your library. The plugin also supports YouTube videos. Add as many slides as you want. You can display the slider anywhere using a simple shortcode. Each slide allows custom titles, text descriptions, and links. Key Uses: * Make photo slideshows with smooth fade effects. * Display YouTube videos on your site. * Build mixed galleries with images and videos. * Show multiple slides at once in a carousel. * Enable responsive thumbnail navigation. * Select full-width or boxed layouts. Free Version Key Features: * Fully responsive layout fits any screen size. * Transition styles like slide and fade. * Classic previous and next arrow buttons. * Option to display navigation thumbnails below. * Custom width and height control fields. * Autoplay slide mode with speed settings. * Full-screen viewing button. * Simple sidebar widget support. * Compatible with standard WordPress themes. * No coding experience needed. Premium Version Features: * 4+ unique styles for navigation arrows. * 3+ navigation thumbnail layouts. * 9+ caption positions for texts. * Display image, YouTube and Vimeo videos on your site. * Advanced controls to autoplay, loop, or mute videos. * Custom breakpoint options for different screens. * 3+ image fitting and scaling methods. * Force size settings to lock slider dimensions. * Fast priority email support. Free vs Pro Version Comparison: Free Version: * Create unlimited slideshow panels. * Upload photos and insert video links. * Use basic arrows or thumbnails. * Apply classic fade slide transitions. * Mobile friendly and responsive. * Embed via widget. * Embed via shortcode. Pro Version: * Insert YouTube and Vimeo videos. * Multiple navigation designs. * Richer thumbnail templates. * Custom position options for captions. * Video autoplay and mute tools. * Advanced mobile breakpoints. * Smart image crop layouts. * Dedicated developer support. Quick Setup Guide: 1. Open the Media Slider menu in your dashboard. 2. Click “Add Media Slider” to create a new post. 3. Select your photos or add video links. 4. Save settings and publish the post. 5. Copy the shortcode and paste it on any page. Getting Support: If you have questions, please visit our support forum. We reply to all support tickets within 24 to 48 hours. Installing the Photo and Video Slider Upload the plugin folder to the /wp-content/plugins/ directory. Or use the WordPress admin installer. Activate the plugin on the plugins page. Click “Media Slider” in the sidebar menu. Click “Add Media Slider” to create a post. Add photos and adjust settings. Publish the post to generate the shortcode. Paste the shortcode into any page or post. Photo and Video Slider FAQ How do I create a new photo and video slider? Go to the Media Slider menu. Click “Add Media Slider” in your dashboard. Upload photos or add video URLs. Set options and publish. Paste the shortcode on your page. Can I mix photos and videos in the same image slider? Yes. Media Slider supports mixed layouts. You can combine library photos with YouTube and Vimeo links in one slider. Is this photo and video slider mobile responsive? Yes. The layouts adjust automatically. Your slideshows look clean on desktops, tablets, and phones. How do I embed the slider shortcode on my page? Copy the shortcode from the slider editor. Paste it into the editor of any page, post, or widget. Can I change navigation arrows in the image slider? The free version has standard arrows. The premium version includes 4+ different arrow designs. What video slide platforms does the slider support? The plugin supports YouTube and Vimeo videos. Paste the link into the slide URL field. How many photo and video sliders can I build? You can create as many sliders as you want. Each slider can have unlimited slides. Can I add descriptions to photos in the slider? Yes. Every slide supports a title, description, and link. The Pro version offers 9+ text alignment layouts. Does the shortcode work with Elementor and other page builders? Yes. The shortcode works in Elementor, Beaver Builder, Divi, and other site builders. How do I enable autoplay for photos and video slides? Check the autoplay settings in the options panel. Set the duration timer between slides. Can I show thumbnails below the photo slider? Yes. Turn on the thumbnails option in your settings. This navigation works in both versions. What is the difference between the free and premium image slider? The free version has core features. The Pro version adds premium navigation arrows, advanced thumbnails, captions, video controls, and support.