Set Theme Color
Icon Border Stroke
Layout Section Light/Dark
More App Settings

Tiny slider

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" style="height: 100px; background-color: var(--theme-color1);"><h4>1</h4></div>
<div class="item p-3 text-light" style="height: 100px; background-color: var(--theme-color2);"><h4>2</h4></div>
<div class="item p-3 text-light" 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>