https://www.usap.edu/wp-content/themes/usap/components/organisms/cards-carousel/cards-carousel.js?ver=1.0.021

1const cardCarousel = () => {
2
3	const $cardCarousels = document.querySelectorAll( '.cards-carousel' );
4	
5	if (!$cardCarousels.length) return;
6
7    // Verificar que Splide esté disponible
8    if (typeof Splide === 'undefined') {
9        console.error('Splide is not loaded');
10        return;
11    }
12
13	const BREAKPOINT = 1025;
14	let carousels = [];
15
16	const create = () => {
17
18		$cardCarousels.forEach( ( $cardCarousel ) => {
19
20			const $splide = $cardCarousel.querySelector( '.splide' );
21
22			if ( ! $splide ) return;
23
24			const splideArgs = {
25				type: 'slide',
26				autoWidth: true,
27				gap: 16,
28				padding: 20,
29				arrows: false,
30				pagination: false,
31				drag: 'free',
32				autoplay: false,
33				interval: 3000,			
34			};
35
36			const carousel = new Splide( $splide, splideArgs );
37
38			carousel.mount();
39			carousels.push(carousel);
40
41			
42		} );
43	}
44
45	const destroy = () => {
46		carousels.forEach( ( carousel ) => {
47			if (carousel && typeof carousel.destroy === 'function') {
48				carousel.destroy();
49			}
50		} );
51		carousels = [];
52	}
53
54	if ( window.innerWidth < BREAKPOINT ) {
55		create();
56	}
57	
58	// Debounce resize
59	let resizeTimeout;
60	window.addEventListener( 'resize', () => {
61		clearTimeout( resizeTimeout );
62		resizeTimeout = setTimeout( () => {
63			if ( window.innerWidth < BREAKPOINT && carousels.length === 0 ) {
64				create();
65			} else if ( window.innerWidth >= BREAKPOINT && carousels.length > 0 ) {
66				destroy();
67			}
68		}, 150 );
69	} );
70
71}
72document.addEventListener('DOMContentLoaded', cardCarousel);