Auto Rotating Image Viewer Plugin - jQuery SliderBox
| File Size: | 3.88 KB |
|---|---|
| Views Total: | 3147 |
| 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.











