Auto Rotating Image Viewer Plugin - jQuery SliderBox

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

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.