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
Interaction options control how users can interact with the slider through touch gestures, mouse dragging, and other input methods.
Options
Activates input detection for touch devices.tns({
container: '.my-slider',
touch: true
});
Touch is enabled by default for better mobile experience.
Changing slides by dragging them with mouse.tns({
container: '.my-slider',
mouseDrag: true
});
This is disabled by default. Enable it for desktop drag interaction.
swipeAngle
number | boolean
default:"15"
Swipe or drag will not be triggered if the angle is not inside the range when set.Set to false to disable angle detection.tns({
container: '.my-slider',
swipeAngle: 30 // Wider angle tolerance
});
// Disable angle detection
tns({
container: '.my-slider',
swipeAngle: false
});
This helps prevent accidental swipes when scrolling vertically on mobile.
Prevent next transition while slider is transforming.Available since v2.9.1.tns({
container: '.my-slider',
preventActionWhenRunning: true
});
Enable this to prevent interaction spam and ensure smooth transitions.
preventScrollOnTouch
'auto' | 'force' | false
default:"false"
Prevent page from scrolling on touchmove.
'auto': The slider will first check if the touch direction matches the slider axis, then decide whether to prevent page scrolling'force': The slider will always prevent page scrollingfalse: Don’t prevent page scrolling
Available since v2.9.1.// Auto-detect scroll direction
tns({
container: '.my-slider',
preventScrollOnTouch: 'auto'
});
// Always prevent scroll
tns({
container: '.my-slider',
preventScrollOnTouch: 'force'
});
Use 'force' carefully as it may interfere with vertical scrolling on the page.
Touch and Drag Behavior
Basic Touch Configuration
Default mobile-friendly setup:
tns({
container: '.my-slider',
touch: true,
mouseDrag: false,
swipeAngle: 15
});
Desktop Drag Support
Enable dragging on desktop:
tns({
container: '.my-slider',
touch: true,
mouseDrag: true,
swipeAngle: 15,
preventActionWhenRunning: true
});
Vertical Slider Configuration
For vertical sliders, adjust swipe angle:
tns({
container: '.my-slider',
axis: 'vertical',
touch: true,
swipeAngle: false, // Or a wider angle like 30
preventScrollOnTouch: 'auto'
});
Mobile Considerations
Optimal Mobile Settings
tns({
container: '.my-slider',
// Touch interactions
touch: true,
mouseDrag: false,
swipeAngle: 15,
// Prevent interference
preventScrollOnTouch: 'auto',
preventActionWhenRunning: true,
// Mobile-friendly navigation
controls: false,
nav: true,
navPosition: 'bottom'
});
Responsive Touch Behavior
tns({
container: '.my-slider',
touch: true,
mouseDrag: false,
responsive: {
640: {
mouseDrag: true, // Enable drag on tablets
controls: true
},
1024: {
touch: true,
mouseDrag: true // Full interaction on desktop
}
}
});
tns({
container: '.my-slider',
axis: 'horizontal',
touch: true,
preventScrollOnTouch: 'auto', // Smart detection
swipeAngle: 15
});
tns({
container: '.my-slider',
axis: 'vertical',
touch: true,
preventScrollOnTouch: 'force', // Prevent vertical scroll interference
swipeAngle: false
});
Advanced Examples
Prevent rapid interactions:
var slider = tns({
container: '.my-slider',
touch: true,
mouseDrag: true,
preventActionWhenRunning: true,
speed: 400
});
Full-Page Slider
Take over scroll completely:
tns({
container: '.fullpage-slider',
axis: 'vertical',
touch: true,
mouseDrag: true,
preventScrollOnTouch: 'force',
swipeAngle: false,
controls: false,
nav: true
});
Nested Sliders
Configure parent and child differently:
// Parent slider (vertical)
var parent = tns({
container: '.parent-slider',
mode: 'gallery',
axis: 'vertical',
touch: true,
swipeAngle: false,
nested: 'outer'
});
// Child slider (horizontal)
var child = tns({
container: '.child-slider',
axis: 'horizontal',
touch: true,
swipeAngle: 15,
preventScrollOnTouch: 'auto',
nested: 'inner'
});
Custom Gesture Handling
While tiny-slider handles most touch interactions automatically, you can listen to drag events:
var slider = tns({
container: '.my-slider',
touch: true,
mouseDrag: true
});
slider.events.on('dragStart', function(info) {
console.log('Drag started');
});
slider.events.on('dragMove', function(info) {
console.log('Dragging...');
});
slider.events.on('dragEnd', function(info) {
console.log('Drag ended');
});
Responsive Configuration
Adjust interaction behavior at different breakpoints:
tns({
container: '.my-slider',
touch: true,
mouseDrag: false,
swipeAngle: 15,
responsive: {
0: {
touch: true,
mouseDrag: false,
preventScrollOnTouch: 'auto'
},
768: {
touch: true,
mouseDrag: true
},
1024: {
touch: true,
mouseDrag: true,
preventActionWhenRunning: true
}
}
});
Best Practices
1. Mobile-First Approach
Always enable touch for mobile devices:
tns({
container: '.my-slider',
touch: true,
swipeAngle: 15
});
'auto' for most cases:
tns({
container: '.my-slider',
preventScrollOnTouch: 'auto'
});
3. Prevent Interaction Spam
Enable action prevention during transitions:
tns({
container: '.my-slider',
preventActionWhenRunning: true
});
4. Test on Real Devices
Touch behavior can differ between devices. Always test on:
- iOS devices (iPhone, iPad)
- Android devices (various manufacturers)
- Tablets with touch screens
- Desktop with touch displays
5. Consider User Context
// Image gallery - draggable everywhere
tns({
container: '.gallery',
touch: true,
mouseDrag: true
});
// Text-heavy slides - careful with drag to allow text selection
tns({
container: '.content-slider',
touch: true,
mouseDrag: false, // Prevent interfering with text selection
controls: true
});
Accessibility
When enabling touch/drag, ensure alternative navigation methods:
tns({
container: '.my-slider',
touch: true,
mouseDrag: true,
// Provide alternative controls
controls: true,
nav: true,
arrowKeys: true
});
