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.

{"photos":[
  {
    "number":1,
    "name":"1",
    "ext":"jpg",
    "location":"img"
  },
  {
    "number":2,
    "name":"2",
    "ext":"jpg",
    "location":"img"
  },
  {
    "number":3,
    "name":"3",
    "ext":"jpg",
    "location":"img"
  },
  ...
]}

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" 
     data-slider="tSlider" 
     data-speed="1500" 
     data-wait="2500" 
     data-navonhover="false" 
     data-lines="true"
     data-autoplay="true"
     data-effect="fade"> 

Change log:

2017-02-21

• 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.