Title: Splide Carousel Block Author: David Jensen Published: 14 Tháng 10, 2022 Last modified: 27 Tháng 8, 2026 --- Tìm kiếm plugin ![](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 Bởi [David Jensen](https://profiles.wordpress.org/dkjensen/) [Tải về](https://downloads.wordpress.org/plugin/splide-carousel.1.8.0.zip) [Xem trước trực tiếp](https://vi.wordpress.org/plugins/splide-carousel/?preview=1) * [Chi tiết](https://vi.wordpress.org/plugins/splide-carousel/#description) * [Đánh giá](https://vi.wordpress.org/plugins/splide-carousel/#reviews) * [Cài đặt](https://vi.wordpress.org/plugins/splide-carousel/#installation) * [Nhà phát triển](https://vi.wordpress.org/plugins/splide-carousel/#developers) [Hỗ trợ](https://wordpress.org/support/plugin/splide-carousel/) ## Mô tả 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. ## Ảnh màn hình [⌊Block editor view⌉⌊Block editor view⌉[ Block editor view [⌊Block editor view⌉⌊Block editor view⌉[ Block editor view [⌊Front end view⌉⌊Front end view⌉[ Front end view [⌊Front end view⌉⌊Front end view⌉[ Front end view [⌊Block controls⌉⌊Block controls⌉[ Block controls ## Khối Plugin này cung cấp 2 khối. * Splide Carousel * Splide Carousel Item ## Cài đặt 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 ## Hỏi đáp ### 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); ``` ## Đánh giá ![](https://secure.gravatar.com/avatar/980ccbd6cfbc977f3f16ac6057db507a513c036c54aa23837d155a46f512ec58? s=60&d=retro&r=g) ### 󠀁[I LOVE IT](https://wordpress.org/support/topic/i-love-it-1043/)󠁿 [beatty67](https://profiles.wordpress.org/beatty67/) 15 Tháng 7, 2026 I'm always having to work with carousels, and hate them. They're always causing some kind of trouble. I finally forced a few clients to let me switch their themes to WordPress Gutenberg themes, which meant finding a suitable block version slider. After using the Splide Carousel plugin for maybe a year, and not thinking anything about it, until now when I swapped out some photos, well, I realized this is the best carousel plugin on the market. Ye old free wordpress repository. Worth its weight in gold. Thanks for making something that just works out of the box. ![](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/) 22 Tháng 8, 2025 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/) 2 Tháng 7, 2025 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/) 19 Tháng 6, 2025 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/) 11 Tháng 5, 2025 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/) 27 Tháng 2, 2025 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! [ Đọc tất cả 12 đánh giá ](https://wordpress.org/support/plugin/splide-carousel/reviews/) ## Người đóng góp & Lập trình viên “Splide Carousel Block” là mã nguồn mở. Những người sau đã đóng góp vào plugin này. Những người đóng góp * [ David Jensen ](https://profiles.wordpress.org/dkjensen/) * [ CloudCatch ](https://profiles.wordpress.org/cloudcatch/) “Splide Carousel Block” đã được dịch qua 1 ngôn ngữ. Cảm ơn [những người tham gia dịch](https://translate.wordpress.org/projects/wp-plugins/splide-carousel/contributors) vì đóng góp của họ. [Dịch “Splide Carousel Block” sang ngôn ngữ của bạn.](https://translate.wordpress.org/projects/wp-plugins/splide-carousel) ### Muốn tham gia phát triển? [Duyệt code](https://plugins.trac.wordpress.org/browser/splide-carousel/), check out [SVN repository](https://plugins.svn.wordpress.org/splide-carousel/), hoặc theo dõi [nhật ký phát triển](https://plugins.trac.wordpress.org/log/splide-carousel/) qua [RSS](https://plugins.trac.wordpress.org/log/splide-carousel/?limit=100&mode=stop_on_copy&format=rss). ## Nhật ký thay đổi #### 1.8.0 * Enhancement – WP 7.1 compatibility * Fix – broken rendering of carousel when in block pattern preview #### 1.8.0 * Security – Fix stored Cross-Site Scripting via the `url` block attribute on ` cloudcatch/splide-carousel-item` slides (CVE-2026-9022) #### 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 ## Meta * Phiên bản **1.8.0** * Cập nhật lần cuối **1 tháng trước** * Số lượt cài đặt **4.000+** * Phiên bản WordPress ** 6.5 hoặc cao hơn ** * Đã kiểm tra lên đến **7.1.3** * Phiên bản PHP ** 7.0 hoặc cao hơn ** * Ngôn ngữ * [English (US)](https://wordpress.org/plugins/splide-carousel/) và [Italian](https://it.wordpress.org/plugins/splide-carousel/). * [Dịch sang ngôn ngữ của bạn](https://translate.wordpress.org/projects/wp-plugins/splide-carousel) * Thẻ * [block](https://vi.wordpress.org/plugins/tags/block/)[carousel](https://vi.wordpress.org/plugins/tags/carousel/) [full-site-editing](https://vi.wordpress.org/plugins/tags/full-site-editing/) [slider](https://vi.wordpress.org/plugins/tags/slider/)[splide](https://vi.wordpress.org/plugins/tags/splide/) * [Nâng cao](https://vi.wordpress.org/plugins/splide-carousel/advanced/) ## Đánh giá 5 trên 5 sao. * [ 12 5-star reviews ](https://wordpress.org/support/plugin/splide-carousel/reviews/?filter=5) * [ 0 4-star reviews ](https://wordpress.org/support/plugin/splide-carousel/reviews/?filter=4) * [ 0 3-star reviews ](https://wordpress.org/support/plugin/splide-carousel/reviews/?filter=3) * [ 0 2-star reviews ](https://wordpress.org/support/plugin/splide-carousel/reviews/?filter=2) * [ 0 1-star reviews ](https://wordpress.org/support/plugin/splide-carousel/reviews/?filter=1) [Your review](https://wordpress.org/support/plugin/splide-carousel/reviews/#new-post) [Xem tất cả đánh giá](https://wordpress.org/support/plugin/splide-carousel/reviews/) ## Những người đóng góp * [ David Jensen ](https://profiles.wordpress.org/dkjensen/) * [ CloudCatch ](https://profiles.wordpress.org/cloudcatch/) ## Hỗ trợ Các lỗi đã xử lý trong vòng hai tháng gần đây: 1 trên 2 [Xem diễn đàn hỗ trợ](https://wordpress.org/support/plugin/splide-carousel/) ## Ủng hộ Bạn có muốn hỗ trợ vào sự phát triển của plugin này? [ Ủng hộ plugin này ](https://www.buymeacoffee.com/dkjensen)