Title: Splide Carousel Block Author: David Jensen Published: 2022 年 10 月 14 日 Last modified: 2026 年 1 月 17 日 --- 搜尋外掛 ![](https://ps.w.org/splide-carousel/assets/banner-772x250.jpg?rev=2798866) ![](https://ps.w.org/splide-carousel/assets/icon-256x256.png?rev=2798866) # Splide Carousel Block 由 [David Jensen](https://profiles.wordpress.org/dkjensen/) 開發 [下載](https://downloads.wordpress.org/plugin/splide-carousel.1.7.1.zip) [即時預覽](https://tw.wordpress.org/plugins/splide-carousel/?preview=1) * [詳細資料](https://tw.wordpress.org/plugins/splide-carousel/#description) * [使用者評論](https://tw.wordpress.org/plugins/splide-carousel/#reviews) * [安裝方式](https://tw.wordpress.org/plugins/splide-carousel/#installation) * [開發資訊](https://tw.wordpress.org/plugins/splide-carousel/#developers) [技術支援](https://wordpress.org/support/plugin/splide-carousel/) ## 外掛說明 The Splide Carousel block introduces the capability to create carousels/sliders within the block editor. Each carousel may contain an infinite number of slides, with each slides containing their own inner blocks. Use the Splide Carousel block to create image carousels, testimonial rotators, and more in Gutenberg! [View Demo](https://splide-demo.cloudcatch.io/) ### Options * Arrows Navigation * Dots Pagination * Autoplay * Slide and Fade Transitions * Infinite Loop * API to control the carousel using JavaScript * Fixed Slide Width / Height * Variable Slide Width / Height * Number of Slides Per Page * Slide Spacing * Video Support * Auto Scroll * Hash Navigation * Lazyload * FSE (Full Site Editing) Compatible * Fully Accessible * RTL Support * Responsive * No Google Lighthouse Issues * Lightweight * […and more!](https://splidejs.com/guides/options/#options) ### Attribution The Splide Carousel block uses the [Splide](https://splidejs.com/) library. ## 螢幕擷圖 * [[ * Block editor view * [[ * Block editor view * [[ * Front end view * [[ * Front end view * [[ * Block controls ## 適用於區塊編輯器 這個外掛提供 2 個可供 Gutenberg/區塊編輯器使用的區塊。 * Splide Carousel * Splide Carousel Item ## 安裝方式 1. Upload the plugin files to the `/wp-content/plugins/splide-carousel` directory, or install the plugin through the WordPress plugins screen directly. 2. Activate the plugin through the ‘Plugins’ screen in WordPress ## 常見問題集 ### Are there additional options I can use? Yes, under the Splide Carousel block Advanced Settings, you can provide a valid JSON string containing additional options [located here](https://splidejs.com/guides/options/). e.g.: `{"focus":"center","trimSpace":false}` ### Can I set default carousel options globally? Yes, we need to listen to a JavaScript event that is fired when the carousel is ready, and then add the defaults. ``` document.addEventListener( 'splideReady', function( e ) { e.detail.defaults = { arrowPath: 'M30.2 19.4L11 .2c-.3-.3-.9-.3-1.2 0-.3.3-.3.8 0 1.2L28.4 20 9.8 38.6c-.3.3-.3.9 0 1.2.3.3.9.3 1.2 0l19.2-19.2c.3-.3.3-.9 0-1.2z', perPage: 3 }; } ); ``` ### Can I control the carousel using JavaScript / API? Yes, each carousel is given a unique ID by default, or you can provide your own using the **HTML Anchor** field under the block Advanced Settings. Each block exposes a global variable that follows this convention: `{ID}Carousel`. For example, if your carousel ID is **testimonials**, the global variable will be` testimonialsCarousel`. Using this global variable, you can control the carousel programatically using the [Splide API](https://splidejs.com/guides/apis/). **Example to navigate to the third slide:** ``` testimonialsCarousel.Components.Controller.go(2); ``` ## 使用者評論 ![](https://secure.gravatar.com/avatar/957feec0e802d0d23963430cfadbf1221d1a328f93d1d8cba8ee012c8970f3bc? s=60&d=retro&r=g) ### 󠀁[Everything you want in a slider block, and nothing you don’t](https://wordpress.org/support/topic/everything-you-want-in-a-slider-block-and-nothing-you-dont/)󠁿 [Eric Michel](https://profiles.wordpress.org/ytfeldrawkcab/) 2025 年 8 月 22 日 Flexible, well-implemented, performant, the barest of dependencies. If you care about not bogging down your page with massive libraries, this is the one. ![](https://secure.gravatar.com/avatar/ffa71f7f491eccadcbb4e4e19fc98149a90c2c26916aca6178a6afecd657f768? s=60&d=retro&r=g) ### 󠀁[Useful and lightweight](https://wordpress.org/support/topic/useful-and-lightweight-7/)󠁿 [chrislaai](https://profiles.wordpress.org/chrislaai/) 2025 年 7 月 2 日 Useful and lightweight, hope to support Thumbnail Carousel ![](https://secure.gravatar.com/avatar/60f2341a8a035f01db06bf62e135d0c9121c87b1a2c17d8202f3c555394720c4? s=60&d=retro&r=g) ### 󠀁[Really well implemented](https://wordpress.org/support/topic/really-well-implemented/)󠁿 [choerzer](https://profiles.wordpress.org/werbedesign/) 2025 年 6 月 19 日 Does what it should and the block is good to use ![](https://secure.gravatar.com/avatar/67685d3feeb0e207400e65ce119eea52edd91d6f22e7472a423e6d3d3a5bf92f? s=60&d=retro&r=g) ### 󠀁[Best slider block plugin](https://wordpress.org/support/topic/best-slider-block-plugin/)󠁿 [Ankit Punia](https://profiles.wordpress.org/fossist/) 2025 年 5 月 11 日 This is fantastic, very low on resources. Can you please add blocks for previous and next buttons so that we can place them according to our needs? Again, thank you for this free treat. ![](https://secure.gravatar.com/avatar/77ed620ff79e9faa84bc7b42ea0ce0d83b07c0e7b95c6b8759255c675a9f604b? s=60&d=retro&r=g) ### 󠀁[Splide, my favorite slider/carousel now in WP](https://wordpress.org/support/topic/splide-my-favorite-slider-carousel-now-in-wp/)󠁿 [cucom](https://profiles.wordpress.org/cucom/) 2025 年 2 月 27 日 I pretty much always use splide in my non-WordPress projects, so great to see it as a block. So far no problems with it, and all the important options are there. I just wish there was a query-loop block for this, ( I would pay for this ) Keep it up! ![](https://secure.gravatar.com/avatar/0872b7ddce8c2ffc03e1c9c604ecb24dd2f8942f22730c169b2a3637980d0a8c? s=60&d=retro&r=g) ### 󠀁[Useful & flexible!](https://wordpress.org/support/topic/useful-flexible/)󠁿 [cherlynne134](https://profiles.wordpress.org/cherlynne134/) 2025 年 2 月 5 日 I have tried multiple carousel plugins and end up finding out there’s a splide js plugin. Really useful for an experienced developer to customise their carousels and is enough for those that have no experience to use as well! [ 閱讀全部 11 則使用者評論 ](https://wordpress.org/support/plugin/splide-carousel/reviews/) ## 參與者及開發者 以下人員參與了開源軟體〈Splide Carousel Block〉的開發相關工作。 參與者 * [ David Jensen ](https://profiles.wordpress.org/dkjensen/) * [ CloudCatch ](https://profiles.wordpress.org/cloudcatch/) 〈Splide Carousel Block〉外掛目前已有 1 個本地化語言版本。 感謝[全部譯者](https://translate.wordpress.org/projects/wp-plugins/splide-carousel/contributors) 為這個外掛做出的貢獻。 [將〈Splide Carousel Block〉外掛本地化為台灣繁體中文版](https://translate.wordpress.org/projects/wp-plugins/splide-carousel) ### 對開發相關資訊感興趣？ 任何人均可[瀏覽程式碼](https://plugins.trac.wordpress.org/browser/splide-carousel/)、 查看 [SVN 存放庫](https://plugins.svn.wordpress.org/splide-carousel/)，或透過 [RSS](https://plugins.trac.wordpress.org/log/splide-carousel/?limit=100&mode=stop_on_copy&format=rss) 訂閱[開發記錄](https://plugins.trac.wordpress.org/log/splide-carousel/)。 ## 變更記錄 #### 1.7.1 * Enhancement – Compatibility with WordPress 6.9 * Fix – responsive breakpoint changes causing unexpected or invalid content #### 1.7.0 * Enhancement – Update Add New Slide button to work with native Inserter to support` cloudcatch/splide-carousel-item` variations / defaults #### 1.6.0 * Enhancement – Bump block apiVersion to 3 * Chore – Update dependencies and WordPress compatibility to 6.8 #### 1.5.0 * Enhancement – Compatibility with WordPress 6.7 #### 1.4.7 * Fix – Slides not visible in RTL direction mode #### 1.4.6 * Fix – Speed setting change causing unexpected / invalid content error #### 1.4.5 * **POTENTIAL BREAKING CHANGE:** Now using the CSS class `.wp-block-splide-carousel` to encapsulate the carousel and its components. If you have any custom styles applied to the carousel or its components, it’s recommended to test this update in a staging environment before updating in production. #### 1.4.4 * Fix – Carousel JavaScript variable name duplicating “Carousel” in the name #### 1.4.3 * Fix – HTML Anchor not applying to carousel #### 1.4.2 * Fix – Prevent autoplay and auto scroll in block editor #### 1.4.1 * Docs – Update tested up to #### 1.4.0 * Enhancement – Improved editor UX * Enhancement – Added ability to make entire slide clickable link #### 1.3.0 * Enhancement – Added Grid extension * Enhancement – Added autoplay play/pause buttons #### 1.2.0 * Enhancement – Added Inspector Controls to avoid having to use JSON * Enhancement – Exposed global variable to programatically control the carousel using the Splide API #### 1.1.0 * Enhancement – Ability to add photos in bulk when new block is created and when block has no slides #### 1.0.0 * Initial release ## 中繼資料 * 版本 **1.7.1** * 最後更新 **3 個月前** * 啟用安裝數 **3,000+** * WordPress 版本需求 ** 6.5 或更新版本 ** * 已測試相容的 WordPress 版本 **6.9.4** * PHP 版本需求 ** 7.0 或更新版本 ** * 語言 * [English (US)](https://wordpress.org/plugins/splide-carousel/) 及 [Italian](https://it.wordpress.org/plugins/splide-carousel/). * [將這個外掛本地化為你的母語版本](https://translate.wordpress.org/projects/wp-plugins/splide-carousel) * 標籤 * [block](https://tw.wordpress.org/plugins/tags/block/)[carousel](https://tw.wordpress.org/plugins/tags/carousel/) [full-site-editing](https://tw.wordpress.org/plugins/tags/full-site-editing/) [slider](https://tw.wordpress.org/plugins/tags/slider/)[splide](https://tw.wordpress.org/plugins/tags/splide/) * [進階檢視](https://tw.wordpress.org/plugins/splide-carousel/advanced/) ## 評分 5 星，滿分為 5 星 * [ 11 個 5 星使用者評論 ](https://wordpress.org/support/plugin/splide-carousel/reviews/?filter=5) * [ 0 個 4 星使用者評論 ](https://wordpress.org/support/plugin/splide-carousel/reviews/?filter=4) * [ 0 個 3 星使用者評論 ](https://wordpress.org/support/plugin/splide-carousel/reviews/?filter=3) * [ 0 個 2 星使用者評論 ](https://wordpress.org/support/plugin/splide-carousel/reviews/?filter=2) * [ 0 個 1 星使用者評論 ](https://wordpress.org/support/plugin/splide-carousel/reviews/?filter=1) [新增使用者評論](https://wordpress.org/support/plugin/splide-carousel/reviews/#new-post) [查看全部使用者評論](https://wordpress.org/support/plugin/splide-carousel/reviews/) ## 參與者 * [ David Jensen ](https://profiles.wordpress.org/dkjensen/) * [ CloudCatch ](https://profiles.wordpress.org/cloudcatch/) ## 技術支援 最近 2 個月解決的問題: 總計 1 個問題，已解決 0 個 [檢視技術支援論壇](https://wordpress.org/support/plugin/splide-carousel/) ## 贊助 想要支援這個外掛的發展嗎？ [ 贊助這個外掛 ](https://www.buymeacoffee.com/dkjensen)