Slider met alleen CSS

<div class="container py-4">
	<div class="your_class_name">
		<div class="g_card">1</div>
		<div class="g_card">2</div>
		<div class="g_card">3</div>
		<div class="g_card">4</div>		
		<div class="g_card">5</div>
		<div class="g_card">6</div>
		<div class="g_card">7</div>		
		<div class="g_card">8</div>
		<div class="g_card">9</div>
		<div class="g_card">10</div>
	</div>
</div>

@default_per_page: 3;

.g_slide {
	.g_slide();
}

.g_slide(@per_page: @default_per_page) {
	@per_page_percent: (100% / @per_page);
	@gap_adjustment: (1 - (1rem / @per_page));
	.d-flex;
	flex-wrap: nowrap; // Prevent wrapping

	width: 100%;
	gap: 1em;	
	
	overflow-x: auto;
	scroll-behavior: smooth;
	anchor-name: --slide-container;
	scroll-snap-type: x mandatory;
	scroll-marker-group: after;
	&::-webkit-scrollbar {
		.d-none;
	}
	&::scroll-marker-group {
		.d-flex;
		.justify-center;
		gap: 0.5em;
		margin-top: 0.5em;
	}
	
	&::scroll-button(right), &::scroll-button(left) {
		.btn;
		content: '>';
		position: fixed;
		position-anchor: --slide-container;
		position-area: right center;
		translate: -50%;
		&:disabled {
			opacity: 0.5;
			cursor: auto;
		}
	}
	&::scroll-button(left) {
		content: '<';
		position-area: left center;
		translate: 50%;
	}
	
	.g_card {
		scroll-snap-align: start;
		width: ~"calc(@{per_page_percent} - @{gap_adjustment})";
		flex-shrink: 0; 
		@media screen and (max-width: @screen_sm) {
			width: 100%;
			flex: 0 0 100%;
		}
		&::scroll-marker {
			content: '';
			height: 0.75em;
			width: 0.75em;
			background-color: @grey_clr;
			border-radius: 50%;
			&:target-current {
				background-color: @main_clr;
			}
		}
	}
}
.g_card {
	.bg-grey;
	.bradius;
	.center;
	min-height: 500px;
}


.your_class_name {
	.g_slide(3);
	@media screen and (max-width: @screen_lg) {
		.g_slide(2); // 2 slides per page on smaller screens
	}
}