This time I will share jQuery Plugin and tutorial about HTML List Based Carousel Plugin – jQuery Slider.js, hope it will help you in programming stack.
| File Size: | 3.97 KB |
|---|---|
| Views Total: | 4757 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
“
A simple, lightweight, semantic jQuery slider plugin for generating a basic carousel/slider from a normal HTML unordered list. Features auto play, infinite loop, and navigation/pagination controls.
How to use it:
1. Create a list of slides together with the navigation controls on the web page.
01 |
<div id="slider"> |
02 |
<a href="#" class="next">></a> |
03 |
<a href="#" class="prev"><</a> |
04 |
<ul> |
05 |
<li>SLIDE 1</li> |
06 |
<li>SLIDE 2</li> |
07 |
<li>SLIDE 3</li> |
08 |
<li>SLIDE 4</li> |
09 |
<li>SLIDE 5</li> |
10 |
... |
11 |
</ul> |
12 |
</div> |
2. Link to jQuery JavaScript library and the jQuery Slider.js script.
1 |
<script src="https://code.jquery.com/jquery-3.3.1.min.js" |
2 |
integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" |
3 |
crossorigin="anonymous"> |
4 |
</script> |
5 |
<script src="slider.js"></script> |
3. The example CSS for the carousel/slider.
01 |
#slider { |
02 |
position: relative; |
03 |
overflow: hidden; |
04 |
width: 400px; |
05 |
height: 300px; |
06 |
} |
07 |
08 |
#slider ul { |
09 |
position: relative; |
10 |
margin: 0; |
11 |
padding: 0; |
12 |
height: 200px; |
13 |
list-style: none; |
14 |
left: 0px; |
15 |
} |
16 |
17 |
#slider ul li { |
18 |
position: relative; |
19 |
display: block; |
20 |
float: left; |
21 |
margin: 0; |
22 |
padding: 0; |
23 |
width: 400px; |
24 |
height: 300px; |
25 |
} |
26 |
27 |
a.prev, a.next { |
28 |
position: absolute; |
29 |
top: 40%; |
30 |
z-index: 999; |
31 |
display: block; |
32 |
padding: 4% 3%; |
33 |
width: auto; |
34 |
height: auto; |
35 |
background: #2a2a2a; |
36 |
color: #fff; |
37 |
text-decoration: none; |
38 |
font-weight: 600; |
39 |
font-size: 18px; |
40 |
opacity: 0.8; |
41 |
cursor: pointer; |
42 |
} |
43 |
a.prev:hover, a.next:hover { |
44 |
opacity: 1; |
45 |
-webkit-transition: all 0.2s ease; |
46 |
} |
47 |
48 |
a.prev { |
49 |
border-radius: 0 2px 2px 0; |
50 |
} |
51 |
52 |
a.next { |
53 |
right: 0; |
54 |
border-radius: 2px 0 0 2px; |
55 |
} |
4. Initialize the slider/carousel and done.
1 |
$("#slider").sliderNd(); |
5. Enable the autoplay.
1 |
$("#slider").sliderNd({ |
2 |
autoplay: true, |
3 |
playTime: 5000 |
4 |
}); |
6. Disable the infinite loop.
1 |
$("#slider").sliderNd({ |
2 |
type: 'hiddenAnchor' |
3 |
}); |
7. Enable navigation controls.
1 |
$("#slider").sliderNd({ |
2 |
navigation: true, |
3 |
next: 'next', |
4 |
prev: 'prev' |
5 |
}); |
8. Set the delay between each slide.
1 |
$("#slider").sliderNd({ |
2 |
delay: 200 |
3 |
}); |
9. Set the height & width of the carousel/slider.
1 |
$("#slider").sliderNd({ |
2 |
width: 700, |
3 |
height: 300 |
4 |
}); |
This awesome jQuery plugin is developed by Dead-Archie. For more Advanced Usages, please check the demo page or visit the official website.
source : jquery.net
