Overview

Slideshow carousel for looping through set of slides, which can contain images, text or any custom content. Torus Kit Slider supports multiple items per one slide (unlike the Bootstrap Carousel), dragging using a mouse or pointer and animated touch swiping with natural behavior on mobile devices.

Bootstrap slider example

A multi item slider example with indicators, controls and stretch effect while dragging a slider from left/right bounds.

Structure

Create .tor-slider wrapper and add your desired items there. Slider will automatically wrap every direct children into .slider-item element. Make sure to add a explicit height to the individual elements, or add height to .tor-slider and add .h-100 to the individual items.

Basic example

<div class="tor-slider">
  <div class="h-15rem bg-navy"></div>
  <div class="h-15rem bg-magenta"></div>
  <div class="h-15rem bg-primary"></div>
</div>

Generated code

<div class="tor-slider">
  <div class="slider-inner">
    <div class="slider-items">
      <div class="slider-item">
        <div class="h-15rem bg-navy"></div>
      </div>
      <div class="slider-item">
        <div class="h-15rem bg-magenta"></div>
      </div>
      <div class="slider-item">
        <div class="h-15rem bg-primary"></div>
      </div>
    </div>
  </div>
</div>

Navigations

Controls

Use controls(true) to display Next and Previous control buttons.

<div class="tor-slider" data-tor-slider="controls(true)">
  <div class="h-15rem bg-primary"></div>
  <div class="h-15rem bg-purple"></div>
  <div class="h-15rem bg-navy"></div>
  <div class="h-15rem bg-maroon"></div>
</div>

Indicators

To add an indicators, use indicators(true).

<div class="tor-slider" data-tor-slider="indicators(true)">
  <div class="h-15rem bg-primary"></div>
  <div class="h-15rem bg-purple"></div>
  <div class="h-15rem bg-navy"></div>
  <div class="h-15rem bg-maroon"></div>
</div>

Slides count

Add count(<number>) to specify number of visible items per slide in data-tor-slider attribute. Responsive values are available.

<div class="tor-slider" data-tor-slider="count(3)">
  <div class="h-15rem bg-primary"></div>
  <div class="h-15rem bg-purple"></div>
  <div class="h-15rem bg-navy"></div>
  <div class="h-15rem bg-pink"></div>
  <div class="h-15rem bg-dark"></div>
  <div class="h-15rem bg-maroon"></div>
  <div class="h-15rem bg-teal"></div>
</div>

Responsive slides count

Define a responsive count by using count(<value> <sm|md|lg|xl|xxl>::<value>). Where <value> is the value for the smallest resolution. Other resolutions must be specified by the :: (double colon) separator.

<div class="tor-slider" data-tor-slider="count(1 md::2 xl::4)">
  <div class="h-15rem bg-primary"></div>
  <div class="h-15rem bg-purple"></div>
  <div class="h-15rem bg-navy"></div>
  <div class="h-15rem bg-pink"></div>
  <div class="h-15rem bg-dark"></div>
  <div class="h-15rem bg-maroon"></div>
  <div class="h-15rem bg-teal"></div>
</div>

Margin

Add a margin (space) between items by adding margin(<value>) to data-tor-slider attribute.

<div class="tor-slider" data-tor-slider="count(3) margin(20)">
  <div class="h-15rem bg-primary"></div>
  <div class="h-15rem bg-purple"></div>
  <div class="h-15rem bg-navy"></div>
  <div class="h-15rem bg-pink"></div>
  <div class="h-15rem bg-dark"></div>
  <div class="h-15rem bg-maroon"></div>
  <div class="h-15rem bg-teal"></div>
</div>

Responsive Margin

Responsive margin is also available by using margin[``<value> <sm|md|lg|xl|xxl>::<value>] in data-tor-slider attribute. Resolution and the value must be separated by :: - a double colon. In this example, the initial margin is 0, because there is no value for the small resolution. From the md resolution and up, the margin will be 10, and from the xxl it will be 20.

<div class="tor-slider" data-tor-slider="count(3) margin(md::10 xxl::20)">
  <div class="h-15rem bg-primary"></div>
  <div class="h-15rem bg-purple"></div>
  <div class="h-15rem bg-navy"></div>
  <div class="h-15rem bg-pink"></div>
  <div class="h-15rem bg-dark"></div>
  <div class="h-15rem bg-maroon"></div>
  <div class="h-15rem bg-teal"></div>
</div>

Options

Default options can be overrided using data-tor-slider="option(<value>)" attribute. Option value has to be defined within the parenthesis ().