Skip to main content

​
Overview

Advanced options provide fine-grained control over slider behavior, including looping, animations, lazy loading, and performance optimizations.

​
Loop and Rewind

​
loop
boolean
default:"true"
Moves throughout all the slides seamlessly.Creates cloned slides at the beginning and end for infinite scrolling effect.
tns({
  container: '.my-slider',
  loop: true
});
Loop is true by default in carousel mode, false in gallery mode.
​
rewind
boolean
default:"false"
Moves to the opposite edge when reaching the first or last slide.
tns({
  container: '.my-slider',
  loop: false,
  rewind: true
});
When rewind is true, loop is automatically set to false.

​
Animation Options

​
animateIn
string
default:"'tns-fadeIn'"
Name of intro animation class (for gallery mode).
tns({
  container: '.my-slider',
  mode: 'gallery',
  animateIn: 'fadeIn'
});
​
animateOut
string
default:"'tns-fadeOut'"
Name of outro animation class (for gallery mode).
tns({
  container: '.my-slider',
  mode: 'gallery',
  animateOut: 'fadeOut'
});
​
animateNormal
string
default:"'tns-normal'"
Name of default animation class (for gallery mode).
tns({
  container: '.my-slider',
  mode: 'gallery',
  animateNormal: 'tns-normal'
});
​
animateDelay
number | false
default:"false"
Time between each gallery animation (in “ms”).
tns({
  container: '.my-slider',
  mode: 'gallery',
  animateDelay: 1000
});

​
Lazy Loading

​
lazyload
boolean
default:"false"
Enables lazyloading images that are currently not viewed, thus saving bandwidth.
tns({
  container: '.my-slider',
  lazyload: true
});
  • Class .tns-lazy-img must be set on every image you want to lazyload (or use custom lazyloadSelector)
  • data-src attribute with the real image src is required
  • width attribute is required for autoWidth sliders
​
lazyloadSelector
string
default:"'.tns-lazy-img'"
The CSS selector for lazyload images.Available since v2.9.1.
tns({
  container: '.my-slider',
  lazyload: true,
  lazyloadSelector: '.lazy'
});

​
Nested Sliders

​
nested
'inner' | 'outer' | false
default:"false"
Define the relationship between nested sliders.
// Outer slider
var outer = tns({
  container: '.outer-slider',
  nested: 'outer'
});

// Inner slider (run this first!)
var inner = tns({
  container: '.inner-slider',
  nested: 'inner'
});
Make sure you run the inner slider first, otherwise the height of the inner slider container will be wrong.

​
Performance Options

​
freezable
boolean
default:"true"
Indicate whether the slider will be frozen (controls, nav, autoplay and other functions will stop work) when all slides can be displayed in one page.
tns({
  container: '.my-slider',
  items: 3,
  freezable: true
});
When there are 3 or fewer slides and items is 3, the slider will be frozen automatically.
​
disable
boolean
default:"false"
Disable slider.
tns({
  container: '.my-slider',
  disable: false,
  responsive: {
    0: {
      disable: true // Disable on mobile
    },
    768: {
      disable: false // Enable on tablet+
    }
  }
});
​
startIndex
number
default:"0"
The initial index of the slider.
tns({
  container: '.my-slider',
  startIndex: 2 // Start at third slide
});
​
onInit
Function | false
default:"false"
Callback to be run on initialization.
tns({
  container: '.my-slider',
  onInit: function(info) {
    console.log('Slider initialized');
    console.log('Current slide:', info.index);
  }
});
​
useLocalStorage
boolean
default:"true"
Save browser capability variables to localStorage and without detecting them every time the slider runs.
tns({
  container: '.my-slider',
  useLocalStorage: true
});
This improves performance by caching browser feature detection results.
​
nonce
string | false
default:"false"
Nonce attribute for inline style tag to allow slider usage without unsafe-inline Content Security Policy source.
tns({
  container: '.my-slider',
  nonce: 'your-nonce-value'
});
​
responsive
object | false
default:"false"
Defines options for different viewport widths.
tns({
  container: '.my-slider',
  items: 1,
  responsive: {
    640: {
      items: 2
    },
    900: {
      items: 3
    }
  }
});
Breakpoints behave like (min-width: breakpoint) in CSS. Undefined options inherit from smaller breakpoints.

​
Advanced Examples

​
Lazy Loading Images

<div class="my-slider">
  <div>
    <img class="tns-lazy-img" 
         src="placeholder.jpg" 
         data-src="image1.jpg" 
         alt="Image 1">
  </div>
  <div>
    <img class="tns-lazy-img" 
         src="placeholder.jpg" 
         data-src="image2.jpg" 
         alt="Image 2">
  </div>
</div>

tns({
  container: '.my-slider',
  lazyload: true,
  items: 1,
  slideBy: 1
});

​
Custom Lazy Load Selector

<div class="my-slider">
  <div>
    <img class="lazy" 
         src="placeholder.jpg" 
         data-src="image1.jpg">
  </div>
</div>

tns({
  container: '.my-slider',
  lazyload: true,
  lazyloadSelector: '.lazy'
});

.fadeIn {
  animation: fadeIn 0.5s;
}

.fadeOut {
  animation: fadeOut 0.5s;
}

@keyframes fadeIn {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes fadeOut {
  from { opacity: 1; transform: scale(1); }
  to { opacity: 0; transform: scale(0.9); }
}

tns({
  container: '.my-slider',
  mode: 'gallery',
  animateIn: 'fadeIn',
  animateOut: 'fadeOut',
  animateDelay: 500,
  speed: 500
});

​
Nested Sliders Example

<div class="outer-slider">
  <div>
    <div class="inner-slider">
      <div>Inner Slide 1</div>
      <div>Inner Slide 2</div>
    </div>
  </div>
  <div>Outer Slide 2</div>
</div>

// IMPORTANT: Initialize inner slider first
var inner = tns({
  container: '.inner-slider',
  nested: 'inner',
  controls: false
});

var outer = tns({
  container: '.outer-slider',
  nested: 'outer'
});

​
Initialization Callback

var slider = tns({
  container: '.my-slider',
  items: 3,
  onInit: function(info) {
    console.log('Slider initialized!');
    console.log('Total slides:', info.slideCount);
    console.log('Current index:', info.index);
    console.log('Items per view:', info.items);
    
    // Custom initialization logic
    document.querySelector('.slide-counter').textContent = 
      info.displayIndex + ' / ' + info.slideCount;
  }
});

​
Responsive Disable/Enable

tns({
  container: '.my-slider',
  items: 1,
  disable: false,
  responsive: {
    0: {
      disable: true // Show as regular div on mobile
    },
    640: {
      disable: false // Enable slider on tablet
    }
  }
});

​
Content Security Policy (CSP)

// Generate nonce on server
const nonce = generateNonce();

// Add to CSP header
// Content-Security-Policy: style-src 'nonce-abc123'

tns({
  container: '.my-slider',
  nonce: 'abc123' // Match server-generated nonce
});

​
Performance Tips

​
1. Enable Local Storage

tns({
  container: '.my-slider',
  useLocalStorage: true // Cache browser capabilities
});

​
2. Use Lazy Loading for Images

tns({
  container: '.my-slider',
  lazyload: true,
  items: 3
});

​
3. Freeze When Not Needed

tns({
  container: '.my-slider',
  items: 3,
  freezable: true // Auto-disable when all slides fit
});

​
4. Disable on Mobile if Not Needed

tns({
  container: '.my-slider',
  responsive: {
    0: {
      disable: true // No slider overhead on mobile
    },
    768: {
      disable: false
    }
  }
});

​
5. Optimize Responsive Breakpoints

tns({
  container: '.my-slider',
  items: 1,
  responsive: {
    // Only define what changes
    640: { items: 2 },
    1024: { items: 3 }
  }
});

​
Complex Responsive Configuration

tns({
  container: '.my-slider',
  mode: 'carousel',
  items: 1,
  slideBy: 1,
  autoplay: false,
  controls: true,
  nav: true,
  responsive: {
    0: {
      items: 1,
      gutter: 0,
      controls: false,
      nav: true,
      autoplay: false
    },
    640: {
      items: 2,
      gutter: 20,
      controls: true,
      nav: true
    },
    900: {
      items: 3,
      gutter: 30,
      autoplay: true,
      autoplayTimeout: 5000,
      autoplayHoverPause: true
    },
    1200: {
      items: 4,
      gutter: 40
    }
  }
});

​
Optimization Checklist

  • ✅ Use lazyload for image-heavy sliders
  • ✅ Enable useLocalStorage for better performance
  • ✅ Set freezable: true to auto-disable when not needed
  • ✅ Use disable option on mobile if slider isn’t necessary
  • ✅ Implement onInit callback for custom initialization logic
  • ✅ Use nonce attribute for strict CSP environments
  • ✅ Configure startIndex to begin at a specific slide
  • ✅ Test nested sliders thoroughly (inner before outer)
  • ✅ Use responsive breakpoints efficiently
  • ✅ Consider preventActionWhenRunning to prevent spam

Build docs developers (and LLMs) love

Get started for freeTalk to us