Bootstrap Slider PRO
Responsive customizable slider alternative to Bootstrap carousel. Supports multiple items per slide, mouse drag and touch swipe.
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>
Navigations
Controls
Use controls[true]
to display Next and Previous control buttons.
<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 |