Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/ganlanyuan/tiny-slider/llms.txt

Use this file to discover all available pages before exploring further.

​
Overview

The TinySliderInfo object contains comprehensive information about the current state of the slider. You can access it via:
  1. The getInfo() method
  2. Event callback parameters
const slider = tns({ container: '.my-slider' });

// Method 1: Using getInfo()
const info = slider.getInfo();
console.log('Current index:', info.index);

// Method 2: Event callbacks
slider.events.on('indexChanged', function(info) {
  console.log('Current index:', info.index);
});

​
Interface Definition

interface TinySliderInfo {
  event: Event | {};
  container: HTMLElement;
  slideItems: HTMLCollection;
  navContainer?: HTMLElement;
  navItems?: HTMLCollection;
  controlsContainer?: HTMLElement;
  hasControls: boolean;
  prevButton?: HTMLElement;
  nextButton?: HTMLElement;
  items: number;
  slideBy: number;
  cloneCount: number;
  slideCount: number;
  slideCountNew: number;
  index: number;
  indexCached: number;
  displayIndex: number;
  navCurrentIndex?: number;
  navCurrentIndexCached?: number;
  pages?: number;
  pagesCached?: number;
  sheet: CSSStyleSheet;
  isOn: boolean;
}

​
Properties

​
event

​
event
Event | {}
The browser event object that triggered this info update, or an empty object if not triggered by an event.
slider.events.on('indexChanged', function(info) {
  console.log('Event type:', info.event.type);
});

​
container

​
container
HTMLElement
required
The main slider container element.
const info = slider.getInfo();
console.log('Container ID:', info.container.id);
console.log('Container width:', info.container.offsetWidth);

​
slideItems

​
slideItems
HTMLCollection
required
A live HTMLCollection of all slide elements (including clones in carousel mode).
const info = slider.getInfo();
console.log('Total slides:', info.slideItems.length);

// Access current slide
const currentSlide = info.slideItems[info.index];
console.log('Current slide HTML:', currentSlide.innerHTML);

​
index

​
index
number
required
The current slide index (zero-based). This is the index of the first visible slide.
const info = slider.getInfo();
console.log('Current slide index:', info.index);
console.log('Current slide (1-based):', info.index + 1);

// Check if at first slide
if (info.index === 0) {
  console.log('At first slide');
}

// Check if at last slide
if (info.index === info.slideCount - 1) {
  console.log('At last slide');
}

​
indexCached

​
indexCached
number
required
The previous slide index (before the current transition). Useful for comparing before/after states.
slider.events.on('indexChanged', function(info) {
  console.log('Moved from slide', info.indexCached, 'to slide', info.index);
  
  const direction = info.index > info.indexCached ? 'forward' : 'backward';
  console.log('Direction:', direction);
});

​
slideCount

​
slideCount
number
required
The original number of slides (before cloning for carousel mode).
const info = slider.getInfo();
console.log('Total slides:', info.slideCount);
console.log('Progress:', `${info.index + 1} / ${info.slideCount}`);

​
slideCountNew

​
slideCountNew
number
required
The total number of slides after initialization, including clones created for carousel mode.
const info = slider.getInfo();
console.log('Original slides:', info.slideCount);
console.log('Total slides (with clones):', info.slideCountNew);
console.log('Cloned slides:', info.cloneCount);

​
cloneCount

​
cloneCount
number
required
The number of cloned slides created for seamless looping in carousel mode.
const info = slider.getInfo();
if (info.cloneCount > 0) {
  console.log('Carousel mode with', info.cloneCount, 'clones');
}

​
items

​
items
number
required
The number of slides currently visible in the viewport.
const info = slider.getInfo();
console.log('Visible slides:', info.items);

// Calculate how many pages
const totalPages = Math.ceil(info.slideCount / info.items);
console.log('Total pages:', totalPages);

​
slideBy

​
slideBy
number
required
The number of slides that move on each navigation action.
const info = slider.getInfo();
console.log('Slides per action:', info.slideBy);

if (info.slideBy === info.items) {
  console.log('Moving one full page at a time');
}

​
hasControls

​
hasControls
boolean
required
Indicates whether the slider has prev/next control buttons.
const info = slider.getInfo();
if (info.hasControls) {
  console.log('Controls are enabled');
}

​
controlsContainer

​
controlsContainer
HTMLElement | undefined
The HTMLElement that contains the prev/next control buttons, if using a custom controls container.
const info = slider.getInfo();
if (info.controlsContainer) {
  console.log('Using custom controls container:', info.controlsContainer);
}

​
prevButton

​
prevButton
HTMLElement | undefined
The previous button element, if controls are enabled.
const info = slider.getInfo();
if (info.prevButton) {
  console.log('Prev button:', info.prevButton);
  
  // Check if disabled
  if (info.prevButton.disabled) {
    console.log('Prev button is disabled');
  }
}

​
nextButton

​
nextButton
HTMLElement | undefined
The next button element, if controls are enabled.
const info = slider.getInfo();
if (info.nextButton) {
  console.log('Next button:', info.nextButton);
  
  // Add custom event
  info.nextButton.addEventListener('click', () => {
    console.log('Next button clicked');
  });
}
​
navContainer
HTMLElement | undefined
The navigation dots container element, if nav is enabled.
const info = slider.getInfo();
if (info.navContainer) {
  console.log('Nav container:', info.navContainer);
}
​
navItems
HTMLCollection | undefined
A live HTMLCollection of navigation dot elements.
const info = slider.getInfo();
if (info.navItems) {
  console.log('Number of nav dots:', info.navItems.length);
  
  // Find active dot
  Array.from(info.navItems).forEach((dot, index) => {
    if (dot.classList.contains('tns-nav-active')) {
      console.log('Active dot index:', index);
    }
  });
}
​
navCurrentIndex
number | undefined
The current active navigation dot index.
slider.events.on('indexChanged', function(info) {
  if (info.navCurrentIndex !== undefined) {
    console.log('Active nav dot:', info.navCurrentIndex);
  }
});
​
navCurrentIndexCached
number | undefined
The previous active navigation dot index.
slider.events.on('indexChanged', function(info) {
  console.log('Nav changed from', info.navCurrentIndexCached, 'to', info.navCurrentIndex);
});

​
displayIndex

​
displayIndex
number
required
The current slide index for display purposes (1-based instead of 0-based).
const info = slider.getInfo();
console.log('Slide ' + info.displayIndex + ' of ' + info.slideCount);

​
pages

​
pages
number | undefined
The number of visible navigation pages/dots.
const info = slider.getInfo();
if (info.pages !== undefined) {
  console.log('Visible nav pages:', info.pages);
}

​
pagesCached

​
pagesCached
number | undefined
The previous number of visible navigation pages/dots.
const info = slider.getInfo();
console.log('Previous visible nav pages:', info.pagesCached);

​
sheet

​
sheet
CSSStyleSheet
required
The CSSStyleSheet object used by the slider for dynamic styles.
const info = slider.getInfo();
console.log('Stylesheet:', info.sheet);

​
isOn

​
isOn
boolean
required
Indicates whether the slider is currently active/initialized.
const info = slider.getInfo();
if (info.isOn) {
  console.log('Slider is active');
}

​
Usage Examples

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

const info = slider.getInfo();

console.log('Current slide:', info.index + 1);
console.log('Total slides:', info.slideCount);
console.log('Visible items:', info.items);
console.log('Slide by:', info.slideBy);

​
Common Patterns

​
Display Current Position

function displayPosition() {
  const info = slider.getInfo();
  return `${info.index + 1} / ${info.slideCount}`;
}

​
Calculate Pages

function getTotalPages() {
  const info = slider.getInfo();
  return Math.ceil(info.slideCount / info.items);
}

function getCurrentPage() {
  const info = slider.getInfo();
  return Math.floor(info.index / info.items) + 1;
}

​
Check Boundaries

function isAtStart() {
  const info = slider.getInfo();
  return info.index === 0;
}

function isAtEnd() {
  const info = slider.getInfo();
  return info.index >= info.slideCount - info.items;
}

​
Get Visible Slides

function getVisibleSlides() {
  const info = slider.getInfo();
  const visible = [];
  
  for (let i = 0; i < info.items; i++) {
    const slideIndex = info.index + i;
    if (slideIndex < info.slideCount) {
      visible.push(info.slideItems[slideIndex]);
    }
  }
  
  return visible;
}

​
Tips

The info object is always current and reflects the latest slider state. You don’t need to cache it - just call getInfo() whenever you need fresh data.
slideItems is a live HTMLCollection. If you modify the DOM, the collection updates automatically. Convert to an array if you need a static snapshot: Array.from(info.slideItems).
When working with events, always use the info parameter passed to your callback instead of calling getInfo() separately - it’s more efficient and guaranteed to match the event state.

Build docs developers (and LLMs) love

Get started for freeTalk to us