Skip to main content

​
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);
});

Build docs developers (and LLMs) love

Get started for freeTalk to us