Skip to main content

​
Overview

When you initialize a slider with tns(), it returns a TinySliderInstance object with methods and properties to control the slider programmatically. 
const slider = tns({
  container: '.my-slider',
  items: 3
});

// Use methods
slider.goTo(5);
slider.play();
const info = slider.getInfo();

​
Instance Methods

​
getInfo()

Get information about the current slider state. 
getInfo(): TinySliderInfo
Returns: TinySliderInfo object containing all slider state information. Example: 
const slider = tns({
  container: '.my-slider',
  items: 3
});

const info = slider.getInfo();
console.log('Current index:', info.index);
console.log('Total slides:', info.slideCount);
console.log('Items per page:', info.items);
Practical Usage: 
document.querySelector('.next-button').onclick = function () {
  const info = slider.getInfo();
  const indexPrev = info.indexCached;
  const indexCurrent = info.index;

  // Update style based on index
  info.slideItems[indexPrev].classList.remove('active');
  info.slideItems[indexCurrent].classList.add('active');
};

​
goTo()

Navigate to a specific slide by number or keyword. 
goTo(target: number | 'next' | 'prev' | 'first' | 'last'): void
Parameters:
​
target
number | 'next' | 'prev' | 'first' | 'last'
required
The slide to navigate to:
  • number: Zero-based slide index
  • 'next': Next slide
  • 'prev': Previous slide
  • 'first': First slide
  • 'last': Last slide
Examples: 
slider.goTo(3);  // Go to 4th slide (zero-based)
slider.goTo(0);  // Go to first slide

​
play()

Programmatically start slider autoplay. 
play(): void
Only works when the slider is initialized with autoplay: true.
Example: 
const slider = tns({
  container: '.my-slider',
  items: 3,
  autoplay: true
});

// Start autoplay
slider.play();
Practical Usage: 
const playButton = document.querySelector('.custom-play');
const pauseButton = document.querySelector('.custom-pause');

playButton.addEventListener('click', () => {
  slider.play();
  playButton.style.display = 'none';
  pauseButton.style.display = 'block';
});

​
pause()

Programmatically stop slider autoplay. 
pause(): void
Only works when the slider is initialized with autoplay: true.
Example: 
const slider = tns({
  container: '.my-slider',
  items: 3,
  autoplay: true
});

// Stop autoplay
slider.pause();
Practical Usage: 
const pauseButton = document.querySelector('.custom-pause');

pauseButton.addEventListener('click', () => {
  slider.pause();
});

​
updateSliderHeight()

Manually adjust slider height when using autoHeight: true. 
updateSliderHeight(): void
Only useful when the slider is initialized with autoHeight: true.
Example: 
const slider = tns({
  container: '.my-slider',
  autoHeight: true
});

// Manually update height
slider.updateSliderHeight();
Practical Usage: 
// Load dynamic content into slide
fetch('/api/slide-content')
  .then(response => response.text())
  .then(html => {
    document.querySelector('.current-slide').innerHTML = html;
    // Update slider height to accommodate new content
    slider.updateSliderHeight();
  });

​
refresh()

Reinitialize the slider transform calculations. Useful when the slider container dimensions change. 
refresh(): void
Example: 
slider.refresh();
Practical Usage: 
let resizeTimeout;
window.addEventListener('resize', () => {
  clearTimeout(resizeTimeout);
  resizeTimeout = setTimeout(() => {
    slider.refresh();
  }, 250);
});

​
destroy()

Completely destroy the slider instance and remove all event listeners. 
destroy(): void
Example: 
slider.destroy();
What happens:
  • Removes all event listeners
  • Removes generated controls, nav, and autoplay buttons
  • Removes inline styles from slides
  • Restores original HTML structure
  • Frees up memory
Practical Usage: 
// Single Page Application cleanup
function leavePage() {
  if (slider) {
    slider.destroy();
    slider = null;
  }
}

​
rebuild()

Rebuild the slider after destroying it. Returns a new slider instance with the same options. 
rebuild(): TinySliderInstance
Returns: A new TinySliderInstance with the original configuration. Example: 
slider = slider.rebuild();
Practical Usage: 
function resetSlider() {
  // Rebuilding resets to initial state
  slider = slider.rebuild();
}

​
Instance Properties

​
version

Tiny-slider version number. 
version: number
Example: 
console.log('Tiny-slider version:', slider.version);
// Output: 2.9.4

​
isOn

Boolean indicating if the slider is active. 
isOn: boolean
Example: 
if (slider.isOn) {
  console.log('Slider is active');
} else {
  console.log('Slider is frozen or disabled');
}

​
events

Event controller object for subscribing to and unsubscribing from slider events. 
events: {
  on(event: SilderEvent, cb: (info: TinySliderInfo) => any): void;
  off(event: SilderEvent, cb: (info: TinySliderInfo) => any): void;
}
See Events for complete event documentation. Example: 
function onSlideChange(info) {
  console.log('Slide changed to:', info.index);
}

// Subscribe
slider.events.on('indexChanged', onSlideChange);

// Unsubscribe
slider.events.off('indexChanged', onSlideChange);

​
Method Chaining

Methods that don’t return values can be chained (though not all methods support this pattern): 
// These don't return values, so chaining isn't supported
slider.goTo('next');
slider.play();

// But you can call methods in sequence
slider.goTo(0);
slider.play();

​
Complete Instance Interface

interface TinySliderInstance {
  // Properties
  version: number;
  isOn: boolean;
  events: {
    on(event: SilderEvent, cb: (info: TinySliderInfo) => any): void;
    off(event: SilderEvent, cb: (info: TinySliderInfo) => any): void;
  };
  
  // Methods
  getInfo(): TinySliderInfo;
  goTo(target: number | 'next' | 'prev' | 'first' | 'last'): void;
  play(): void;
  pause(): void;
  updateSliderHeight(): void;
  refresh(): void;
  destroy(): void;
  rebuild(): TinySliderInstance;
}

​
Usage Examples

const slider = tns({
  container: '.my-slider',
  items: 3,
  autoplay: true
});

// Control buttons
document.getElementById('prev').onclick = () => slider.goTo('prev');
document.getElementById('next').onclick = () => slider.goTo('next');
document.getElementById('play').onclick = () => slider.play();
document.getElementById('pause').onclick = () => slider.pause();

Build docs developers (and LLMs) love

Get started for freeTalk to us