This time I will share jQuery Plugin and tutorial about Responsive Background Image Slider Plugin – jQuery sliderResponsive, hope it will help you in programming stack.
sliderResponsive is a tiny jQuery plugin for creating a fully responsive background image carousel/slider/slideshow with animated captions and pagination/navigation controls.
More features:
- Auto rotation.
- Auto pause on hover.
- Zoom on hover.
- Configurable animation speed & transition delay.
View more:
How to use it:
1. Include the plugin and other resources in the html file.
1 |
<link href="sliderResponsive.css" rel="stylesheet"> |
2 |
<script src="//code.jquery.com/jquery-3.2.1.min.js"></script> |
3 |
<script src="sliderResponsive.js"></script> |
2. Add custom background images together with caption bar and pagination arrows to the slider.
01 |
<div class="slider" id="slider-demo"> |
03 |
<div style="background-image:url(1.jpg)"></div> |
04 |
<div style="background-image:url(2.jpg)"></div> |
05 |
<div style="background-image:url(3.jpg)"></div> |
06 |
<div style="background-image:url(4.jpg)"></div> |
07 |
<div style="background-image:url(5.jpg)"></div> |
09 |
<i class="left" class="arrows" style="z-index:2; position:absolute;"><svg viewBox="0 0 100 100"><path d="M 10,50 L 60,100 L 70,90 L 30,50 L 70,10 L 60,0 Z"></path></svg></i> |
10 |
<i class="right" class="arrows" style="z-index:2; position:absolute;"><svg viewBox="0 0 100 100"><path d="M 10,50 L 60,100 L 70,90 L 30,50 L 70,10 L 60,0 Z" transform="translate(100, 100) rotate(180) "></path></svg></i> |
12 |
<span class="titleBar"> |
3. Initialize the plugin to generate a basic slider with default settings.
1 |
$("#slider-demo").sliderResponsive(); |
4. Customize the slider as per your needs.
01 |
$("#slider-demo").sliderResponsive({ |
This awesome jQuery plugin is developed by EricPorter. For more Advanced Usages, please check the demo page or visit the official website.
