Bootstrap Slider

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 controls and interactive effect while dragging a slider from left/right bounds.

Structure

Create data-tor-slider wrapper and add your desired items there. Slider will automatically wrap every direct children into .tor-slider-wrapper element. Items are sized according its content, so to make them the same size, add an explicit height to the individual elements, or add height to .tor-slider and add .h-100 to the individual items.

Basic example

<div data-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 data-tor-slider>
  <div class="tor-slider-wrapper">
    <div class="tor-slider-wrapper">
      <div class="h-15rem bg-navy"></div>
    </div>
    <div class="tor-slider-wrapper">
      <div class="h-15rem bg-magenta"></div>
    </div>
    <div class="tor-slider-wrapper">
      <div class="h-15rem bg-primary"></div>
    </div>
  </div>
</div>

Navigations

Controls

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

<div 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 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>

External Navigations

With external navigation, you can create your own custom navigation that controls the slider independently.

Controls

Wrap your custom control elements into wrapper element and give it data-tor-slider-target="<target>" attribute. Then add data-tor-slide-to="prev" for the control that slides the <target> slider to the previous slide, and data-tor-slide-to="next" for the next slide.

<div data-tor-slider-target="#slider-1">
  <div class="btn btn-dark btn-arrow-left" data-tor-slide-to="prev"></div>
  <div class="btn btn-dark btn-arrow" data-tor-slide-to="next"></div>
</div>
<div id="slider-1" data-tor-slider="">
  <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

Wrap your custom indicators into wrapper element and give it data-tor-slider-target="<target>" attribute. Then add data-tor-slide-to="<slide-number>" to each indicator, where the <slide-number> is a number of the slide starting from 0.

<div data-tor-slider-target="#slider-2">
  <div class="btn btn-dark" data-tor-slide-to="0">0</div>
  <div class="btn btn-dark" data-tor-slide-to="1">1</div>
  <div class="btn btn-dark" data-tor-slide-to="2">2</div>
</div>
<div id="slider-2" data-tor-slider="">
  <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 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 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 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 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>

Vertical direction

Add vertical(true) to make vertical slider.

<div data-tor-slider="vertical(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-pink"></div>
  <div class="h-15rem bg-dark"></div>
  <div class="h-15rem bg-maroon"></div>
  <div class="h-15rem bg-teal"></div>
</div>

Controls

<div data-tor-slider="vertical(true) controls(true) 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-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

<div data-tor-slider="vertical(true) margin(20) 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-pink"></div>
  <div class="h-15rem bg-dark"></div>
  <div class="h-15rem bg-maroon"></div>
  <div class="h-15rem bg-teal"></div>
</div>

Parent trigger

Create interesting slider transition effects when the current slide moves in, or moves out. You can create different effects for each individual slide. Because the each slide content is wrapped into parent .tor-slide-item element, you need to add this parent a data-tor-parent attribute. This can be easily done by adding add-parent(<trigger>) option into data-tor-slider attribute.

.active class

Add add-parent(active) option to run any effect on child elements which has active(p) trigger. That means, if the parent slide moves into view and gets .active class, any inner child element with the active(p) (active parent) trigger will immediately run associated effect.

The slide gets .active class after the sliding transition ends.

<div data-tor-slider="add-parent(active) controls(true)">
  <div class="h-15rem bg-primary" data-tor="active(p):fade.in"></div>
  <div class="h-15rem bg-purple" data-tor="active(p):clip(up, {skew: 2rem})"></div>
  <div class="h-15rem bg-navy" data-tor="active(p):scale.from(50%)"></div>
  <div class="h-15rem bg-pink" data-tor="active(p):[scale.from(0%) rotate.from(180deg)]"></div>
</div>

.show class

Add add-parent(show) option to run any effect on child elements which has show(p) trigger. That means, if the parent slide moves into view and gets .show class, any inner child element with the show(p) (active parent) trigger will immediately run associated effect.

The slide gets .show immediately when only a part of the slide becomes visible in the slider viewport.

<div data-tor-slider="add-parent(show) controls(true)">
  <div class="h-15rem bg-primary" data-tor="show(p):fade.in slow"></div>
  <div class="h-15rem bg-purple" data-tor="show(p):clip(up, {skew: 2rem}) slow"></div>
  <div class="h-15rem bg-navy" data-tor="show(p):scale.from(50%) slow"></div>
  <div class="h-15rem bg-pink" data-tor="show(p):[scale.from(0%) rotate.from(180deg)] slow"></div>
</div>

Stack

Using stack(true) will disable dragging and sliding and make the items to be arranged on top of each other. This is great if you need to make static transitions such as fading.

This example uses add-parent(active) that will add data-tor-parent="active" to the .tor-slider-item element, which enables creating different effects based on active(p) (active parent) trigger. That means, when the .tor-slider-item element becomes visible and gets .active (or .show) class, the animation on the inner child elements with data-tor="active(p)" (or show(p)) trigger will start.

Using active(p):[fade.in scale.from(125%) blur.from(xl)] we’ve easily created fading blur-in transition on individual slides. The data-tor-group attribute will help us to assign multiple effects to multiple <img> elements from one place, without painstakingly adding them to each one.

<div
  data-tor-slider="stack(true) add-parent(active) controls(true)"
  data-tor-group="img => active(p):[fade.in scale.from(125%) blur.from(xl)] slowest;"
  >
  <img src="..." alt="...">
  <img src="..." alt="...">
  <img src="..." alt="...">
</div>

Another example how to use stack(true) option is to create a skewed slides transition using Torus Kit’s build-in Clip effect.

<div
  data-tor-group="img => active(p):clip(up, {skew: 3rem}) exponential;"
  data-tor-slider="stack(true) add-parent(active) controls(true)"
  >
  <img src="..." alt="...">
  <img src="..." alt="...">
  <img src="..." alt="...">
</div>

JavaScript

Control the slider behavior by calling the TORUS.Slider object:

TORUS.Slider.slideTo("#slider", "next");

Or by creating the slider instance:

const slider = document.querySelector("#slider");
slider.TORUS.Slider._slideTo("next");

slideTo

Control the sliding direction with the slideTo method

TORUS.Slider.slideTo("<element>", "<direction>");

Example

// Slide to previous slide on all `.my-slider` elements
TORUS.Slider.slideTo(".my-slider", "prev");

// Slide to specific slide number on `#slider` element
TORUS.Slider.slideTo("#slider", 3);

Options

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