Enhanced Bootstrap Slider

Bootstrap Slider PRO

Responsive customizable slider alternative to Bootstrap carousel. Supports multiple items per slide, mouse drag and touch swipe.

What's New

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

Default .torus-slider code structure with default one item per slide and no controls or indicators. Wrap every slide into .slider-item element and make sure to set height for the slide content.


<div class="torus-slider">
  <div class="slider-inner">
    <div class="slider-items">

      <div class="slider-item">
        <div class="h-15rem bg-primary"></div>
      </div>

      <div class="slider-item">
        <div class="h-15rem bg-magenta"></div>
      </div>

      <div class="slider-item">
        <div class="h-15rem bg-navy"></div>
      </div>

    </div>
  </div>
</div>

Controls

Use controls[true] to display Next and Previous control buttons.

Hello

Hello

Hello

Hello


<div class="torus-slider" data-torus-slider="controls[true] item-trigger[show, active]">
  <div class="slider-inner">
    <div class="slider-items">

      <div class="slider-item">
        <div class="h-15rem bg-primary rounded" data-fx="TA:reveal--up TA:fade--in exponential">
          <h1 data-fx="TS:block--left__bg[white] TA:grow origin-right exponential">Hello</h1>
        </div>
      </div>

      <div class="slider-item">
        <div class="h-15rem bg-purple rounded" data-fx="TA:reveal--up TA:fade--in exponential">
          <h1 data-fx="TS:block--left__bg[white] TA:grow origin-right exponential">Hello</h1>
        </div>
      </div>

      <div class="slider-item">
        <div class="h-15rem bg-navy rounded" data-fx="TA:reveal--up TA:fade--in exponential">
          <h1 data-fx="TS:block--left__bg[white] TA:grow origin-right exponential">Hello</h1>
        </div>
      </div>

      <div class="slider-item">
        <div class="h-15rem bg-maroon rounded" data-fx="TA:reveal--up TA:fade--in exponential">
          <h1 data-fx="TS:block--left__bg[white] TA:grow origin-right exponential">Hello</h1>
        </div>
      </div>

    </div>
  </div>
</div>

Indicators

To add an indicators, use indicators[true].


<div class="torus-slider" data-torus-slider="indicators[true]">
  <div class="slider-inner">
    <div class="slider-items">

      <div class="slider-item">
        <div class="h-15rem bg-primary"></div>
      </div>

      <div class="slider-item">
        <div class="h-15rem bg-purple"></div>
      </div>

      <div class="slider-item">
        <div class="h-15rem bg-navy"></div>
      </div>

    </div>
  </div>
</div>

Slides count

Add count[{number}] to specify number of visible items per slide in data-torus-slider attribute. Responsive values are available.


<div class="torus-slider" data-torus-slider="count[3]">
  <div class="slider-inner">
    <div class="slider-items">

      <div class="slider-item">
        <div class="h-15rem bg-primary"></div>
      </div>

      <div class="slider-item">
        <div class="h-15rem bg-purple"></div>
      </div>

      <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-dark"></div>
      </div>

      <div class="slider-item">
        <div class="h-15rem bg-teal"></div>
      </div>

    </div>
  </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="torus-slider" data-torus-slider="count[1 md::2 xl::4]">
  <div class="slider-inner">
    <div class="slider-items">

      <div class="slider-item">
        <div class="h-15rem bg-primary"></div>
      </div>

      <div class="slider-item">
        <div class="h-15rem bg-purple"></div>
      </div>

      <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-dark"></div>
      </div>

      <div class="slider-item">
        <div class="h-15rem bg-teal"></div>
      </div>

    </div>
  </div>
</div>

Margin

Add a margin (space) between items by adding margin[{value}] to data-torus-slider attribute.


<div class="torus-slider" data-torus-slider="count[3] margin[20]">
  <div class="slider-inner">
    <div class="slider-items">

      <div class="slider-item">
        <div class="h-15rem bg-primary"></div>
      </div>

      <div class="slider-item">
        <div class="h-15rem bg-purple"></div>
      </div>

      <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-dark"></div>
      </div>

      <div class="slider-item">
        <div class="h-15rem bg-teal"></div>
      </div>

    </div>
  </div>
</div>

Responsive Margin

Responsive margin is also available by using margin[``{value} {sm|md|lg|xl|xxl}::{value}] in data-torus-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 30.


<div class="torus-slider" data-torus-slider="count[3] margin[md::10 xxl::30]">
  <div class="slider-inner">
    <div class="slider-items">

      <div class="slider-item">
        <div class="h-15rem bg-primary"></div>
      </div>

      <div class="slider-item">
        <div class="h-15rem bg-purple"></div>
      </div>

      <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-dark"></div>
      </div>

      <div class="slider-item">
        <div class="h-15rem bg-teal"></div>
      </div>

    </div>
  </div>
</div>

Options

Default options can be overrided using data-torus-slider="option[{value}]" attribute. Option value has to be defined within the brackets [].

Option Default Type Responsive Description
controls false int Next and Previous slider control buttons
indicators false int Dot indicators with active slide highlighted
count 0 int ✔ Count of visible items per one slide
margin 0 int ✔ Margin (space) between items
pull-area 10 int When item exceed this defined area while dragging, it will slide to next/previous slide item
stretch-on-drag true bool Stretch effect while dragging from right/left slider bounds
stretch-on-click false bool Stretch effect when next/prev button clicked, but no next/prev slide is available