Overview The basic carousel is the most common use case for Tiny Slider. It displays multiple items in a row, allows users to navigate through slides using prev/next buttons and navigation dots, and supports keyboard navigation.
Complete Example <! DOCTYPE html > < html > < head > < link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.4/tiny-slider.css" > < style > .my-slider { margin : 0 auto ; max-width : 900 px ; } .my-slider img { width : 100 % ; height : auto ; } .slide-item { padding : 10 px ; background : #f5f5f5 ; text-align : center ; } </ style > </ head > < body > < div class = "my-slider" > < div class = "slide-item" > < img src = "slide1.jpg" alt = "Slide 1" > < h3 > Slide 1 </ h3 > </ div > < div class = "slide-item" > < img src = "slide2.jpg" alt = "Slide 2" > < h3 > Slide 2 </ h3 > </ div > < div class = "slide-item" > < img src = "slide3.jpg" alt = "Slide 3" > < h3 > Slide 3 </ h3 > </ div > < div class = "slide-item" > < img src = "slide4.jpg" alt = "Slide 4" > < h3 > Slide 4 </ h3 > </ div > < div class = "slide-item" > < img src = "slide5.jpg" alt = "Slide 5" > < h3 > Slide 5 </ h3 > </ div > </ div > < script src = "https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.4/min/tiny-slider.js" ></ script > </ body > </ html >
Key Options Explained items Number of slides visible in the viewport at once. Default is 1.
slideBy Moves all visible items at once. Can also be a number like slideBy: 1 to move one slide at a time.
controls controls : true , controlsText : [ '←' , '→' ]
Enables prev/next buttons. Customize button text with controlsText array.
nav nav : true , navPosition : 'bottom'
Enables navigation dots. Position can be 'top' or 'bottom' (default: 'top').
gutter Adds space between slides in pixels. Default is 0.
loop Enables infinite looping. Seamlessly moves from last slide to first. Default is true.
speed Transition speed in milliseconds. Default is 300.
When loop: true, the slider clones slides to create a seamless infinite effect. If you prefer to stop at the edges, use rewind: true instead.
Interactive Features Mouse Drag Enables dragging slides with mouse. Works great for desktop users. Default is false.
Touch Support Touch/swipe support is enabled by default for mobile devices.
Arrow Keys Allows users to navigate with keyboard arrow keys. Default is false.
For better accessibility, enable arrowKeys: true. When a control button is focused, users can navigate using arrow keys.
Customization Options Edge Padding Adds space on the outside of the slider in pixels.
Start Index Start at a specific slide (0-based index).
Rewind Mode loop : false , rewind : true
Instead of looping, jump back to the opposite edge when reaching the end.
Working with Slider Methods var slider = tns ({ container: '.my-slider' , items: 3 }); // Get slider information var info = slider . getInfo (); console . log ( info . index ); // current slide index console . log ( info . slideCount ); // total slides // Navigate programmatically slider . goTo ( 5 ); // Go to slide 5 slider . goTo ( 'next' ); // Next slide slider . goTo ( 'prev' ); // Previous slide slider . goTo ( 'first' ); // First slide slider . goTo ( 'last' ); // Last slide // Destroy slider slider . destroy (); // Rebuild slider slider = slider . rebuild ();
Events var slider = tns ({ container: '.my-slider' , items: 3 }); // Listen to index change slider . events . on ( 'indexChanged' , function ( info ) { console . log ( 'Current slide:' , info . index ); }); // Listen to transition end slider . events . on ( 'transitionEnd' , function ( info ) { console . log ( 'Transition finished' ); });
Responsive Slider Adapt items count for different screen sizes
Autoplay Automatically advance slides
Custom Controls Use your own buttons and navigation
Lazy Loading Load images as they come into view
