Auto Rotating Image Viewer Plugin - jQuery SliderBox
File Size: | 3.88 KB |
---|---|
Views Total: | 3084 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

This is a jQuery image viewer plugin to create a cross-platform slider box that automatically rotates through images at a certain speed.
How to use it:
1. Import jQuery JavaScript library and the jQuery SliderBox plugin's files into the html file.
<link rel="stylesheet" href="SliderBox.css"> <script src="//code.jquery.com/jquery-3.2.1.min.js"></script> <script src="SliderBox.js"></script>
2. Add images with links, background colors, and titles to the slider box as follows:
<div id="sliderbox" class="sliderBox"> <div data-image="1.jpg" data-url="//www.jqueryscript.net" data-bg-color="#1D459D" data-title="Title 1"></div> <div data-image="2.jpg" data-url="//www.jqueryscript.net" data-bg-color="#1D459D" data-title="Title 2"></div> <div data-image="3.jpg" data-url="//www.jqueryscript.net" data-bg-color="#1D459D" data-title="Title 3"></div> ... </div>
3. Invoke the slider box plugin with default options. Done.
$('#sliderbox').SliderBox();
4. Options can be overwritten when initializing plugin, by passing an object literal as follows:
$('#sliderbox').SliderBox({ lBoxWidth: 310, lBoxHeigth: 310, BoxWidth: 150, BoxHeigth: 150, divider: 10, time: 5000, });
5. Enable or disable mobile/tablet support.
$('#sliderbox').SliderBox({ onlyDestop: true });
This awesome jQuery plugin is developed by ibasoglu. For more Advanced Usages, please check the demo page or visit the official website.