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
Autoplay options control the automatic progression of slides, including timing, direction, and user interaction behavior.
Options
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'
});
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>'
]
});
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'
});
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
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
});
/* 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>
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);
});
