Navigation Options

Configure navigation dots and keyboard navigation

Overview

Navigation options control the display and behavior of navigation dots (pagination) and keyboard arrow key navigation.

Options

nav · boolean · default: "true"

Controls the display and functionalities of nav components (dots).

If true, display the nav and add all functionalities.

tns({
  container: '.my-slider',
  nav: true
});

navPosition · 'top' | 'bottom' · default: "'top'"

Controls nav position.

tns({
  container: '.my-slider',
  nav: true,
  navPosition: 'bottom'
});

navContainer · HTMLElement | string | false · default: "false"

The container element/selector around the dots.

navContainer must have at least same number of children as the slides.

<div class="my-slider">
  <div>Slide 1</div>
  <div>Slide 2</div>
  <div>Slide 3</div>
</div>
<ul class="thumbnails">
  <li><img src="thumb1.jpg"></li>
  <li><img src="thumb2.jpg"></li>
  <li><img src="thumb3.jpg"></li>
</ul>

tns({
  container: '.my-slider',
  navContainer: '.thumbnails',
  navAsThumbnails: true
});

navAsThumbnails · boolean · default: "false"

Indicate if the dots are thumbnails.

If true, they will always be visible even when more than 1 slide is displayed in the viewport.

tns({
  container: '.my-slider',
  navContainer: '.thumbnails',
  navAsThumbnails: true
});

arrowKeys · boolean · default: "false"

Allows using arrow keys to switch slides.

tns({
  container: '.my-slider',
  arrowKeys: true
});

When a control button is focused, arrow keys will work regardless of this option setting.

Customizing Navigation Dots

Basic Custom Styling

/* Nav container */
.tns-nav {
  text-align: center;
  margin: 10px 0;
}

/* Nav buttons */
.tns-nav button {
  width: 12px;
  height: 12px;
  padding: 0;
  margin: 0 5px;
  border-radius: 50%;
  background: #ddd;
  border: 0;
}

/* Active nav button */
.tns-nav button.tns-nav-active {
  background: #999;
}

Custom Navigation Container

<div class="my-slider">
  <div>Slide 1</div>
  <div>Slide 2</div>
  <div>Slide 3</div>
</div>

<div class="custom-nav">
  <button class="nav-item"></button>
  <button class="nav-item"></button>
  <button class="nav-item"></button>
</div>

tns({
  container: '.my-slider',
  navContainer: '.custom-nav'
});

Thumbnail Navigation

Use images as navigation:

<div class="slider">
  <div><img src="slide1.jpg" alt="Slide 1"></div>
  <div><img src="slide2.jpg" alt="Slide 2"></div>
  <div><img src="slide3.jpg" alt="Slide 3"></div>
</div>

<div class="thumbnail-nav">
  <button><img src="thumb1.jpg" alt="Thumbnail 1"></button>
  <button><img src="thumb2.jpg" alt="Thumbnail 2"></button>
  <button><img src="thumb3.jpg" alt="Thumbnail 3"></button>
</div>

tns({
  container: '.slider',
  navContainer: '.thumbnail-nav',
  navAsThumbnails: true
});

.thumbnail-nav button {
  border: 2px solid transparent;
  padding: 0;
  opacity: 0.7;
  transition: all 0.3s;
}

.thumbnail-nav button.tns-nav-active {
  border-color: #3399CC;
  opacity: 1;
}

.thumbnail-nav img {
  display: block;
  width: 80px;
  height: 60px;
  object-fit: cover;
}

Examples

Navigation with Arrow Keys

tns({
  container: '.my-slider',
  nav: true,
  navPosition: 'bottom',
  arrowKeys: true
});

Disable Navigation on Mobile

tns({
  container: '.my-slider',
  nav: false,
  responsive: {
    768: {
      nav: true
    }
  }
});

Text-Based Navigation

<div class="my-slider">
  <div>Slide 1</div>
  <div>Slide 2</div>
  <div>Slide 3</div>
</div>

<div class="text-nav">
  <button>First</button>
  <button>Second</button>
  <button>Third</button>
</div>

tns({
  container: '.my-slider',
  navContainer: '.text-nav'
});

.text-nav button {
  padding: 8px 16px;
  margin: 0 4px;
  background: #f0f0f0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.text-nav button.tns-nav-active {
  background: #3399CC;
  color: white;
}

Accessibility

Tiny Slider automatically adds appropriate ARIA attributes to navigation:

<!-- Generated markup -->
<div class="tns-nav" aria-label="Carousel Pagination">
  <button type="button" 
          data-nav="0" 
          tabindex="-1" 
          aria-controls="tns1" 
          aria-label="Carousel Page 1">
  </button>
  <button type="button" 
          data-nav="1" 
          aria-controls="tns1" 
          aria-label="Carousel Page 2 (Current Slide)" 
          class="tns-nav-active">
  </button>
</div>

Navigation dots include:

• aria-label indicating the page number
• aria-controls pointing to the slider
• Current slide indication in the label
• tabindex management for keyboard navigation

Responsive Configuration

Navigation options can be adjusted at different breakpoints:

tns({
  container: '.my-slider',
  items: 1,
  nav: true,
  arrowKeys: false,
  responsive: {
    640: {
      items: 2,
      nav: true
    },
    900: {
      items: 3,
      nav: false,
      arrowKeys: true
    }
  }
});

Best Practices

1. Always provide navigation: Either dots, arrows, or both for better UX
2. Consider mobile users: Touch swipe may be enough on mobile, hide dots to save space
3. Thumbnails: Use navAsThumbnails for image galleries to provide visual preview
4. Keyboard navigation: Enable arrowKeys for accessibility
5. Contrast: Ensure nav dots have sufficient contrast against the background