Skip to main content

​
Overview

Layout options control the fundamental structure and appearance of your slider, including mode, axis, dimensions, and spacing.

​
Options

​
mode
'carousel' | 'gallery'
default:"'carousel'"
Controls animation behaviour.With carousel everything slides to the side, while gallery uses fade animations and changes all slides at once.
tns({
  container: '.my-slider',
  mode: 'gallery'
});
​
axis
'horizontal' | 'vertical'
default:"'horizontal'"
The axis of the slider.
tns({
  container: '.my-slider',
  axis: 'vertical'
});
In gallery mode, axis is always horizontal.
​
items
number
default:"1"
Number of slides being displayed in the viewport.If slides less or equal than items, the slider won’t be initialized.
tns({
  container: '.my-slider',
  items: 3
});
​
gutter
number
default:"0"
Space between slides (in “px”).
tns({
  container: '.my-slider',
  items: 3,
  gutter: 20
});
​
edgePadding
number
default:"0"
Space on the outside (in “px”).
tns({
  container: '.my-slider',
  edgePadding: 50
});
Not available in gallery mode.
​
fixedWidth
number | false
default:"false"
Controls width attribute of the slides.
tns({
  container: '.my-slider',
  fixedWidth: 300
});
Cannot be used with autoWidth.
​
autoWidth
boolean
default:"false"
If true, the width of each slide will be its natural width as an inline-block box.
tns({
  container: '.my-slider',
  autoWidth: true
});
When using autoWidth with lazyload, the width attribute is required for every image.
​
viewportMax
number | false
default:"false"
Maximum viewport width for fixedWidth/autoWidth.Previously called fixedWidthViewportWidth.
tns({
  container: '.my-slider',
  fixedWidth: 300,
  viewportMax: 900
});
​
slideBy
number | 'page'
default:"1"
Number of slides going on one “click”.
// Slide by 2 items
tns({
  container: '.my-slider',
  items: 3,
  slideBy: 2
});

// Slide by page
tns({
  container: '.my-slider',
  items: 3,
  slideBy: 'page'
});
In gallery mode, slideBy is always ‘page’.
​
center
boolean
default:"false"
Center the active slide in the viewport.Available since v2.9.2.
tns({
  container: '.my-slider',
  items: 3,
  center: true
});
Only works in carousel mode with horizontal axis.
​
autoHeight
boolean
default:"false"
Height of slider container changes according to each slide’s height.
tns({
  container: '.my-slider',
  autoHeight: true
});
You can manually adjust slider height using the updateSliderHeight() method when autoHeight is true.

​
Responsive Configuration

All layout options except mode and axis can be adjusted at different breakpoints: 
tns({
  container: '.my-slider',
  items: 1,
  gutter: 10,
  edgePadding: 0,
  responsive: {
    640: {
      items: 2,
      gutter: 20,
      edgePadding: 20
    },
    900: {
      items: 3,
      gutter: 30
    }
  }
});

​
Common Patterns

​
Fixed Width Slider

tns({
  container: '.my-slider',
  fixedWidth: 300,
  gutter: 10,
  edgePadding: 20,
  viewportMax: 1200
});

​
Auto Width with Center Mode

tns({
  container: '.my-slider',
  autoWidth: true,
  center: true,
  gutter: 15
});

tns({
  container: '.my-slider',
  mode: 'gallery',
  // Note: axis is always horizontal in gallery mode
  autoHeight: true
});

Build docs developers (and LLMs) love

Get started for freeTalk to us