Note: This carousel is designed to call the existing Splide.js files from within Kadence and create a carousel container around the query loop block. You can then add whatever blocks you like inside the query loop and use even use dynamic content to retrieve custom fields.

I’ve included basic carousel settings in the code, but Splide has many options and you can add your own by referring to the Splide options page.

I’ve also included the two standard Kadence breakpoints, but you can change these or add more breakpoints.

Copy the code from the custom HTML block below in to Page Scripts > Custom CSS and JS > Footer on this page, and then delete the custom HTML block. The carousel will not display while you are editing this page, so view the frontend to see the carousel.