Logo

Documentation v8.2.5

  • Home
  • Tiny Slider
  • Overview
Downloads Preview
Light
Dark
System

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 in src/js/components/app.jswithin the initTinySlidersfunction.
  • 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 loopparameters 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.
data-tns-mouse-drag optional Default: false. Changing slides by dragging them.