Here's an example of Tiny Slider with custom navigation buttons and a variety of additional options. For more info, please visit the official website.

1

2

3

4

6

7

8

9

10

11

<!-- HTML -->
<div class="my-slider">
	<div class="item p-3 text-light rounded-4" style="height: 100px; background-color: var(--theme-color1);"><h4>1</h4></div>
	<div class="item p-3 text-light rounded-4" style="height: 100px; background-color: var(--theme-color2);"><h4>2</h4></div>
	<div class="item p-3 text-light rounded-4" style="height: 100px; background-color: var(--theme-color3);"><h4>3</h4></div>
</div>

<!-- JavaScript -->
<script >
	var slider = tns({
		container: '.my-slider',
		slideBy: "page",
		mouseDrag: true,
		swipeAngle: false,
		speed: 2000,
		nav: false,
		autoplay: true,
		controls: false,
		autoplayButtonOutput: false,
		responsive: {
			1024: {
				items: 3,
			}
		},
	});
</script>
Template Setting
Set Theme Color
Template Layouts
Icon Border Stroke
Layout Section Ligh/Dark
More App Setting