tSlider

jQuery Slider Plugin controlled via Data Attributes

By Orkun Tümer, tumerorkun 2017

tSlider uses jQuery 3.1.1 and a bunch of icons from Font-Awesome

Try the Demo

Documentation

1. HTML and jSON syntax.

   HTML; <div id="tSlider"></div><!-- id is not neccessary to work with plugin, it is neccessary for style.css -->

   jSON; (json file should be in img folder) {"photos":[ { "number":1, "name":"Your Photo Name", "ext":"Photo Extension", "location":"Folder Location" }, { "number":2, "name":"SamplePhoto", "ext":"jpg", "location":"img" } ]}

2. Activate the slider.

   <div id="tSlider" data-slider="tSlider"> <!-- call the function and initialize the tSlider -->

3. Control the available options.

    <div id="tSlider" data-slider="tSlider"                     data-speed="1500"                     data-wait="2500"                     data-navonhover="false"                     data-lines="true"                    data-autoplay="false"                    data-effect="lineer"> 

• speed: Control the duration of the cross fade transition effect. Default is 1000 (in milliseconds)
• wait: Control the waiting time between the transitions. Default is 2000 (in milliseconds)
• navonhover: Activate/Deactivate the visualization of navigation arrows. Default is false (bool)
• lines: Activate/Deactivate the visualization of the navigation lines. Default is true (bool)
• autoplay: Activate/Deactivate the autoplay. Default is true (bool)
• effect: Choose transition effect there are two option for now (fade and lineer). Default is fade

IE support

Sorry, obsolete browsers like IE 6,7 and 8 are not supported

Help

If you have some trouble please let me know [email protected]