Layout Options

Configure the visual layout and structure of your slider

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

Vertical Gallery

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