Overview
Tiny Slider is an all purpose slider inspired by Owl Carousel. For more info please visit the plugin's
Homeor
Github Repo.
Usage
Tiny Slider's CSS and Javascript files are bundled in the global style and scripts bundles and are globally included in all pages:
<link href="assets/plugins/global/plugins.bundle.css" rel="stylesheet" type="text/css"/>
<script src="assets/plugins/global/plugins.bundle.js"></script>
Initialization
- Tiny Slider's Javascript is globally initialized with our
KTAppwrapper defined insrc/js/layout/app.jswithin theinitTinySlidersfunction. - To include Tiny Slider into your project, you need to include a HTML attribute
data-tns="true"within the slider element. For more options available, such asloopparameters and more, please refer to the options below. - Swapper instances can also be controlled programmatically. For more information on Smooth Scroll's other options, please refer to the official plugin site.
Markup Reference
Tiny Slider uses HTML attributes to set specific configurations. Here are some references for each below. For complete list of options, please refer to the
official documentation.
HTML Attribute references
| Name | Type | Description |
|---|---|---|
data-tns
|
mandatory
|
Enables the current element as the Tiny Slider wrapper component. Accepts
trueor
falsevalues. |
data-tns-loop
|
optional
|
Enables looping slides. Accepts
trueor
falsevalues. |
data-tns-swipe-angle
|
optional
|
Enables swipe or drag will not be triggered if the angle is not inside the range when set. Accepts
trueor
falsevalues. |
data-tns-speed
|
optional
|
Sets the speed of the slide animation (in "ms"). Accepts positive integer values. |
data-tns-autoplay
|
optional
|
Toggles the automatic change of slides.. Accepts
trueor
falsevalues. |
data-tns-autoplay-timeout
|
optional
|
Sets time between 2 autoplay slides change (in "ms"). Accepts positive integer values. |
data-tns-controls
|
optional
|
Enables next and prev navigation buttons. Accepts
trueor
falsevalues. |
data-tns-nav
|
optional
|
Enables the display of all navigation components like dots. Accepts
trueor
falsevalues. |
data-tns-items
|
optional
|
Sets number of slides being displayed in the viewport. Accepts positive integer values. |
data-tns-center
|
optional
|
Center the active slide in the viewport. Accepts
trueor
falsevalues. |
data-tns-dots
|
optional
|
Toggles display of dots component. Accepts
trueor
falsevalues. |
data-tns-prev-button
|
optional
|
Defines the custom previous button element by id. Accepts element
idin string values. |
data-tns-next-button
|
optional
|
Defines the custom next button element by id. Accepts element
idin string values. |
2022©
Keenthemes
