Tiny slider

Slider for all purposes, it lets you create a beautiful responsive slider.


See Tiny Slider example code below:


<div class="tiny-slider">
  <div class="tiny-slider-inner">
    <!-- Slider items -->
    <div class="item"> <img src="assets/images/about/01.jpg" alt=""> </div>
    <div class="item"> <img src="assets/images/about/02.jpg" alt=""> </div>
    <div class="item"> <img src="assets/images/about/03.jpg" alt=""> </div>
  </div>
</div>

We have provided Tiny Slider data attributes so you don't need to play with JavaScrips or CSS. The list of Tiny Slider data attributes type name and it's descriptions are provided below for the reference:

Data Attributes name Description Available options
data-arrow="true" Enable or disable arrow Boolean (true or false)
data-dots="false" Enable or disable dots Boolean (true or false)
data-mode="false" With carousel everything slides to the side, while gallery uses fade animations and changes all slides at once. "carousel" | "gallery"
data-axis="false" The axis of the slider. "horizontal" | "vertical"
data-items="1" Slider items in all device. Numbers (1 2 3 4 5 6 ....)
data-items-xs="2" Slider items in extra small device. start to 575px Numbers (1 2 3 4 5 6 ....)
data-items-sm="3" Slider items in small device. 576px to 767px Numbers (1 2 3 4 5 6 ....)
data-items-md="4" Slider items in medium device. 768px to 991px Numbers (1 2 3 4 5 6 ....)
data-items-lg="5" Slider items in large device. 992px to 1199px Numbers (1 2 3 4 5 6 ....)
data-items-xl="6" Slider items in extra large device. 1200 to end Numbers (1 2 3 4 5 6 ....)
data-autoplay="true" Slider auto play enable or disable Boolean (true or false)
data-autoplaytime="2000" Slider next slide time in MS Number MS
data-speed="1000" Slider next slide speed (AKA: smartSpeed) in MS Number MS
data-gutter="30" Margin between 2 slider items in pixel Number in px
data-edge="30" Space on the outside (in "px"). Number in px
data-loop="true" Slider loop enable or disable Boolean (true or false)
data-autowidth="true" If true, the width of each slide will be its natural width as a inline-block box. Boolean (true or false)
data-autoheight="true" Height of slider container changes according to each slide's height. Boolean (true or false)
data-hoverpause="true" Slider pause on mouse hover. Boolean (true or false)
data-touch="true" Activates input detection for touch devices. Boolean (true or false)
data-drag="true" Changing slides by dragging them. Boolean (true or false)
data-rewind="true" Moves to the opposite edge when reaching the first or last slide. Boolean (true or false)

See example of how to use Tiny Slider data attributes:


<div class="tiny-slider">
  <div class="tiny-slider-inner" data-arrow="true" data-dots="false" data-items-xl="6" data-items-lg="5" data-items-md="4" data-items-sm="3" data-items-xs="2" >
    <!-- Slider items -->
    <div class="item"> <img src="assets/images/about/01.jpg" alt=""> </div>
    <div class="item"> <img src="assets/images/about/02.jpg" alt=""> </div>
    <div class="item"> <img src="assets/images/about/03.jpg" alt=""> </div>
  </div>
</div>