JavaScript
document.addEventListener('DOMContentLoaded', function () {
const carousel = document.querySelector('#carousel-id .kt-inside-inner-col');
if (carousel) {
// Apply classes and initialize Splide
carousel.classList.add('kb-splide', 'splide');
const track = document.querySelector('.splide .wp-block-kadence-repeater');
track.classList.add('kb-splide', 'splide__track');
const list = document.querySelector(
'.splide__track .wp-block-kadence-repeatertemplate'
);
list.classList.add('kb-splide', 'splide__list');
const slide = document.querySelectorAll('.splide__list > li');
slide.forEach((element) => {
element.classList.add('kb-splide', 'splide__slide');
});
new Splide('#carousel-id .kt-inside-inner-col', {
type: 'loop',
perPage: 1,
gap: '0px',
focus: 'start',
arrows: false,
pagination: true,
autoHeight: true,
autoplay: true,
interval: 7000,
drag: true,
pauseOnHover: false,
updateOnMove: true,
padding: '0',
}).mount();
}
});#carousel-id = section id.
HTML
<link rel="stylesheet" href="/wp-content/plugins/kadence-blocks-pro/includes/assets/css/kadence-splide.min.css">
<script src="/wp-content/plugins/kadence-blocks-pro/includes/assets/js/splide.min.js"></script>
<script src="/wp-content/plugins/kadence-blocks-pro/includes/assets/js/kb-splide-init.min.js"></script>Skripts pro Seite nur einmal laden.