前言介紹
- 這款 WordPress 外掛「Slider and Carousel Block – Responsive, Accessible」是 2025-07-26 上架。
- 目前有 100 個安裝啟用數。
- 上一次更新是 2025-12-02，距離現在已有 86 天。
- 外掛最低要求 WordPress 6.6 以上版本才可以安裝。
- 外掛要求網站主機運作至少需要 PHP 版本 7.4 以上。
- 尚未有人給過這款外掛評分。
- 還沒有人在論壇上發問，可能目前使用數不多，還沒有什麼大問題。
外掛協作開發者
lubus | ajitbohra | punitv342 |
外掛標籤
slider | carousel | image slider | slider block | Gutenberg block |
內容簡介
以下是這篇文章的總結：
BlaBlaBlocks Slider Block是一款專為區塊編輯器製作的WordPress外掛，讓您可以輕鬆建立響應式滑塊。
以下是問題與答案的組合：
1. BlaBlaBlocks Slider Block有什麼特別之處？
- 可存取性強 – 符合WCAG標準，具有ARIA角色，鍵盤導覽和螢幕閱讀器支援。
- 響應式 – 自動調整幻燈片和版面，適應任何螢幕尺寸。
- 準備好使用的範本 – 附帶多個預建版面，您可以插入並自訂。
- 編輯器兼容性 – 完全整合了區塊編輯器的使用者介面和伺服器端呈現管線。
2. BlaBlaBlocks Slider Block是開源且免費嗎？
- 是的。BlaBlaBlocks Slider Block是開源的。不僅可以免費使用，您也歡迎參與合作並貢獻於其開發。
請參考以下連結了解更多細節：
<ul>
<li>Source Code: <a href="https://github.com/lubusIN/blablablocks-slider-block">https://github.com/lubusIN/blablablocks-slider-block</a></li>
<li>Report Issues: <a href="https://github.com/lubusIN/blablablocks-slider-block/issues">https://github.com/lubusIN/blablablocks-slider-block/issues</a></li>
</ul>
原文外掛簡介
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.
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.
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
各版本下載點
- 方法一：點下方版本號的連結下載 ZIP 檔案後，登入網站後台左側選單「外掛」的「安裝外掛」，然後選擇上方的「上傳外掛」，把下載回去的 ZIP 外掛打包檔案上傳上去安裝與啟用。
- 方法二：透過「安裝外掛」的畫面右方搜尋功能，搜尋外掛名稱「Slider and Carousel Block – Responsive, Accessible」來進行安裝。
（建議使用方法二，確保安裝的版本符合當前運作的 WordPress 環境。
延伸相關外掛（你可能也想知道）
Qi Blocks 》Qi Blocks 是由屢獲殊榮設計團隊之一的 Qode Interactive 開發的最大的 Gutenberg 區塊集合。基本版本的外掛帶有 48 個精心設計的自定義區塊，擁有前所未見的...。
Map Block for Google Maps 》你正在使用 Gutenberg 編輯器，需要一個地圖嗎？這款地圖區塊插件就是為你而設！安裝、啟用、加入內容，這些就是全部步驟！沒有繁瑣的設置，功能清晰易用 - ...。
Advanced Accordion Gutenberg Block – Create Beautiful FAQs, Content Accordions & Interactive Tabs 》Advanced Accordion Gutenberg Block 是一個自定義的原生 Gutenberg 區塊，允許您在網站文章和頁面上使用 Gutenberg 編輯器輕鬆構建常見問題解答部分或手風琴...。
Justified Gallery 》這個簡單的外掛將Wordpress圖庫提升到更高的層級，加入了漂亮的合理化圖像網格和漂亮的燈箱。, 只需安裝和啟用外掛即可，就這麼簡單。, 像以前一樣創建圖庫，...。
Magic Content & CTA Box Builder – Advanced Gutenberg Blocks for Flexible Page Sections, Headers, Buttons, Shape Dividers, and Layout Options 》魔法內容方塊-頁面內容建構器Gutenberg區塊外掛程式, 我們為 WordPress 內容打造了美麗的頁面區塊，以幫助您快速建立一個一直渴望的網站。, 首頁 | 展示 | 說...。
Easy Accordion Block 》Easy Accordion Gutenberg Block 是使用 Gutenberg 原生元件開發的自訂 Gutenberg 區塊，可以輕鬆地創建手風琴或常見問題解答區。您不需要具備任何程式編輯知...。
Image Hover Effects Block 》使用這個 WordPress 插件「Image Hover Effects Block for Gutenberg」，您可以以簡單的方式添加 40 多種圖像懸停效果，包括標題和描述。, 功能, , 易於自定...。
bSlider – Create Responsive Image, Post, Product, and Video Sliders 》B Slider 是一個受 Gutenburg 區塊影像和文字幻燈片的 WordPress 外掛。使用此外掛，您可以非常輕鬆地快速建立您的幻燈片。B Slider 是最好的選擇，無論是對...。
Carousel Block – Responsive Image and Content Carousel 》B Carousel 是一款輕量級、功能完備的 WordPress 輪播建構外掛，可用於製作專業的客戶標誌或任何圖像的幻燈片或輪播。, 範例展示, 功能特色, , 完全可定制：...。
Lottie Player – Add Interactive Lottie Animations with Block Support 》Lottie Player 是 WordPress 的 Gutenberg 區塊編輯器中一個非常有用的區塊外掛程式，其中包含了許多功能，可以幫助您將 LottieFiles 動畫嵌入到 WordPress ...。
Button Block – Design Stylish, Interactive, and Multi-Functional Buttons 》獲取多功能按鈕。Button Block 外掛提供許多方便實用和樣式選項，讓您能在幾個點擊內，建立具有響應性、互動性和時尚性的按鈕，讓您享受創建樂趣。, 示範, 特...。
Latest Post Shortcode 》「最新文章簡碼」外掛可以幫助您在頁面或側邊欄中顯示文章或頁面的列表或網格，無需編寫或了解 PHP。您可以在一個頁面中嵌入多個簡碼，每個簡碼都有不同的配...。
Social Feed Block for Instagram 》Social Feed 提供簡單的嵌入功能，讓您能在 WordPress 網站上將 Instagram 帖子作為畫廊展示。您只需提供您的 Instagram 存取權杖，就可以開始使用了。, 演示...。
PDF Embed Block – Embed PDF Files in Posts or Pages 》透過 Gutenberg 區塊編輯器嵌入 PDF 非常不容易，使用這個外掛就能輕易地在所有瀏覽器中將 PDF 檔案嵌入區塊編輯器。此外，這個外掛是建立在 Adobe PDF Viewe...。
Parallax Section Block – Add Parallax Scrolling Effects to Sections. 》視差效果是一種現代網頁設計技巧，其中背景元素滾動比前景內容慢。視差效果可用於登陸頁面、長文內容、銷售頁面或企業網站的主頁。這是一種突出長頁面不同部...。