Resposive HTML5 Slider/Slideshow Plugin With jQuery - tSlider

File Size: 804 KB
Views Total: 2217
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Resposive HTML5 Slider/Slideshow Plugin With jQuery - tSlider

tSlider is a lightweight, responsive, dynamic jQuery slider/carousel/slideshow plugin with HTML data attributes and JSON image list support.

Basic usage:

1. Insert the jQuery tSlider plugin's files into the html page which has jQuery library included.

<link rel="stylesheet" href="css/style.css">
<script src="jquery.min.js"></script>
<script src="_tSlider.js"></script>

2. Add your own images into the photoList.json file. Note that the JSON file must be placed in the image folder.


3. Create a DIV container for the slider. To initialize the plugin automatically, just add the data-slider="tSlider" attribute to the DIV element as this:

<div id="tSlider" data-slider="tSlider"></div>

4. That's it. You're allowed to config the plugin by passing the following options via data attributes:

  • data-speed="1500": animation speed
  • data-wait="2500": transition delay
  • data-navonhover="false": shows nav controls on hover
  • data-lines="true": shows navigation lines
  • data-autoplay="true": auto play
  • data-effect="fade": or "linear" 
<div id="tSlider" 

Change log:


  • default value correction

This awesome jQuery plugin is developed by tumerorkun. For more Advanced Usages, please check the demo page or visit the official website.