前言介紹
- 這款 WordPress 外掛「Carousel Slider Block for Gutenberg」是 2019-02-02 上架。
- 目前有 30000 個安裝啟用數。
- 上一次更新是 2025-05-01，距離現在已有 3 天。
- 外掛最低要求 WordPress 6.1 以上版本才可以安裝。
- 外掛要求網站主機運作至少需要 PHP 版本 7.0 以上。
- 有 45 人給過評分。
- 論壇上目前有 2 個提問，問題解答率 0%
外掛協作開發者
外掛標籤
Slide | swiper | carousel | gutenberg |
內容簡介
這款外掛是一個響應式輪播編輯器，適用於 Gutenberg 編輯器。
功能
可以添加無限多個輪播
每個輪播都可以添加任意區塊
在編輯器中可以即時預覽輪播效果
支援響應式和觸摸屏幕操作
設置
每頁展示幾個輪播
每次滾動幾個輪播
輪播速度
輪播間距
上一頁/下一頁箭頭
圓點導航
無限循環滾動
自動播放
響應式設置：根據螢幕大小設置展示和滾動的輪播數量
支援 RTL（從右到左編寫的語言）
系統需求
建議使用 PHP 5.6+ 與 WordPress 5.8+，啟用 Gutenberg 編輯器。
使用教程
從「設計」類別中選擇「Carousel Slider」區塊。點擊輪播結尾的「+」按鈕以添加輪播。在輪播中可以添加任何區塊。使用水平滾動條在編輯器中即時預覽輪播效果。
你可以使用工具列中的左右箭頭按鈕來重新排列輪播的順序。
要移除幻燈片，選擇該幻燈片並點擊它上方的三個點。點擊「刪除」選項以移除該幻燈片。
點擊包含所有輪播的 Carousel Block 以顯示輪播設置。
原文外掛簡介
A responsive carousel slider for the Gutenberg editor that supports adding any blocks to slides.
🚀 Carousel Slider Version 2 is here! Now powered by Swiper.js for a smoother, faster, and more modern experience. See below for update instructions.
Features
Add unlimited slides
Add any blocks to the slides
Preview the carousel in the editor
Responsive and touch enabled
Settings
Slides per view
Slides to scroll at a time
Slide speed
Slide padding
Prev/next arrows
Dots navigation
Infinite loop sliding
Autoplay
Responsive settings: slides to show and scroll at given screen size
RTL
Requirements
PHP 5.6+ is recommended, WordPress 5.8+, with Gutenberg active.
Documentation
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.
Carousel Slider Version 2
Carousel Slider v2 now uses Swiper.js instead of Slick. It’s more modern, better supported, and works smoother across devices.
Upgrading from Legacy Carousel
Existing legacy (v1) Carousel Slider blocks will still work. You can re-enable them in the admin settings under Settings → Carousel Slider.
To upgrade, click on a legacy Carousel Slider block in the editor. In the block’s toolbar (the floating bar that appears above the block), click the block icon (first button on the left). From the dropdown, choose “Transform to Carousel Slider v2”. Your existing carousel settings will be preserved, but note that the design and HTML markup will change.
Legacy styles will not apply to v2. You may need to adjust custom CSS.
Optional: Re-enable Legacy Blocks
You can show/hide legacy blocks from the block inserter and disable v2 upgrade notices via Settings → Carousel Slider in the admin menu.
Note: Legacy blocks will continue to function, but are no longer supported. It is highly recommended to upgrade to v2 for continued improvements and compatibility.
Customizing v2 Styles
Carousel Slider v2 supports custom styling via CSS variables:
Navigation
--wp--custom--carousel-block--navigation-size: Arrow size
--wp--custom--carousel-block--navigation-sides-offset: Distance from edge
--wp--custom--carousel-block--navigation-color: Arrow color
--wp--custom--carousel-block--navigation-fullwidth-color: Arrow color when the carousel is full width
Pagination (dots)
--wp--custom--carousel-block--pagination-top: Top offset for pagination
--wp--custom--carousel-block--pagination-bullet-size: Dot size
--wp--custom--carousel-block--pagination-bullet-color: Dot color (inactive)
--wp--custom--carousel-block--pagination-bullet-active-color: Dot color (active)
--wp--custom--carousel-block--pagination-bullet-opacity: Dot opacity (inactive)
--wp--custom--carousel-block--pagination-bullet-active-opacity: Dot opacity (active)
--wp--custom--carousel-block--pagination-bullet-horizontal-gap: Horizontal spacing between dots
--wp--custom--carousel-block--pagination-bullet-vertical-gap: Vertical spacing between dots
Block spacing
--wp--custom--carousel-block--image-margin-top: Top spacing for image blocks
--wp--custom--carousel-block--image-margin-bottom: Bottom spacing for image blocks
--wp--custom--carousel-block--cover-margin-top: Top spacing for cover blocks
--wp--custom--carousel-block--cover-margin-bottom: Bottom spacing for cover blocks
Note: The CSS variables use the WordPress --wp--custom-- prefix, allowing you to override them in your theme’s theme.json for site-wide styling.
各版本下載點
- 方法一：點下方版本號的連結下載 ZIP 檔案後，登入網站後台左側選單「外掛」的「安裝外掛」，然後選擇上方的「上傳外掛」，把下載回去的 ZIP 外掛打包檔案上傳上去安裝與啟用。
- 方法二：透過「安裝外掛」的畫面右方搜尋功能，搜尋外掛名稱「Carousel Slider Block for Gutenberg」來進行安裝。
（建議使用方法二，確保安裝的版本符合當前運作的 WordPress 環境。
1.0.0 | 1.0.1 | 1.0.2 | 1.0.3 | 1.0.4 | 1.0.5 | 1.0.6 | 1.0.7 | 1.0.8 | 2.0.0 | 2.0.1 | trunk | 1.0.10 | 1.0.11 | 1.0.12 | 1.0.13 | 1.0.14 | 1.0.15 | 1.0.16 |
延伸相關外掛（你可能也想知道）
Gum Elementor Addon 》這個外掛是針對 Elementor 網站建構器的附加功能，這代表你需要先安裝 Elementor 外掛並啟用它。, 小工具, 這個外掛提供內建小工具，幫助建立更具吸引力的設...。
Meteor Slides 》Meteor Slides 讓您輕鬆製作幻燈片並使用 shortcode、小工具或模板標籤發佈它們。 幻燈片支援響應式和流體佈景主題，可適應任何設備並支援觸控。 使用超過20...。
Animations for Blocks 》輕量級插件，可以為塊狀編輯器塊添加額外的檢查器控件，使得在滾動過程中，一旦塊可見就可以對其進行動畫。這些控件可用於選擇動畫類型（淡入淡出，翻轉，滑...。
TweetScroll Widget 》TweetScroll 是一個使用新的 oAuth API 1.1 顯示您的 Twitter 帳戶最新推文的小工具。, 此簡單的小工具可用於任何網站/部落格。, Twitter 最近關閉了他們的 A...。
Pathomation 》全片掃描成像技術可以捕捉微小物體的高分辨率圖像。這導致產生的數據包很大，難以操縱和轉換。使用 Pathomation 技術，您可以輕鬆地在需要的時候嵌入這些內容...。
EasyRotator for WordPress – Slider Plugin 》, EasyRotator for WordPress 可在數秒內為您的 WordPress 網站創建美麗且響應式的照片旋轉器和幻燈片。將旋轉器添加到文章和頁面中，或將旋轉器挖掘小工具添...。
Webyx 》bpage., 這個想法的誕生是為了在 WordPress 中使用 Gutenberg 編輯器模塊化方法創建驚人的全屏全頁網站。, 我們想簡化和加速創建過程，實時啟用自定義功能，...。
Slider Ultimate 》Slider Demo Website, 包括 Gutenberg 區塊，可用於顯示您的投影片！, , Ultimate Slider 是一個易於使用的響應式投影片外掛程式，讓您可以使用簡單的投影片...。
Smartslider 》這個外掛可以讓你在文章中加入一些美觀的效果。, 使用方法, 切換內容, Advanced Custom Fields: Number Slider 》這是為 WordPress 外掛 Advanced Custom Fields 設計的附加元件，允許您新增數字滑桿型欄位。, 此外掛使用 James Smith 所開發的 Simpler Slider jQuery 程式...。
Webyx FE 》• Webyx for Elementor is a WordPress plugin that simplifies the process of creating full-page fullscreen scrollable websites., • The free version e...。
SlideOnline 》這是一個非常簡單的外掛，可以在任何由 WordPress 驅動的網誌中嵌入使用 SlideOnline.com 的 PowerPoint 簡報。, 使用SlideOnline.com，您可以輕鬆地在 WordP...。
Animated Headline Elementor 》透過 Elementor 標題元素增強您的頁面建置體驗。使用我們易於使用的元素，讓您的下一個 WordPress 頁面設計比以往更輕鬆、更漂亮。, 完全自訂, 每個元素都有...。
WP flash img show 》英文, wp flash img show 是一個用於 WordPress 的 FLASH 圖片幻燈片外掛。您可以展示您的文章、照片、商品、產品和其他廣告或介紹。, 可設置選項包括：圓邊...。
Events Manager – Events / Locations Slider 》, 需要已安裝且啟用 Events Manager（免費外掛）。 , , 此外掛可讓您為即將到來的 Events Manager 活動和/或地點創建滑動軸（輪播或淡入淡出）。它就像 EM 的...。