This time I will share jQuery Plugin and tutorial about Responsive Touch Swiper Slider – jquery.slider.js, hope it will help you in programming stack.
A flexible, responsive, mobile-friendly, and highly customizable swiper/slider/carousel/slideshow plugin created for both desktop and mobile.
Features:
- Supports touch and drag events.
- Slide and fade animations.
- Custom transition effects using CSS.
- Auto play.
- Infinite loop.
- Arrow navigation and numeric pagination.
- Easy to style using your own CSS styles.
How to use it:
1. The basic HTML structure for the swiper slider.
2 |
< div class = "slider-container" id = "slider" > |
3 |
< div class = "slider-item" >Item 1</ div > |
4 |
< div class = "slider-item" >Item 2</ div > |
5 |
< div class = "slider-item" >Item 3</ div > |
6 |
< div class = "slider-item" >Item 4</ div > |
7 |
< div class = "slider-item" >Item 5</ div > |
2. Place the jquery.slider.js
script after jQuery library.
1 |
< script src = "jquery.js" ></ script > |
2 |
< script src = "jquery.slider.js" ></ script > |
3. Attach the plugin to the slider container and done.
4. The example CSS to style the slider.
23 |
@media ( max-width : 768px ) { |
4. Add custom navigation arrows to the slider.
1 |
< a href = "#" class = "slider-prev" >←</ a > |
2 |
< a href = "#" class = "slider-next" >→</ a > |
2 |
prev: $( '.slider-prev' ), |
3 |
next: $( '.slider-next' ) |
5. Add a numeric pagination to the slider.
1 |
< div class = "slider-pagination" > |
2 |
< a href = "#" class = "slider-link" >1</ a > |
3 |
< a href = "#" class = "slider-link" >2</ a > |
4 |
< a href = "#" class = "slider-link" >3</ a > |
5 |
< a href = "#" class = "slider-link" >4</ a > |
6 |
< a href = "#" class = "slider-link" >5</ a > |
2 |
links: $( '.slider-link' ) |
6. Enable the autoplay functionality.
7. Set the transition effect. Default: ‘slide’.
8. You can also create your own transition effects as follows:
05 |
oldSlideCSS: function (oldIdx, newIdx, ratio) { |
13 |
newSlideCSS: function (oldIdx, newIdx, ratio) { |
14 |
var coef = (oldIdx < newIdx) ? 1 : -1; |
16 |
if (oldIdx === 0 && newIdx === this .count - 1) { |
18 |
} else if (oldIdx === this .count - 1 && newIdx === 0) { |