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>