Autoplay Options

Configure automatic slide transitions and autoplay behavior

Overview

Autoplay options control the automatic progression of slides, including timing, direction, and user interaction behavior.

Options

autoplay · boolean · default: "false"

Toggles the automatic change of slides.

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

Use the play() and pause() methods to programmatically control autoplay.

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

Controls autoplay button position.

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

autoplayTimeout · number · default: "5000"

Time between 2 autoplay slides change (in “ms”).

tns({
  container: '.my-slider',
  autoplay: true,
  autoplayTimeout: 3000 // 3 seconds
});

autoplayDirection · 'forward' | 'backward' · default: "'forward'"

Direction of slide movement (ascending/descending the slide index).

tns({
  container: '.my-slider',
  autoplay: true,
  autoplayDirection: 'backward'
});

autoplayText · string[] · default: "['start', 'stop']"

Text or markup in the autoplay start/stop button.

// Simple text
tns({
  container: '.my-slider',
  autoplay: true,
  autoplayText: ['Play', 'Pause']
});

// HTML markup
tns({
  container: '.my-slider',
  autoplay: true,
  autoplayText: [
    '<i class="fa fa-play"></i>',
    '<i class="fa fa-pause"></i>'
  ]
});

autoplayHoverPause · boolean · default: "false"

Stops sliding on mouseover.

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

This improves user experience by allowing users to pause and read content.

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

The customized autoplay start/stop button or selector.

<button id="custom-autoplay">Toggle Autoplay</button>
<div class="my-slider">
  <!-- slides -->
</div>

tns({
  container: '.my-slider',
  autoplay: true,
  autoplayButton: '#custom-autoplay'
});

autoplayButtonOutput · boolean · default: "true"

Output autoplayButton markup when autoplay is true but a customized autoplayButton is not provided.

Set to false to hide the autoplay button completely.

tns({
  container: '.my-slider',
  autoplay: true,
  autoplayButtonOutput: false // No button will be created
});

autoplayResetOnVisibility · boolean · default: "true"

Pauses the sliding when the page is invisible and resumes it when the page becomes visible again.

Uses the Page Visibility API.

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

This saves resources when users switch tabs or minimize the browser.

Configuration Examples

Basic Autoplay

tns({
  container: '.my-slider',
  items: 1,
  autoplay: true,
  autoplayTimeout: 5000,
  autoplayHoverPause: true
});

Autoplay with Custom Controls

<div class="my-slider">
  <div>Slide 1</div>
  <div>Slide 2</div>
  <div>Slide 3</div>
</div>
<button id="play-pause" class="autoplay-btn">
  <span class="play-icon">▶</span>
  <span class="pause-icon" style="display:none;">⏸</span>
</button>

var slider = tns({
  container: '.my-slider',
  autoplay: true,
  autoplayButton: '#play-pause',
  autoplayButtonOutput: false
});

// Custom toggle logic
document.getElementById('play-pause').addEventListener('click', function() {
  var playIcon = this.querySelector('.play-icon');
  var pauseIcon = this.querySelector('.pause-icon');
  
  if (playIcon.style.display !== 'none') {
    playIcon.style.display = 'none';
    pauseIcon.style.display = 'inline';
  } else {
    playIcon.style.display = 'inline';
    pauseIcon.style.display = 'none';
  }
});

Reverse Direction Autoplay

tns({
  container: '.my-slider',
  autoplay: true,
  autoplayDirection: 'backward',
  autoplayTimeout: 4000
});

Programmatic Control

var slider = tns({
  container: '.my-slider',
  autoplay: false, // Start paused
  autoplayButtonOutput: false
});

// Start autoplay on user action
document.getElementById('start-btn').addEventListener('click', function() {
  slider.play();
});

// Pause autoplay
document.getElementById('pause-btn').addEventListener('click', function() {
  slider.pause();
});

Autoplay with Hover Pause

tns({
  container: '.my-slider',
  items: 3,
  slideBy: 1,
  autoplay: true,
  autoplayTimeout: 3000,
  autoplayHoverPause: true,
  autoplayResetOnVisibility: true,
  autoplayText: ['▶', '⏸'],
  autoplayButtonOutput: true
});

Styling the Autoplay Button

/* Default autoplay button */
[data-action] {
  display: block;
  margin: 10px auto;
  padding: 10px 20px;
  background: #3399CC;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

[data-action]:hover {
  background: #2277AA;
}

/* Hide the text, show only when screen reader */
[data-action] .tns-visually-hidden {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

Responsive Configuration

Autoplay can be enabled/disabled at different breakpoints:

tns({
  container: '.my-slider',
  autoplay: false,
  autoplayTimeout: 5000,
  responsive: {
    640: {
      autoplay: true,
      autoplayHoverPause: true
    },
    900: {
      autoplayTimeout: 7000
    }
  }
});

Best Practices

1. Always Provide Controls

Always give users a way to pause autoplay:

tns({
  container: '.my-slider',
  autoplay: true,
  autoplayButtonOutput: true, // Show pause/play button
  autoplayHoverPause: true    // Pause on hover
});

2. Use Appropriate Timing

Give users enough time to read content:

tns({
  container: '.my-slider',
  autoplay: true,
  autoplayTimeout: 8000 // 8 seconds for text-heavy slides
});

3. Respect User Preferences

Pause when the tab is not visible:

tns({
  container: '.my-slider',
  autoplay: true,
  autoplayResetOnVisibility: true // Respects Page Visibility API
});

4. Accessibility Considerations

The autoplay button includes hidden text for screen readers:

<!-- Generated markup -->
<button type="button" data-action="stop">
  <span class="tns-visually-hidden">stop animation</span>
  stop
</button>

5. Performance Optimization

Disable autoplay when not needed:

tns({
  container: '.my-slider',
  autoplay: true,
  autoplayButtonOutput: false, // No button needed
  autoplayResetOnVisibility: true // Save resources when hidden
});

Events

You can listen to autoplay-related events:

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

slider.events.on('transitionStart', function(info) {
  console.log('Slide transition started');
});

slider.events.on('transitionEnd', function(info) {
  console.log('Now showing slide', info.displayIndex);
});