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
-
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" } ]}
-
Activate the slider.
<div id="tSlider" data-slider="tSlider"> <!-- call the function and initialize the tSlider -->
-
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
Sorry, obsolete browsers like IE 6,7 and 8 are not supported
If you have some trouble please let me know tumerorkun@outlook.com