{"id":163679,"date":"2022-10-14T12:29:24","date_gmt":"2022-10-14T12:29:24","guid":{"rendered":"https:\/\/wordpress.org\/plugins\/splide-carousel\/"},"modified":"2026-01-17T13:52:28","modified_gmt":"2026-01-17T13:52:28","slug":"splide-carousel","status":"publish","type":"plugin","link":"https:\/\/bre.wordpress.org\/plugins\/splide-carousel\/","author":12809760,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_crdt_document":"","version":"1.7.1","stable_tag":"1.7.1","tested":"6.9.4","requires":"6.5","requires_php":"7.0","requires_plugins":null,"header_name":"Splide Carousel Block","header_author":"CloudCatch LLC","header_description":"Carousel block","assets_banners_color":"23c48b","last_updated":"2026-01-17 13:52:28","external_support_url":"","external_repository_url":"","donate_link":"https:\/\/www.buymeacoffee.com\/dkjensen","header_plugin_uri":"","header_author_uri":"https:\/\/cloudcatch.io","rating":5,"author_block_rating":5,"active_installs":3000,"downloads":27068,"num_ratings":11,"support_threads":1,"support_threads_resolved":0,"author_block_count":2,"sections":["description","installation","faq","changelog"],"tags":{"1.0.0":{"tag":"1.0.0","author":"dkjensen","date":"2022-10-14 12:29:08"},"1.1.0":{"tag":"1.1.0","author":"dkjensen","date":"2022-10-19 12:52:43"},"1.2.0":{"tag":"1.2.0","author":"dkjensen","date":"2022-11-02 17:54:44"},"1.3.0":{"tag":"1.3.0","author":"dkjensen","date":"2023-02-22 00:22:57"},"1.4.0":{"tag":"1.4.0","author":"dkjensen","date":"2023-03-14 19:57:41"},"1.4.1":{"tag":"1.4.1","author":"dkjensen","date":"2023-08-02 16:23:39"},"1.4.2":{"tag":"1.4.2","author":"dkjensen","date":"2023-11-10 14:37:05"},"1.4.3":{"tag":"1.4.3","author":"dkjensen","date":"2024-04-15 19:25:28"},"1.4.4":{"tag":"1.4.4","author":"dkjensen","date":"2024-04-16 13:12:32"},"1.4.5":{"tag":"1.4.5","author":"dkjensen","date":"2024-05-01 19:51:15"},"1.4.6":{"tag":"1.4.6","author":"dkjensen","date":"2024-08-06 19:54:29"},"1.4.7":{"tag":"1.4.7","author":"dkjensen","date":"2024-08-10 01:29:09"},"1.5.0":{"tag":"1.5.0","author":"dkjensen","date":"2024-11-21 17:10:20"},"1.6.0":{"tag":"1.6.0","author":"dkjensen","date":"2025-06-09 12:41:11"},"1.7.0":{"tag":"1.7.0","author":"dkjensen","date":"2025-08-15 19:31:09"},"1.7.1":{"tag":"1.7.1","author":"dkjensen","date":"2026-01-17 13:52:28"}},"upgrade_notice":[],"ratings":{"1":0,"2":0,"3":0,"4":0,"5":11},"assets_icons":{"icon-128x128.png":{"filename":"icon-128x128.png","revision":2798866,"resolution":"128x128","location":"assets","locale":""},"icon-256x256.png":{"filename":"icon-256x256.png","revision":2798866,"resolution":"256x256","location":"assets","locale":""}},"assets_banners":{"banner-1544x500.jpg":{"filename":"banner-1544x500.jpg","revision":2798866,"resolution":"1544x500","location":"assets","locale":""},"banner-772x250.jpg":{"filename":"banner-772x250.jpg","revision":2798866,"resolution":"772x250","location":"assets","locale":""}},"assets_blueprints":{"blueprint.json":{"filename":"blueprint.json","revision":3441595,"resolution":false,"location":"assets","locale":"","contents":"{\"landingPage\":\"\\\/wp-admin\\\/plugins.php\",\"preferredVersions\":{\"php\":\"8.2\",\"wp\":\"latest\"},\"phpExtensionBundles\":[\"kitchen-sink\"],\"features\":{\"networking\":true},\"steps\":[{\"step\":\"installPlugin\",\"options\":{\"activate\":true},\"pluginData\":{\"resource\":\"wordpress.org\\\/plugins\",\"slug\":\"splide-carousel\"}},{\"step\":\"login\",\"username\":\"admin\",\"password\":\"password\"}]}"}},"all_blocks":{"cloudcatch\/splide-carousel":{"$schema":"https:\/\/schemas.wp.org\/trunk\/block.json","apiVersion":3,"name":"cloudcatch\/splide-carousel","version":"1.7.1","title":"Splide Carousel","category":"media","attributes":{"innerBlocks":{"type":"array","default":[]},"type":{"type":"string","default":"slide"},"slideType":{"type":"string","default":"perPage"},"perPage":{"type":"integer","default":1},"perMove":{"type":"integer","default":1},"speed":{"type":"integer","default":400},"fixedWidth":{"type":"string","default":""},"autoWidth":{"type":"boolean","default":false},"gap":{"type":"string","default":"0px"},"direction":{"type":"string","default":"ltr"},"fixedHeight":{"type":"string","default":""},"arrows":{"type":"boolean","default":true},"pagination":{"type":"boolean","default":true},"autoplay":{"type":"boolean","default":false},"interval":{"type":"string","default":"5000"},"pauseOnHover":{"type":"boolean","default":true},"autoplayPlayPauseButtons":{"type":"boolean","default":false},"options":{"type":"string","default":""},"mediaQuery":{"type":"string","default":"max"},"breakpointTablet":{"type":"integer","default":1079},"breakpointMobile":{"type":"integer","default":599},"perPageTablet":{"type":"integer","default":null},"perPageMobile":{"type":"integer","default":null},"extensions":{"type":"object","default":{"autoScroll":false,"urlHash":false,"grid":false}},"progressBar":{"type":"boolean","default":false}},"supports":{"anchor":true,"align":["wide","full"],"units":["px","em","rem","vh","vw"]},"textdomain":"splide-carousel","editorScript":"file:.\/index.js","editorStyle":"file:.\/index.css","style":"file:.\/view.css","viewScript":"file:.\/view.js"},"cloudcatch\/splide-carousel-item":{"$schema":"https:\/\/schemas.wp.org\/trunk\/block.json","apiVersion":3,"name":"cloudcatch\/splide-carousel-item","version":"1.7.1","title":"Splide Carousel Item","category":"media","parent":["cloudcatch\/splide-carousel"],"attributes":{"verticalAlignment":{"type":"string"},"innerBlocks":{"type":"array","default":[]},"urlHash":{"type":"string"},"extensions":{"type":"object","default":{"autoScroll":false,"urlHash":false}},"url":{"type":"string"},"rel":{"type":"string"},"target":{"type":"string"}},"supports":{"anchor":true,"html":false,"color":{"gradients":true,"link":true,"__experimentalDefaultControls":{"background":true,"text":true}},"typography":{"fontSize":true,"lineHeight":true,"__experimentalFontStyle":true,"__experimentalFontWeight":true,"__experimentalLetterSpacing":true,"__experimentalTextTransform":true,"__experimentalDefaultControls":{"fontSize":true}}},"textdomain":"splide-carousel","editorScript":"file:.\/index.js","editorStyle":"file:.\/index.css","style":"file:.\/style-index.css"}},"tagged_versions":["1.0.0","1.1.0","1.2.0","1.3.0","1.4.0","1.4.1","1.4.2","1.4.3","1.4.4","1.4.5","1.4.6","1.4.7","1.5.0","1.6.0","1.7.0","1.7.1"],"block_files":["\/tags\/1.7.1\/build\/carousel\/index.js","\/tags\/1.7.1\/build\/carousel\/index.css","\/tags\/1.7.1\/build\/carousel\/view.css","\/tags\/1.7.1\/build\/carousel-item\/index.js","\/tags\/1.7.1\/build\/carousel-item\/index.css","\/tags\/1.7.1\/build\/carousel-item\/style-index.css"],"assets_screenshots":{"screenshot-1.jpg":{"filename":"screenshot-1.jpg","revision":2810254,"resolution":"1","location":"assets","locale":""},"screenshot-2.jpg":{"filename":"screenshot-2.jpg","revision":2810254,"resolution":"2","location":"assets","locale":""},"screenshot-3.jpg":{"filename":"screenshot-3.jpg","revision":2810254,"resolution":"3","location":"assets","locale":""},"screenshot-4.jpg":{"filename":"screenshot-4.jpg","revision":2810254,"resolution":"4","location":"assets","locale":""},"screenshot-5.jpg":{"filename":"screenshot-5.jpg","revision":2810254,"resolution":"5","location":"assets","locale":""}},"screenshots":{"1":"Block editor view","2":"Block editor view","3":"Front end view","4":"Front end view","5":"Block controls"},"jetpack_post_was_ever_published":false},"plugin_section":[172757],"plugin_tags":[1220,786,201618,611,208022],"plugin_category":[50],"plugin_contributors":[209280,91372],"plugin_business_model":[],"class_list":["post-163679","plugin","type-plugin","status-publish","hentry","plugin_section-block","plugin_tags-block","plugin_tags-carousel","plugin_tags-full-site-editing","plugin_tags-slider","plugin_tags-splide","plugin_category-media","plugin_contributors-cloudcatch","plugin_contributors-dkjensen","plugin_committers-dkjensen"],"banners":{"banner":"https:\/\/ps.w.org\/splide-carousel\/assets\/banner-772x250.jpg?rev=2798866","banner_2x":"https:\/\/ps.w.org\/splide-carousel\/assets\/banner-1544x500.jpg?rev=2798866","banner_rtl":false,"banner_2x_rtl":false},"icons":{"svg":false,"icon":"https:\/\/ps.w.org\/splide-carousel\/assets\/icon-128x128.png?rev=2798866","icon_2x":"https:\/\/ps.w.org\/splide-carousel\/assets\/icon-256x256.png?rev=2798866","generated":false},"screenshots":[{"src":"https:\/\/ps.w.org\/splide-carousel\/assets\/screenshot-1.jpg?rev=2810254","caption":"Block editor view"},{"src":"https:\/\/ps.w.org\/splide-carousel\/assets\/screenshot-2.jpg?rev=2810254","caption":"Block editor view"},{"src":"https:\/\/ps.w.org\/splide-carousel\/assets\/screenshot-3.jpg?rev=2810254","caption":"Front end view"},{"src":"https:\/\/ps.w.org\/splide-carousel\/assets\/screenshot-4.jpg?rev=2810254","caption":"Front end view"},{"src":"https:\/\/ps.w.org\/splide-carousel\/assets\/screenshot-5.jpg?rev=2810254","caption":"Block controls"}],"raw_content":"<!--section=description-->\n<p>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.<\/p>\n\n<p>Use the Splide Carousel block to create image carousels, testimonial rotators, and more in Gutenberg!<\/p>\n\n<p><a href=\"https:\/\/splide-demo.cloudcatch.io\/\">View Demo<\/a><\/p>\n\n<h3>Options<\/h3>\n\n<ul>\n<li>Arrows Navigation<\/li>\n<li>Dots Pagination<\/li>\n<li>Autoplay<\/li>\n<li>Slide and Fade Transitions<\/li>\n<li>Infinite Loop<\/li>\n<li>API to control the carousel using JavaScript<\/li>\n<li>Fixed Slide Width \/ Height<\/li>\n<li>Variable Slide Width \/ Height<\/li>\n<li>Number of Slides Per Page<\/li>\n<li>Slide Spacing<\/li>\n<li>Video Support<\/li>\n<li>Auto Scroll<\/li>\n<li>Hash Navigation<\/li>\n<li>Lazyload<\/li>\n<li>FSE (Full Site Editing) Compatible<\/li>\n<li>Fully Accessible<\/li>\n<li>RTL Support<\/li>\n<li>Responsive<\/li>\n<li>No Google Lighthouse Issues<\/li>\n<li>Lightweight<\/li>\n<li><a href=\"https:\/\/splidejs.com\/guides\/options\/#options\">&hellip;and more!<\/a><\/li>\n<\/ul>\n\n<h3>Attribution<\/h3>\n\n<p>The Splide Carousel block uses the <a href=\"https:\/\/splidejs.com\/\">Splide<\/a> library.<\/p>\n\n<!--section=installation-->\n<ol>\n<li>Upload the plugin files to the <code>\/wp-content\/plugins\/splide-carousel<\/code> directory, or install the plugin through the WordPress plugins screen directly.<\/li>\n<li>Activate the plugin through the 'Plugins' screen in WordPress<\/li>\n<\/ol>\n\n<!--section=faq-->\n<dl>\n<dt id=\"are%20there%20additional%20options%20i%20can%20use%3F\"><h3>Are there additional options I can use?<\/h3><\/dt>\n<dd><p>Yes, under the Splide Carousel block Advanced Settings, you can provide a valid JSON string containing additional options <a href=\"https:\/\/splidejs.com\/guides\/options\/\">located here<\/a>.<\/p>\n\n<p>e.g.: <code>{\"focus\":\"center\",\"trimSpace\":false}<\/code><\/p><\/dd>\n<dt id=\"can%20i%20set%20default%20carousel%20options%20globally%3F\"><h3>Can I set default carousel options globally?<\/h3><\/dt>\n<dd><p>Yes, we need to listen to a JavaScript event that is fired when the carousel is ready, and then add the defaults.<\/p>\n\n<pre><code>document.addEventListener( 'splideReady', function( e ) {\n    e.detail.defaults = {\n        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',\n        perPage: 3\n    };\n} );\n<\/code><\/pre><\/dd>\n<dt id=\"can%20i%20control%20the%20carousel%20using%20javascript%20%2F%20api%3F\"><h3>Can I control the carousel using JavaScript \/ API?<\/h3><\/dt>\n<dd><p>Yes, each carousel is given a unique ID by default, or you can provide your own using the <strong>HTML Anchor<\/strong> field under the block Advanced Settings.<\/p>\n\n<p>Each block exposes a global variable that follows this convention: <code>{ID}Carousel<\/code>. For example, if your carousel ID is <strong>testimonials<\/strong>, the global variable will be <code>testimonialsCarousel<\/code>.<\/p>\n\n<p>Using this global variable, you can control the carousel programatically using the <a href=\"https:\/\/splidejs.com\/guides\/apis\/\">Splide API<\/a>.<\/p>\n\n<p><strong>Example to navigate to the third slide:<\/strong><\/p>\n\n<pre><code>testimonialsCarousel.Components.Controller.go(2);\n<\/code><\/pre><\/dd>\n\n<\/dl>\n\n<!--section=changelog-->\n<h4>1.7.1<\/h4>\n\n<ul>\n<li>Enhancement - Compatibility with WordPress 6.9<\/li>\n<li>Fix - responsive breakpoint changes causing unexpected or invalid content<\/li>\n<\/ul>\n\n<h4>1.7.0<\/h4>\n\n<ul>\n<li>Enhancement - Update Add New Slide button to work with native Inserter to support <code>cloudcatch\/splide-carousel-item<\/code> variations \/ defaults<\/li>\n<\/ul>\n\n<h4>1.6.0<\/h4>\n\n<ul>\n<li>Enhancement - Bump block apiVersion to 3<\/li>\n<li>Chore - Update dependencies and WordPress compatibility to 6.8<\/li>\n<\/ul>\n\n<h4>1.5.0<\/h4>\n\n<ul>\n<li>Enhancement - Compatibility with WordPress 6.7<\/li>\n<\/ul>\n\n<h4>1.4.7<\/h4>\n\n<ul>\n<li>Fix - Slides not visible in RTL direction mode<\/li>\n<\/ul>\n\n<h4>1.4.6<\/h4>\n\n<ul>\n<li>Fix - Speed setting change causing unexpected \/ invalid content error<\/li>\n<\/ul>\n\n<h4>1.4.5<\/h4>\n\n<ul>\n<li><strong>POTENTIAL BREAKING CHANGE:<\/strong>\nNow using the CSS class <code>.wp-block-splide-carousel<\/code> 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.<\/li>\n<\/ul>\n\n<h4>1.4.4<\/h4>\n\n<ul>\n<li>Fix - Carousel JavaScript variable name duplicating \"Carousel\" in the name<\/li>\n<\/ul>\n\n<h4>1.4.3<\/h4>\n\n<ul>\n<li>Fix - HTML Anchor not applying to carousel<\/li>\n<\/ul>\n\n<h4>1.4.2<\/h4>\n\n<ul>\n<li>Fix - Prevent autoplay and auto scroll in block editor<\/li>\n<\/ul>\n\n<h4>1.4.1<\/h4>\n\n<ul>\n<li>Docs - Update tested up to<\/li>\n<\/ul>\n\n<h4>1.4.0<\/h4>\n\n<ul>\n<li>Enhancement - Improved editor UX<\/li>\n<li>Enhancement - Added ability to make entire slide clickable link<\/li>\n<\/ul>\n\n<h4>1.3.0<\/h4>\n\n<ul>\n<li>Enhancement - Added Grid extension<\/li>\n<li>Enhancement - Added autoplay play\/pause buttons<\/li>\n<\/ul>\n\n<h4>1.2.0<\/h4>\n\n<ul>\n<li>Enhancement - Added Inspector Controls to avoid having to use JSON<\/li>\n<li>Enhancement - Exposed global variable to programatically control the carousel using the Splide API<\/li>\n<\/ul>\n\n<h4>1.1.0<\/h4>\n\n<ul>\n<li>Enhancement - Ability to add photos in bulk when new block is created and when block has no slides<\/li>\n<\/ul>\n\n<h4>1.0.0<\/h4>\n\n<ul>\n<li>Initial release<\/li>\n<\/ul>","raw_excerpt":"Carousel block using Splide to create flexible and accessible sliders","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/bre.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin\/163679","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bre.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin"}],"about":[{"href":"https:\/\/bre.wordpress.org\/plugins\/wp-json\/wp\/v2\/types\/plugin"}],"replies":[{"embeddable":true,"href":"https:\/\/bre.wordpress.org\/plugins\/wp-json\/wp\/v2\/comments?post=163679"}],"author":[{"embeddable":true,"href":"https:\/\/bre.wordpress.org\/plugins\/wp-json\/wporg\/v1\/users\/dkjensen"}],"wp:attachment":[{"href":"https:\/\/bre.wordpress.org\/plugins\/wp-json\/wp\/v2\/media?parent=163679"}],"wp:term":[{"taxonomy":"plugin_section","embeddable":true,"href":"https:\/\/bre.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_section?post=163679"},{"taxonomy":"plugin_tags","embeddable":true,"href":"https:\/\/bre.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_tags?post=163679"},{"taxonomy":"plugin_category","embeddable":true,"href":"https:\/\/bre.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_category?post=163679"},{"taxonomy":"plugin_contributors","embeddable":true,"href":"https:\/\/bre.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_contributors?post=163679"},{"taxonomy":"plugin_business_model","embeddable":true,"href":"https:\/\/bre.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_business_model?post=163679"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}