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.
<!-- 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>