
<template id="shop_catalog_slider_tpl">
	<div class="catalog-slider-container">
		<button class="swiper-btn swiper-btn-prev swiper-btn-white">
			<svg class="svg-icon">
				<use xlink:href="/.s/t/2301/icons/icons.svg#chevron_left"></use>
			</svg>
		</button>

		<!-- Essential for slider initialization. DO NOT REMOVE -->
		<div class="swiper catalog-slider">
			<div class="swiper-wrapper"></div>
		</div>

		<button class="swiper-btn swiper-btn-next swiper-btn-white">
			<svg class="svg-icon">
				<use xlink:href="/.s/t/2301/icons/icons.svg#chevron_right"></use>
			</svg>
		</button>
	</div>
</template>
<!-- Script for initializing the slider for shop categories. -->
<script>
	document.addEventListener('DOMContentLoaded', () => {
		const catalogBlockEl = document.querySelector('.catalog-slider');
		if (!catalogBlockEl) return;

		new Swiper(catalogBlockEl, {
			spaceBetween: 8,
			slidesPerView: 'auto',
			mousewheel: {
				forceToAxis: true,
				sensitivity: 1,
			},
			freeMode: {
				enabled: true,
				sticky: false,
				momentumBounce: false,
			},
			grabCursor: true,
			navigation: {
				enabled: true,
				nextEl: '.catalog-slider-container .swiper-btn-next',
				prevEl: '.catalog-slider-container .swiper-btn-prev',
			},
		});
	});
</script>
