This time I will share jQuery Plugin and tutorial about Basic Banner Slider Plugin For jQuery – simpleBanner.js, hope it will help you in programming stack.
| File Size: | 5.55 KB |
|---|---|
| Views Total: | 6541 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
A minimal, cross-browser and customizable jQuery plugin used to generate a basic, auto-rotating banner slider from a list of images for your website.
How to use it:
1. Create a list of image you want to switch between.
1 |
<div class="mySldier"> |
2 |
<ul> |
3 |
<li><img src="1.jpg" alt=""></li> |
4 |
<li><img src="2.jpg" alt=""></li> |
5 |
<li><img src="3.jpg" alt=""></li> |
6 |
<li><img src="4.jpg" alt=""></li> |
7 |
... |
8 |
</ul> |
9 |
</div> |
2. Import jQuery library and the jQuery simpleBanner.js script into the webpage.
1 |
<script src="//code.jquery.com/jquery.min.js"></script> |
2 |
<script src="simpleBanner.js"></script> |
3. Initialize the banner slider with some options.
1 |
$('.my<a href="https://www.jqueryscript.net/slider/">Slider</a>').simpleBanner({ |
2 |
dots:'dots-pagi' |
3 |
}); |
4. Let’s start to style the banner slider.
01 |
.mySlider { |
02 |
overflow: hidden; |
03 |
width: 100%; |
04 |
position: relative; |
05 |
} |
06 |
07 |
.mySlider ul { |
08 |
overflow: hidden; |
09 |
margin: 0; |
10 |
zoom: 1; |
11 |
} |
12 |
13 |
.mySlider ul li { float: left; } |
14 |
15 |
.mySlider ul li img { width: 100%; } |
5. Style the navigation control.
01 |
.dots-pagi { |
02 |
position: absolute; |
03 |
bottom: 20px; |
04 |
left: 50%; |
05 |
width: 300px; |
06 |
margin: 0 0 0 -150px; |
07 |
padding: 0; |
08 |
text-align: center; |
09 |
} |
10 |
11 |
.dots-pagi li { |
12 |
display: inline-block; |
13 |
*display: inline; |
14 |
*zoom: 1; |
15 |
width: 15px; |
16 |
height: 15px; |
17 |
margin: 0 5px; |
18 |
border-radius: 50%; |
19 |
background: #fff; |
20 |
cursor: pointer; |
21 |
} |
22 |
23 |
.dots-pagi li:hover, .dots-pagi li.active { background: #ff7f02; } |
6. Config the banner slider to switch between images when the users hover over the pagination dots.
1 |
$('.mySlider').simpleBanner({ |
2 |
dots:'dots-pagi', |
3 |
eventType:'mouseenter' |
4 |
}); |
7. More configurations with default values.
1 |
$('.mySlider').simpleBanner({ |
2 |
dots:'dots-pagi', |
3 |
speed:500, |
4 |
arrows:false, |
5 |
autoPlay:true, |
6 |
autoPlayDuration:5000, |
7 |
}); |
Change log:
2017-11-01
- update return & slide index
2016-12-02
- added ‘fade’ and ‘slide’ animations
This awesome jQuery plugin is developed by suconghou. For more Advanced Usages, please check the demo page or visit the official website.
source : jqueryscript.net
