Slider block view script

view.tsx

const Splide = window.Splide;

const initSlider = () => {
	const divs = document.getElementsByClassName( 'wp-block-blockify-slider' ) as HTMLCollectionOf<HTMLDivElement>;

	for ( let i = 0; i < divs.length; i++ ) {
		const div = divs[ i ] as HTMLDivElement;

		const type = div?.getAttribute( 'data-type' ) ?? 'slider';
		const perPage = parseInt( div?.getAttribute( 'data-per-page' ) || '3' );
		const perMove = parseInt( div?.getAttribute( 'data-per-move' ) || '1' );
		const gap = div?.getAttribute( 'data-gap' ) ?? '0';
		const speed = parseInt( div?.getAttribute( 'data-speed' ) || '400' );
		const pauseOnHover = div?.getAttribute( 'data-pause-on-hover' ) === 'true';
		const autoplay = div?.getAttribute( 'data-autoplay' ) === 'true';

		let options = {
			type: div?.getAttribute( 'data-loop' ) ? 'loop' : 'slide',
			perPage: perPage ?? 3,
			perMove: perMove ?? 1,
			autoplay,
			pauseOnHover,
			rewind: true,
			snap: true,
			drag: ( div?.getAttribute( 'data-drag' ) === 'true' ) ? 'free' : false,
			gap: gap === '0' ? 0 : gap,
			pagination: div?.getAttribute( 'data-show-dots' ) === 'true',
			focus: 0,
			arrows: div?.getAttribute( 'data-show-arrows' ) === 'true',
			speed,
			interval: parseInt( div?.getAttribute( 'data-interval' ) || '5000' ),
			easing: 'linear',
			breakpoints: div?.getAttribute( 'data-use-breakpoints' ) === 'true' ? {
				782: {
					perPage: ( perPage ?? 3 ) > 1 ? 2 : 1,
					perMove: ( perMove ?? 1 ) > 1 ? 2 : 1,
				},
				512: {
					perPage: 1,
					perMove: 1,
				},
			} : {},
			arrowPath: 'M13.4 1 9.5 4.2 24.1 20 9.5 35.8l3.8 3.2 17.1-19-17-19z',
			autoScroll: {},
			direction: div?.getAttribute( 'data-direction' ) ?? 'ltr',
			height: div?.getAttribute( 'data-height' ) ?? '',
		};

		if ( type === 'marquee' ) {
			options = {
				type: 'loop',
				perPage: perPage ?? 3,
				pauseOnHover,
				arrows: false,
				pagination: false,
				gap: gap === '0' ? 0 : gap,
				autoScroll: {
					speed: speed / 1000,
					autoStart: autoplay,
				},
				breakpoints: div?.getAttribute( 'data-use-breakpoints' ) === 'true' ? {
					782: {
						perPage: ( perPage ?? 3 ) / 1.5,
					},
					512: {
						perPage: ( perPage ?? 3 ) / 2,
					},
				} : {},
				direction: div?.getAttribute( 'data-direction' ) ?? 'ltr',
				height: div?.getAttribute( 'data-height' ) ?? '',
			};
		}

		new Splide( div, options ).mount( type === 'marquee' ? window?.splide?.Extensions : {} );
	}
};

document.addEventListener( 'DOMContentLoaded', initSlider );