From 0f604a1ce7b1294a6c39505eeff4140f9718499b Mon Sep 17 00:00:00 2001 From: Danish Shakeel Date: Mon, 16 Feb 2026 11:37:54 +0100 Subject: [PATCH 1/4] fix(carousel): allow infinite loop in editor viewport Remove hardcoded loop: false in the editor viewport component to respect carousel settings. --- src/blocks/carousel/viewport/edit.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/blocks/carousel/viewport/edit.tsx b/src/blocks/carousel/viewport/edit.tsx index cab3d65..7a2c355 100644 --- a/src/blocks/carousel/viewport/edit.tsx +++ b/src/blocks/carousel/viewport/edit.tsx @@ -81,7 +81,7 @@ export default function Edit( { const options = carouselOptions as any; embla = EmblaCarousel( emblaRef.current!, { - loop: false, + loop: options?.loop ?? false, dragFree: options?.dragFree ?? false, containScroll: options?.containScroll || 'trimSnaps', axis: options?.axis || 'x', From e8c02d8349e419c41139315120734dd0cb21af28 Mon Sep 17 00:00:00 2001 From: Danish Shakeel Date: Mon, 16 Feb 2026 11:38:00 +0100 Subject: [PATCH 2/4] fix(carousel): resolve spacing issues in loop mode Introduce conditional spacing using CSS gap for standard carousels and margins for looping carousels. This ensures consistent gaps when slides wrap around while avoiding extra trailing space in normal mode. --- src/blocks/carousel/edit.tsx | 1 + src/blocks/carousel/save.tsx | 1 + src/blocks/carousel/styles/_core.scss | 25 +++++++++++++++++++++++-- 3 files changed, 25 insertions(+), 2 deletions(-) diff --git a/src/blocks/carousel/edit.tsx b/src/blocks/carousel/edit.tsx index 3d46473..51e1894 100644 --- a/src/blocks/carousel/edit.tsx +++ b/src/blocks/carousel/edit.tsx @@ -68,6 +68,7 @@ export default function Edit( { className: 'core-carousel', dir: direction, 'data-axis': axis, + 'data-loop': loop ? 'true' : undefined, style: { '--core-carousel-gap': `${ attributes.slideGap }px`, '--core-carousel-height': axis === 'y' ? height : undefined, diff --git a/src/blocks/carousel/save.tsx b/src/blocks/carousel/save.tsx index a71ccc6..f0dbc2e 100644 --- a/src/blocks/carousel/save.tsx +++ b/src/blocks/carousel/save.tsx @@ -59,6 +59,7 @@ export default function Save( { 'aria-label': ariaLabel, dir: direction, 'data-axis': axis, + 'data-loop': loop ? 'true' : undefined, 'data-wp-interactive': 'core-carousel/carousel', 'data-wp-context': JSON.stringify( context ), 'data-wp-init': 'callbacks.initCarousel', // Use init for mounting diff --git a/src/blocks/carousel/styles/_core.scss b/src/blocks/carousel/styles/_core.scss index 13c01f7..e5ce6a6 100644 --- a/src/blocks/carousel/styles/_core.scss +++ b/src/blocks/carousel/styles/_core.scss @@ -17,7 +17,6 @@ margin: 0; padding: 0; list-style: none; - gap: 0; grid-template-columns: none; gap: var(--core-carousel-gap, 0); } @@ -38,11 +37,27 @@ min-width: 0; box-sizing: border-box; - /* Reset vertical margins to align slides */ + /* Reset margins by default (use gap instead) */ + margin-inline-end: 0; margin-block-start: 0; margin-block-end: 0; } +/** + * Fix for Embla Carousel Loop + Gap + * When looping is enabled, Embla v8 doesn't support CSS 'gap'. + * We switch to margin for consistent spacing in loop mode. + */ +:where(.core-carousel[data-loop="true"]) .embla__container, +:where(.core-carousel[data-loop="true"]) .embla .wp-block-post-template { + gap: 0; +} + +:where(.core-carousel[data-loop="true"]) .embla__slide, +:where(.core-carousel[data-loop="true"]) .embla .wp-block-post-template li { + margin-inline-end: var(--core-carousel-gap, 0); +} + /* Vertical Axis adjustments */ :where(.core-carousel[data-axis="y"]) { display: flex; @@ -66,3 +81,9 @@ max-width: 100%; margin-inline-end: 0; } + +/* Vertical + Loop specific */ +:where(.core-carousel[data-axis="y"][data-loop="true"]) .embla__slide, +:where(.core-carousel[data-axis="y"][data-loop="true"]) .embla .wp-block-post-template li { + margin-block-end: var(--core-carousel-gap, 0); +} From f868bba7664ea9480e1eedea3c218810ec2302a4 Mon Sep 17 00:00:00 2001 From: Danish Shakeel Date: Mon, 16 Feb 2026 11:43:25 +0100 Subject: [PATCH 3/4] chore: bump version to 1.0.1 Update version in package.json and plugin header, and add v1.0.1 entries to CHANGELOG.md. --- CHANGELOG.md | 7 +++++++ core-carousel.php | 2 +- package.json | 2 +- 3 files changed, 9 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 3efab97..72d6279 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,10 @@ +# [1.0.1](https://github.com/rtCamp/carousel-system-interactivity-api/compare/1.0.0...1.0.1) (2026-02-16) + +### Bug Fixes + +* **carousel:** resolve spacing issues in loop mode where gaps were missing between last and first slide +* **carousel:** allow infinite loop in editor viewport to match frontend behavior + # 1.0.0 (2026-02-03) diff --git a/core-carousel.php b/core-carousel.php index 70e2db1..fce0ffe 100644 --- a/core-carousel.php +++ b/core-carousel.php @@ -10,7 +10,7 @@ * Contributors: iamdanih17, immasud * License: GPL2 * License URI: https://www.gnu.org/licenses/gpl-2.0.html - * Version: 1.0.0 + * Version: 1.0.1 * Text Domain: core-carousel * * @package core-carousel diff --git a/package.json b/package.json index d933fc4..78c209a 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "core-carousel", - "version": "1.0.0", + "version": "1.0.1", "description": "Carousel block using Embla and WordPress Interactivity API", "author": "rtCamp", "private": true, From d15e11a2e7dc5ec200d1c7d0c2df041e2c7f38dc Mon Sep 17 00:00:00 2001 From: Danish Shakeel Date: Mon, 16 Feb 2026 11:46:13 +0100 Subject: [PATCH 4/4] feat: improve demo --- examples/data/carousel-kit.xml | 1814 +++++++++++++++++++++++++++++++ examples/data/core-carousel.xml | 507 --------- 2 files changed, 1814 insertions(+), 507 deletions(-) create mode 100644 examples/data/carousel-kit.xml delete mode 100644 examples/data/core-carousel.xml diff --git a/examples/data/carousel-kit.xml b/examples/data/carousel-kit.xml new file mode 100644 index 0000000..e3b4a1c --- /dev/null +++ b/examples/data/carousel-kit.xml @@ -0,0 +1,1814 @@ + + + + + +Carousel Kit by rtCamp +http://carousel-demo.local +Carousel system built for WordPress using Interactivity API +Mon, 16 Feb 2026 10:43:07 +0000 +en-US +1.2 +http://carousel-demo.local +http://carousel-demo.local + + 1 + danish + danish@local.com + + + + + + 1 + uncategorized + + + + + 4 + wp_template_part_area + footer + + + + + 3 + wp_template_part_area + header + + + + + 2 + wp_theme + twentytwentyfive + + + + + 1 + category + uncategorized + + + +https://wordpress.org/?v=6.9.1 + + <![CDATA[Hello world!]]> + http://carousel-demo.local/hello-world/ + Thu, 12 Feb 2026 02:37:17 +0000 + danish + http://carousel-demo.local/?p=1 + + +

Welcome to WordPress. This is your first post. Edit or delete it, then start writing!

+]]> + + 1 + 2026-02-12 02:37:17 + 2026-02-12 02:37:17 + 2026-02-12 02:37:17 + 2026-02-12 02:37:17 + open + open + hello-world + publish + 0 + 0 + post + + 0 + + + + <![CDATA[Sample Page]]> + http://carousel-demo.local/?page_id=2 + Thu, 12 Feb 2026 02:37:17 +0000 + danish + http://carousel-demo.local/?page_id=2 + + +

This is an example page. It's different from a blog post because it will stay in one place and will show up in your site navigation (in most themes). Most people start with an About page that introduces them to potential site visitors. It might say something like this:

+ + + +
+ +

Hi there! I'm a bike messenger by day, aspiring actor by night, and this is my website. I live in Los Angeles, have a great dog named Jack, and I like piña coladas. (And gettin' caught in the rain.)

+ +
+ + + +

...or something like this:

+ + + +
+ +

The XYZ Doohickey Company was founded in 1971, and has been providing quality doohickeys to the public ever since. Located in Gotham City, XYZ employs over 2,000 people and does all kinds of awesome things for the Gotham community.

+ +
+ + + +

As a new WordPress user, you should go to your dashboard to delete this page and create new pages for your content. Have fun!

+]]> + + 2 + 2026-02-12 02:37:17 + 2026-02-12 02:37:17 + 2026-02-12 02:40:03 + 2026-02-12 02:40:03 + closed + open + sample-page__trashed + trash + 0 + 0 + page + + 0 + + _wp_page_template + + + + _wp_trash_meta_status + + + + _wp_trash_meta_time + + + + _wp_desired_post_slug + + + + + <![CDATA[Privacy Policy]]> + http://carousel-demo.local/?page_id=3 + Thu, 12 Feb 2026 02:37:17 +0000 + danish + http://carousel-demo.local/?page_id=3 + + +

Who we are

+ + +

Suggested text: Our website address is: http://carousel-demo.local.

+ + +

Comments

+ + +

Suggested text: When visitors leave comments on the site we collect the data shown in the comments form, and also the visitor’s IP address and browser user agent string to help spam detection.

+ + +

An anonymized string created from your email address (also called a hash) may be provided to the Gravatar service to see if you are using it. The Gravatar service privacy policy is available here: https://automattic.com/privacy/. After approval of your comment, your profile picture is visible to the public in the context of your comment.

+ + +

Media

+ + +

Suggested text: If you upload images to the website, you should avoid uploading images with embedded location data (EXIF GPS) included. Visitors to the website can download and extract any location data from images on the website.

+ + +

Cookies

+ + +

Suggested text: If you leave a comment on our site you may opt-in to saving your name, email address and website in cookies. These are for your convenience so that you do not have to fill in your details again when you leave another comment. These cookies will last for one year.

+ + +

If you visit our login page, we will set a temporary cookie to determine if your browser accepts cookies. This cookie contains no personal data and is discarded when you close your browser.

+ + +

When you log in, we will also set up several cookies to save your login information and your screen display choices. Login cookies last for two days, and screen options cookies last for a year. If you select "Remember Me", your login will persist for two weeks. If you log out of your account, the login cookies will be removed.

+ + +

If you edit or publish an article, an additional cookie will be saved in your browser. This cookie includes no personal data and simply indicates the post ID of the article you just edited. It expires after 1 day.

+ + +

Embedded content from other websites

+ + +

Suggested text: Articles on this site may include embedded content (e.g. videos, images, articles, etc.). Embedded content from other websites behaves in the exact same way as if the visitor has visited the other website.

+ + +

These websites may collect data about you, use cookies, embed additional third-party tracking, and monitor your interaction with that embedded content, including tracking your interaction with the embedded content if you have an account and are logged in to that website.

+ + +

Who we share your data with

+ + +

Suggested text: If you request a password reset, your IP address will be included in the reset email.

+ + +

How long we retain your data

+ + +

Suggested text: If you leave a comment, the comment and its metadata are retained indefinitely. This is so we can recognize and approve any follow-up comments automatically instead of holding them in a moderation queue.

+ + +

For users that register on our website (if any), we also store the personal information they provide in their user profile. All users can see, edit, or delete their personal information at any time (except they cannot change their username). Website administrators can also see and edit that information.

+ + +

What rights you have over your data

+ + +

Suggested text: If you have an account on this site, or have left comments, you can request to receive an exported file of the personal data we hold about you, including any data you have provided to us. You can also request that we erase any personal data we hold about you. This does not include any data we are obliged to keep for administrative, legal, or security purposes.

+ + +

Where your data is sent

+ + +

Suggested text: Visitor comments may be checked through an automated spam detection service.

+ +]]> + + 3 + 2026-02-12 02:37:17 + 2026-02-12 02:37:17 + 2026-02-12 02:40:05 + 2026-02-12 02:40:05 + closed + open + privacy-policy__trashed + trash + 0 + 0 + page + + 0 + + _wp_page_template + + + + _wp_trash_meta_status + + + + _wp_trash_meta_time + + + + _wp_desired_post_slug + + + + + <![CDATA[Navigation]]> + http://carousel-demo.local/navigation/ + Thu, 12 Feb 2026 02:37:42 +0000 + + http://carousel-demo.local/navigation/ + + + + + + + + + + + + + + + +]]> + + 4 + 2026-02-12 02:37:42 + 2026-02-12 02:37:42 + 2026-02-16 09:23:50 + 2026-02-16 09:23:50 + closed + closed + navigation + publish + 0 + 0 + wp_navigation + + 0 + + + <![CDATA[Custom Styles]]> + http://carousel-demo.local/wp-global-styles-twentytwentyfive/ + Thu, 12 Feb 2026 02:38:11 +0000 + danish + http://carousel-demo.local/wp-global-styles-twentytwentyfive/ + + + + 6 + 2026-02-12 02:38:11 + 2026-02-12 02:38:11 + 2026-02-16 08:53:25 + 2026-02-16 08:53:25 + closed + closed + wp-global-styles-twentytwentyfive + publish + 0 + 0 + wp_global_styles + + 0 + + + + <![CDATA[Homepage]]> + http://carousel-demo.local/ + Thu, 12 Feb 2026 02:40:15 +0000 + danish + http://carousel-demo.local/?page_id=9 + + +

What is Carousel Kit?

+ + + +

Carousel Kit is a an Interactivity API-powered carousel system built for the WordPress Block Editor. It is designed for enterprise-grade performance and extensibility.

+ + + +
+
Download Plugin
+
+ + + + + + + +

Examples

+ + + +
+
+
+
+

Autoplay

+ + + +

Create auto-playing carousels with Carousel Kit.

+ + + +
+
Learn more
+
+
+
+ + + +
+
+

Infinite Loop

+ + + +

Learn how to enable infinite looping easily with Carousel Kit.

+ + + +
+
Learn more
+
+
+
+ + + +
+
+

Orientation & Direction

+ + + +

Create vertical and RTL carousels with Carousel Kit.

+ + + +
+
Learn more
+
+
+
+ + + +
+
+

Styling Options

+ + + +

Learn how to achieve different styling options for your carousel.

+ + + +
+
Learn more
+
+
+
+
+ + + +
+
+ + + +
+
+
+]]> + + 9 + 2026-02-12 02:40:15 + 2026-02-12 02:40:15 + 2026-02-16 09:14:28 + 2026-02-16 09:14:28 + closed + closed + homepage + publish + 0 + 0 + page + + 0 + + _wp_page_template + + + + + <![CDATA[Creating Autoplay Carousels]]> + http://carousel-demo.local/autoplay/ + Thu, 12 Feb 2026 03:02:02 +0000 + danish + http://carousel-demo.local/?page_id=12 + + +

Using Carousel Kit, you can easily create carousels which auto-play. You can configure the duration of each slide and different interactions which pause the auto-play such as hovering over a slide.

+ + + +
+
+
+
+
+

Excellence is an art won by training and habituation.

+Aristotle
+
+
+ + + +
+
+
+

I hear and I forget. I see and I remember. I do and I understand.

+Confucius
+
+
+ + + +
+
+
+

Wisdom begins in wonder.

+Socrates
+
+
+
+ + + +
+
+ + + +
+
+
+ + + +

+]]> + + 12 + 2026-02-12 03:02:02 + 2026-02-12 03:02:02 + 2026-02-12 03:05:26 + 2026-02-12 03:05:26 + closed + closed + autoplay + publish + 0 + 0 + page + + 0 + + + <![CDATA[pexels-tahayasiryoney-30617939]]> + http://carousel-demo.local/autoplay/pexels-tahayasiryoney-30617939/ + Thu, 12 Feb 2026 02:51:02 +0000 + danish + http://carousel-demo.local/wp-content/uploads/2026/02/pexels-tahayasiryoney-30617939.jpg + + + + 13 + 2026-02-12 02:51:02 + 2026-02-12 02:51:02 + 2026-02-12 02:51:02 + 2026-02-12 02:51:02 + open + closed + pexels-tahayasiryoney-30617939 + inherit + 12 + 0 + attachment + + 0 + http://carousel-demo.local/wp-content/uploads/2026/02/pexels-tahayasiryoney-30617939-scaled.jpg + + _wp_attached_file + + + + _wp_attachment_metadata + + + + + <![CDATA[pexels-armin-forster-6000542-6441839]]> + http://carousel-demo.local/autoplay/pexels-armin-forster-6000542-6441839/ + Thu, 12 Feb 2026 02:53:28 +0000 + danish + http://carousel-demo.local/wp-content/uploads/2026/02/pexels-armin-forster-6000542-6441839.jpg + + + + 14 + 2026-02-12 02:53:28 + 2026-02-12 02:53:28 + 2026-02-12 02:53:28 + 2026-02-12 02:53:28 + open + closed + pexels-armin-forster-6000542-6441839 + inherit + 12 + 0 + attachment + + 0 + http://carousel-demo.local/wp-content/uploads/2026/02/pexels-armin-forster-6000542-6441839-scaled.jpg + + _wp_attached_file + + + + _wp_attachment_metadata + + + + + <![CDATA[pexels-anne-o-sullivan-1478092867-26887007]]> + http://carousel-demo.local/autoplay/pexels-anne-o-sullivan-1478092867-26887007/ + Thu, 12 Feb 2026 02:57:51 +0000 + danish + http://carousel-demo.local/wp-content/uploads/2026/02/pexels-anne-o-sullivan-1478092867-26887007.jpg + + + + 15 + 2026-02-12 02:57:51 + 2026-02-12 02:57:51 + 2026-02-12 02:57:51 + 2026-02-12 02:57:51 + open + closed + pexels-anne-o-sullivan-1478092867-26887007 + inherit + 12 + 0 + attachment + + 0 + http://carousel-demo.local/wp-content/uploads/2026/02/pexels-anne-o-sullivan-1478092867-26887007-scaled.jpg + + _wp_attached_file + + + + _wp_attachment_metadata + + + + + <![CDATA[Header]]> + http://carousel-demo.local/header/ + Thu, 12 Feb 2026 03:02:27 +0000 + danish + http://carousel-demo.local/header/ + + +
+
+
+
+
+]]> + + 17 + 2026-02-12 03:02:27 + 2026-02-12 03:02:27 + 2026-02-12 03:02:27 + 2026-02-12 03:02:27 + closed + closed + header + publish + 0 + 0 + wp_template_part + + 0 + + + + origin + + + + + <![CDATA[Pages]]> + http://carousel-demo.local/page/ + Thu, 12 Feb 2026 03:02:27 +0000 + danish + http://carousel-demo.local/page/ + + + + + + +
+
+ + + +
+
+ + +]]> + + 18 + 2026-02-12 03:02:27 + 2026-02-12 03:02:27 + 2026-02-13 02:13:27 + 2026-02-13 02:13:27 + closed + closed + page + publish + 0 + 0 + wp_template + + 0 + + + origin + + + + + <![CDATA[Footer]]> + http://carousel-demo.local/footer/ + Thu, 12 Feb 2026 03:02:27 +0000 + danish + http://carousel-demo.local/footer/ + + +
+
+
+
+
+

Carousel Kit with WordPress & Interactivity API

+ + + +

Created with ❤️ by rtCamp

+
+ + + +
+ +
+
+
+ + + + +
+
+]]> + + 20 + 2026-02-12 03:02:27 + 2026-02-12 03:02:27 + 2026-02-16 09:09:53 + 2026-02-16 09:09:53 + closed + closed + footer + publish + 0 + 0 + wp_template_part + + 0 + + + + origin + + + + + <![CDATA[Page without title]]> + http://carousel-demo.local/page-without-title/ + Thu, 12 Feb 2026 03:07:34 +0000 + danish + http://carousel-demo.local/page-without-title/ + + + + + + +
+
+ +
+
+ + +]]> + + 27 + 2026-02-12 03:07:34 + 2026-02-12 03:07:34 + 2026-02-12 03:08:04 + 2026-02-12 03:08:04 + closed + closed + page-without-title + publish + 0 + 0 + wp_template + + 0 + + + + <![CDATA[Add Infinite Loop to your Carousel]]> + http://carousel-demo.local/add-looping-to-your-carousel/ + Fri, 13 Feb 2026 01:27:26 +0000 + danish + http://carousel-demo.local/?page_id=32 + + +

To loop your carousel, all you need to do is select the Carousel block and toggle the "Loop" option.

+ + + +
+
+
+
+

Slide 1

+
+
+ + + +
+
+

Slide 2

+
+
+ + + +
+
+

Slide 3

+
+
+
+ + + +
+
+ + + +
+
+
+]]> + + 32 + 2026-02-13 01:27:26 + 2026-02-13 01:27:26 + 2026-02-16 09:24:44 + 2026-02-16 09:24:44 + closed + closed + add-looping-to-your-carousel + publish + 0 + 0 + page + + 0 + + + <![CDATA[pexels-dzikilechu-5112627]]> + http://carousel-demo.local/add-looping-to-your-carousel/pexels-dzikilechu-5112627/ + Fri, 13 Feb 2026 01:36:26 +0000 + danish + http://carousel-demo.local/wp-content/uploads/2026/02/pexels-dzikilechu-5112627.jpg + + + + 36 + 2026-02-13 01:36:26 + 2026-02-13 01:36:26 + 2026-02-13 01:36:26 + 2026-02-13 01:36:26 + open + closed + pexels-dzikilechu-5112627 + inherit + 32 + 0 + attachment + + 0 + http://carousel-demo.local/wp-content/uploads/2026/02/pexels-dzikilechu-5112627-scaled.jpg + + _wp_attached_file + + + + _wp_attachment_metadata + + + + + <![CDATA[API]]> + http://carousel-demo.local/api/ + Fri, 13 Feb 2026 02:20:31 +0000 + danish + http://carousel-demo.local/?page_id=48 + + +

The blocks uses the WordPress Interactivity API to manage state and logic. You can consume this state in your own custom blocks to build advanced features like progress bars, slide counters, or synchronized sliders.

+ + + +

Store Namespace

+ + + +

carousel-kit/carousel

+ + + +

Context (CarouselContext)

+ + + +

The following properties are exposed in the Interactivity API context:

+ + + +
PropertyTypeDescription
isPlayingbooleanIf Autoplay is currently running
timerIterationIdnumberIncrements every time the Autoplay timer resets (slide change).

Bind to key to restart animations.
autoplayboolean|{ delay, ... }Autoplay config or false if disabled.
canScrollPrevbooleantrue if there are previous slides (or looping).
canScrollNextboolean|truetrue if there are next slides (or looping).
selectedIndexnumberThe zero-based index of the current slide.
scrollSnaps{ index: number }[]List of snap points (used by Dots block).
+]]> + + 48 + 2026-02-13 02:20:31 + 2026-02-13 02:20:31 + 2026-02-16 01:44:27 + 2026-02-16 01:44:27 + closed + closed + api + publish + 0 + 0 + page + + 0 + + + <![CDATA[Creating a Carousel]]> + http://carousel-demo.local/creating-a-carousel/ + Mon, 16 Feb 2026 01:34:02 +0000 + danish + http://carousel-demo.local/?page_id=59 + + +

Carousel Kit uses compound block architecture. Each functional component of a usual carousel is its own block which provides maximum flexibility.

+ + + +

Blocks

+ + + +

Carousel Kit comes with the following blocks out of the box:

+ + + +
    +
  1. Carousel (Parent): This parent block provides carousel context and configuration to the blocks inside it.
    2. + + + +
  2. Carousel Viewport: Carousel Viewport acts as the container for all the slides. It provides semantic and markup boundary.
    3. + + + +
  3. Carousel Slide: Carousel Slide holds the content of the individual slide. It can contain virtually any block. Like the viewport block, it also provides semantic and markup boundary.
    4. + + + +
  4. Carousel Controls: Inserts Previous and Next buttons.
    5. + + + +
  5. Carousel Dots:Inserts visual pagination indicators.
    6. +
+ + + +

Creating a Basic Carousel

+ + + +

1. From your Blocks Library, choose Carousel

+ + + +
+ + + +

2. Add contents to the Carousel Slide by choosing carousel slide and adding any block inside it.

+ + + +
+ + + +

3. To configure your carousel, select the Carousel block and from the right sidebar, configure it as per your needs.

+ + + +
+ + + +

Result

+ + + +
+
+
+
+

Hello World

+
+
+ + + +
+
+

Hello World

+
+
+ + + +
+
+

Hello World

+
+
+ + + +
+
+

Hello World

+
+
+
+ + + +
+
+
+
+ + + +

+]]> + + 59 + 2026-02-16 01:34:02 + 2026-02-16 01:34:02 + 2026-02-16 09:09:10 + 2026-02-16 09:09:10 + closed + closed + creating-a-carousel + publish + 0 + 0 + page + + 0 + + + <![CDATA[image]]> + http://carousel-demo.local/creating-a-carousel/image/ + Mon, 16 Feb 2026 01:27:41 +0000 + danish + http://carousel-demo.local/wp-content/uploads/2026/02/image.png + + + + 60 + 2026-02-16 01:27:41 + 2026-02-16 01:27:41 + 2026-02-16 01:27:41 + 2026-02-16 01:27:41 + open + closed + image + inherit + 59 + 0 + attachment + + 0 + http://carousel-demo.local/wp-content/uploads/2026/02/image.png + + _wp_attached_file + + + + _wp_attachment_metadata + + + + + <![CDATA[image]]> + http://carousel-demo.local/creating-a-carousel/image-2/ + Mon, 16 Feb 2026 01:30:58 +0000 + danish + http://carousel-demo.local/wp-content/uploads/2026/02/image-1.png + + + + 61 + 2026-02-16 01:30:58 + 2026-02-16 01:30:58 + 2026-02-16 01:30:58 + 2026-02-16 01:30:58 + open + closed + image-2 + inherit + 59 + 0 + attachment + + 0 + http://carousel-demo.local/wp-content/uploads/2026/02/image-1.png + + _wp_attached_file + + + + _wp_attachment_metadata + + + + + <![CDATA[image]]> + http://carousel-demo.local/creating-a-carousel/image-3/ + Mon, 16 Feb 2026 01:32:28 +0000 + danish + http://carousel-demo.local/wp-content/uploads/2026/02/image-2.png + + + + 62 + 2026-02-16 01:32:28 + 2026-02-16 01:32:28 + 2026-02-16 01:32:28 + 2026-02-16 01:32:28 + open + closed + image-3 + inherit + 59 + 0 + attachment + + 0 + http://carousel-demo.local/wp-content/uploads/2026/02/image-2.png + + _wp_attached_file + + + + _wp_attachment_metadata + + + + + <![CDATA[Styles]]> + http://carousel-demo.local/styles/ + Mon, 16 Feb 2026 01:42:21 +0000 + danish + http://carousel-demo.local/?page_id=64 + + +

To configure how many slides are visible at once, you can use the style options of the carousel.

+ + + +

100% Slides (1 slide per view)

+ + + +
+
+
+
+

Hello World

+
+
+ + + +
+
+

Hello World

+
+
+ + + +
+
+

Hello World

+
+
+ + + +
+
+

Hello World

+
+
+
+ + + +
+
+
+
+ + + +

50% Slides (2 slides per view)

+ + + +
+
+
+
+

Hello World

+
+
+ + + +
+
+

Hello World

+
+
+ + + +
+
+

Hello World

+
+
+ + + +
+
+

Hello World

+
+
+
+ + + +
+
+
+
+ + + +

33% Slides (3 slides per view)

+ + + +
+
+
+
+

Hello World

+
+
+ + + +
+
+

Hello World

+
+
+ + + +
+
+

Hello World

+
+
+ + + +
+
+

Hello World

+
+
+ + + +
+
+

Hello World

+
+
+ + + +
+
+

Hello World

+
+
+ + + +
+
+

Hello World

+
+
+
+ + + +
+
+
+
+ + + +

25% Slides (4 slides per view)

+ + + +
+
+
+
+

Hello World

+
+
+ + + +
+
+

Hello World

+
+
+ + + +
+
+

Hello World

+
+
+ + + +
+
+

Hello World

+
+
+ + + +
+
+

Hello World

+
+
+ + + +
+
+

Hello World

+
+
+ + + +
+
+

Hello World

+
+
+
+ + + +
+
+
+
+ + + +

Slide Gap

+ + + +

By default, slides don't have a gap between them. If you have more than 1 slide per view, it might be a good idea to have some gap.

+ + + +

You can add a gap between using style options.

+ + + +
    +
  1. Select the carousel
    2. + + + +
  2. In the right sidebar, choose the "Styles" option
    3. + + + +
  3. Specify the gap (in px) in Layout > Slide Gap
    4. +
+ + + +
+ + + +

+]]> + + 64 + 2026-02-16 01:42:21 + 2026-02-16 01:42:21 + 2026-02-16 09:07:55 + 2026-02-16 09:07:55 + closed + closed + styles + publish + 0 + 0 + page + + 0 + + + <![CDATA[Screen Recording 2026-02-16 at 02.40.13]]> + http://carousel-demo.local/styles/screen-recording-2026-02-16-at-02-40-13/ + Mon, 16 Feb 2026 01:42:08 +0000 + danish + http://carousel-demo.local/wp-content/uploads/2026/02/Screen-Recording-2026-02-16-at-02.40.13.gif + + + + 65 + 2026-02-16 01:42:08 + 2026-02-16 01:42:08 + 2026-02-16 01:42:08 + 2026-02-16 01:42:08 + open + closed + screen-recording-2026-02-16-at-02-40-13 + inherit + 64 + 0 + attachment + + 0 + http://carousel-demo.local/wp-content/uploads/2026/02/Screen-Recording-2026-02-16-at-02.40.13.gif + + _wp_attached_file + + + + _wp_attachment_metadata + + + + + <![CDATA[Orientation & Direction]]> + http://carousel-demo.local/orientation-direction/ + Mon, 16 Feb 2026 01:51:57 +0000 + danish + http://carousel-demo.local/?page_id=69 + + +

Using Carousel Kit, you can also choose orientation (axis) and direction of your carousels. This is important if you are creating content for different locales (RTL) or want more flexibility with the presentation of your content.

+ + + +

Orientation (Axis)

+ + + +

You can choose the orientation of your carousel by selecting the carousel block and choosing vertical/horizontal orientation.

+ + + +

If you choose vertical orientation, you will also need to specify a fixed height.

+ + + +
+
+
+
+
+

Excellence is an art won by training and habituation.

+Aristotle
+
+
+ + + +
+
+
+

I hear and I forget. I see and I remember. I do and I understand.

+Confucius
+
+
+ + + +
+
+
+

Wisdom begins in wonder.

+Socrates
+
+
+
+ + + +
+
+ + + +
+
+
+ + + +

Direction

+ + + +

You can also specify direction of your carousel (LTR/RTL). Select the carousel block and in the "Direction" options, choose your desired direction.

+ + + +
+
+
+
+
+

Excellence is an art won by training and habituation.

+Aristotle
+
+
+ + + +
+
+
+

I hear and I forget. I see and I remember. I do and I understand.

+Confucius
+
+
+ + + +
+
+
+

Wisdom begins in wonder.

+Socrates
+
+
+
+ + + +
+
+ + + +
+
+
+ + + +

+]]> + + 69 + 2026-02-16 01:51:57 + 2026-02-16 01:51:57 + 2026-02-16 01:53:41 + 2026-02-16 01:53:41 + closed + closed + orientation-direction + publish + 0 + 0 + page + + 0 + + + <![CDATA[Group 10]]> + http://carousel-demo.local/orientation-direction/group-10/ + Mon, 16 Feb 2026 01:51:05 +0000 + danish + http://carousel-demo.local/wp-content/uploads/2026/02/Group-10.png + + + + 70 + 2026-02-16 01:51:05 + 2026-02-16 01:51:05 + 2026-02-16 01:51:05 + 2026-02-16 01:51:05 + open + closed + group-10 + inherit + 69 + 0 + attachment + + 0 + http://carousel-demo.local/wp-content/uploads/2026/02/Group-10.png + + _wp_attached_file + + + + _wp_attachment_metadata + + + + + <![CDATA[image]]> + http://carousel-demo.local/styles/image-4/ + Mon, 16 Feb 2026 09:07:46 +0000 + danish + http://carousel-demo.local/wp-content/uploads/2026/02/image-3.png + + + + 86 + 2026-02-16 09:07:46 + 2026-02-16 09:07:46 + 2026-02-16 09:07:46 + 2026-02-16 09:07:46 + open + closed + image-4 + inherit + 64 + 0 + attachment + + 0 + http://carousel-demo.local/wp-content/uploads/2026/02/image-3.png + + _wp_attached_file + + + + _wp_attachment_metadata + + + + + <![CDATA[Query Loop]]> + http://carousel-demo.local/query-loop/ + Mon, 16 Feb 2026 09:22:45 +0000 + danish + http://carousel-demo.local/?page_id=93 + + +

When a Query Loop block is inserted inside Carousel Viewport, Carousel Kit automatically treats each post as an individual slide. This means that you can create dynamic carousels which can show your posts, pages, and any custom post type.

+ + + +
+ + + +
+
+
+ +
+ +
+ +
+
+ + + +
+
+
+
+ + + +

+]]> + + 93 + 2026-02-16 09:22:45 + 2026-02-16 09:22:45 + 2026-02-16 09:23:33 + 2026-02-16 09:23:33 + closed + closed + query-loop + publish + 0 + 0 + page + + 0 + + + <![CDATA[image]]> + http://carousel-demo.local/query-loop/image-5/ + Mon, 16 Feb 2026 09:23:24 +0000 + danish + http://carousel-demo.local/wp-content/uploads/2026/02/image-4.png + + + + 95 + 2026-02-16 09:23:24 + 2026-02-16 09:23:24 + 2026-02-16 09:23:24 + 2026-02-16 09:23:24 + open + closed + image-5 + inherit + 93 + 0 + attachment + + 0 + http://carousel-demo.local/wp-content/uploads/2026/02/image-4.png + + _wp_attached_file + + + + _wp_attachment_metadata + + + + + diff --git a/examples/data/core-carousel.xml b/examples/data/core-carousel.xml deleted file mode 100644 index cc31a4e..0000000 --- a/examples/data/core-carousel.xml +++ /dev/null @@ -1,507 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - Core Carousel - https://carousel.local - - Mon, 09 Feb 2026 13:02:36 +0000 - en-US - 1.2 - https://carousel.local - https://carousel.local - - 1 - - - 1 - - - - - - 2 - - - - - - - 1 - - - - - - - https://wordpress.org/?v=6.9.1 - - - <![CDATA[Hello world!]]> - https://carousel.local/2026/02/09/hello-world/ - Mon, 09 Feb 2026 13:00:32 +0000 - - https://carousel.local/?p=1 - - -

Welcome to WordPress. This is your first post. Edit or delete it, then start writing!

-]]> - - 1 - - - - - - - - - 0 - 0 - - - 0 - - - 1 - - - https://wordpress.org/ - - - - Gravatar.]]> - - - 0 - 0 - - - - <![CDATA[Sample Page]]> - https://carousel.local/sample-page/ - Mon, 09 Feb 2026 13:00:32 +0000 - - https://carousel.local/?page_id=2 - - -

This is an example page. It's different from a blog post because it will stay in one place and will show up in your site navigation (in most themes). Most people start with an About page that introduces them to potential site visitors. It might say something like this:

- - - -
- -

Hi there! I'm a bike messenger by day, aspiring actor by night, and this is my website. I live in Los Angeles, have a great dog named Jack, and I like piña coladas. (And gettin' caught in the rain.)

- -
- - - -

...or something like this:

- - - -
- -

The XYZ Doohickey Company was founded in 1971, and has been providing quality doohickeys to the public ever since. Located in Gotham City, XYZ employs over 2,000 people and does all kinds of awesome things for the Gotham community.

- -
- - - -

As a new WordPress user, you should go to your dashboard to delete this page and create new pages for your content. Have fun!

-]]> - - 2 - - - - - - - - - 0 - 0 - - - 0 - - - - - - - <![CDATA[Privacy Policy]]> - https://carousel.local/?page_id=3 - Mon, 09 Feb 2026 13:00:32 +0000 - - https://carousel.local/?page_id=3 - - -

Who we are

- - -

Suggested text: Our website address is: https://carousel.local.

- - -

Comments

- - -

Suggested text: When visitors leave comments on the site we collect the data shown in the comments form, and also the visitor’s IP address and browser user agent string to help spam detection.

- - -

An anonymized string created from your email address (also called a hash) may be provided to the Gravatar service to see if you are using it. The Gravatar service privacy policy is available here: https://automattic.com/privacy/. After approval of your comment, your profile picture is visible to the public in the context of your comment.

- - -

Media

- - -

Suggested text: If you upload images to the website, you should avoid uploading images with embedded location data (EXIF GPS) included. Visitors to the website can download and extract any location data from images on the website.

- - -

Cookies

- - -

Suggested text: If you leave a comment on our site you may opt-in to saving your name, email address and website in cookies. These are for your convenience so that you do not have to fill in your details again when you leave another comment. These cookies will last for one year.

- - -

If you visit our login page, we will set a temporary cookie to determine if your browser accepts cookies. This cookie contains no personal data and is discarded when you close your browser.

- - -

When you log in, we will also set up several cookies to save your login information and your screen display choices. Login cookies last for two days, and screen options cookies last for a year. If you select "Remember Me", your login will persist for two weeks. If you log out of your account, the login cookies will be removed.

- - -

If you edit or publish an article, an additional cookie will be saved in your browser. This cookie includes no personal data and simply indicates the post ID of the article you just edited. It expires after 1 day.

- - -

Embedded content from other websites

- - -

Suggested text: Articles on this site may include embedded content (e.g. videos, images, articles, etc.). Embedded content from other websites behaves in the exact same way as if the visitor has visited the other website.

- - -

These websites may collect data about you, use cookies, embed additional third-party tracking, and monitor your interaction with that embedded content, including tracking your interaction with the embedded content if you have an account and are logged in to that website.

- - -

Who we share your data with

- - -

Suggested text: If you request a password reset, your IP address will be included in the reset email.

- - -

How long we retain your data

- - -

Suggested text: If you leave a comment, the comment and its metadata are retained indefinitely. This is so we can recognize and approve any follow-up comments automatically instead of holding them in a moderation queue.

- - -

For users that register on our website (if any), we also store the personal information they provide in their user profile. All users can see, edit, or delete their personal information at any time (except they cannot change their username). Website administrators can also see and edit that information.

- - -

What rights you have over your data

- - -

Suggested text: If you have an account on this site, or have left comments, you can request to receive an exported file of the personal data we hold about you, including any data you have provided to us. You can also request that we erase any personal data we hold about you. This does not include any data we are obliged to keep for administrative, legal, or security purposes.

- - -

Where your data is sent

- - -

Suggested text: Visitor comments may be checked through an automated spam detection service.

- -]]> - - 3 - - - - - - - - - 0 - 0 - - - 0 - - - - - - - <![CDATA[Navigation]]> - https://carousel.local/2026/02/09/navigation/ - Mon, 09 Feb 2026 13:00:32 +0000 - - https://carousel.local/2026/02/09/navigation/ - - ]]> - - 4 - - - - - - - - - 0 - 0 - - - 0 - - - <![CDATA[Core Carousel]]> - https://carousel.local/ - Mon, 09 Feb 2026 13:01:18 +0000 - - https://carousel.local/?page_id=6 - - -
-
-
-
-

Welcome to Our Site

- - - -

Discover amazing content and experiences

- - - -
-
Get Started
-
-
-
- - - -
-
-

Build Something Amazing

- - - -

Powerful tools for modern creators

-
-
- - - -
-
-

Join Our Community

- - - -

Connect with thousands of users worldwide

-
-
-
- - - -
-
- - - -
-
-
- - - - - - - -
-

Trusted By Leading Companies

- - - -
-
-
Partner Logo 1
-
- - - -
-
Partner Logo 2
-
- - - -
-
Partner Logo 3
-
- - - -
-
Partner Logo 4
-
- - - -
-
Partner Logo 5
-
-
- - - -
-
-
-
- - - - - - - -
-

What Our Customers Say

- - - -
-
-
-

"This product changed my workflow completely. Highly recommended!"

- - - -
- - - -

Sarah Johnson
CEO, Tech Corp

-
-
- - - -
-
-

"Excellent support and amazing features. Worth every penny!"

- - - -
- - - -

Michael Chen
Designer, Creative Studio

-
-
- - - -
-
-

"Simple, elegant, and powerful. Best investment we made!"

- - - -
- - - -

Emma Williams
Marketing Director, Brand Co

-
-
-
- - - -
-
- - - -
-
-
-]]> - - 6 - - - - - - - - - 0 - 0 - - - 0 - - - <![CDATA[Custom Styles]]> - https://carousel.local/2026/02/09/wp-global-styles-twentytwentyfive/ - Mon, 09 Feb 2026 13:01:04 +0000 - - https://carousel.local/2026/02/09/wp-global-styles-twentytwentyfive/ - - - - 7 - - - - - - - - - 0 - 0 - - - 0 - - - - - \ No newline at end of file