Interaction Options

Configure touch, drag, and user interaction behavior

Overview

Interaction options control how users can interact with the slider through touch gestures, mouse dragging, and other input methods.

Options

touch · boolean · default: "true"

Activates input detection for touch devices.

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

Touch is enabled by default for better mobile experience.

mouseDrag · boolean · default: "false"

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.

preventActionWhenRunning · boolean · default: "false"

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 scrolling
• false: 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
    }
  }
});

Preventing Scroll Conflicts

For horizontal sliders in scrollable pages:

tns({
  container: '.my-slider',
  axis: 'horizontal',
  touch: true,
  preventScrollOnTouch: 'auto', // Smart detection
  swipeAngle: 15
});

For vertical sliders:

tns({
  container: '.my-slider',
  axis: 'vertical',
  touch: true,
  preventScrollOnTouch: 'force', // Prevent vertical scroll interference
  swipeAngle: false
});

Advanced Examples

High-Performance Configuration

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

2. Smart Scroll Prevention

Use '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
});