# Documentation v8.0.38

Preview Downloads Purchase

# 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 `KTApp`wrapper defined in `src/js/layout/app.js`within the `initTinySliders`function.
- 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 as `loop`parameters 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 `true`or `false`values.
`data-tns-loop` | `optional` | Enables looping slides. Accepts `true`or `false`values.
`data-tns-swipe-angle` | `optional` | Enables swipe or drag will not be triggered if the angle is not inside the range when set. Accepts `true`or `false`values.
`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 `true`or `false`values.
`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 `true`or `false`values.
`data-tns-nav` | `optional` | Enables the display of all navigation components like dots. Accepts `true`or `false`values.
`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 `true`or `false`values.
`data-tns-dots` | `optional` | Toggles display of dots component. Accepts `true`or `false`values.
`data-tns-prev-button` | `optional` | Defines the custom previous button element by id. Accepts element `id`in string values.
`data-tns-next-button` | `optional` | Defines the custom next button element by id. Accepts element `id`in string values.

### Explore

### Metronic Licenses

License FAQs
Regular License
For single end product used by you or one client
$ 39
Extended License
For single SaaS app with paying users
$ 969
Custom License
Reach us for custom license offers.
Contact Us
Buy Now

### Metronic Demos

Demo 1
Demo 2
Demo 3
Demo 4
Demo 5
Demo 6
Demo 7
Demo 8
Demo 9
Demo 10
Demo 11
Demo 12
Demo 13
Demo 14
Demo 15
Demo 16
Demo 17
Demo 18
Demo 19
Demo 20
Demo 21
Demo 22
Coming soon
Coming soon

##### Learn & Get Inspired

## Support at devs.keenthemes.com

Join our developers community to find answer to your question and help others. FAQs
Get Support
Documentation & Videos
From guides and video tutorials, to live demos and code examples to get started.
Plugins & Components
Check out our 300+ in-house components and customized 3rd-party plugins.
Layout Builder
Build your layout, preview it and export the HTML for server side integration.
Metronic Downloads
Download your prefered framework and demo with one click.
What's New
Latest features and improvements added with our users feedback in mind.
Buy now