This time I will share jQuery Plugin and tutorial about Basic Touch Slider Plugin With jQuery – swipeSlider, hope it will help you in programming stack.
swipeSlider is a very basic touch swiper/slider plugin for jQuery that enables the users to slide through images (or any other elements) via mouse drag and touch swipe.
How to use it:
1. The basic HTML markup structure for the slider. You’re allowed to embed any html content to the slides as follow:
2. The basic CSS styles:
06 |
.ss-slider > .ss-slides { |
13 |
.ss-slider > .ss-slides > .ss-slide { |
3. Link to the latest version of jQuery library and the jQuery swipeSlider plugin.
1 |
<script src="//code.jquery.com/jquery-3.2.1.min.js"></script> |
2 |
<script src="jquery.swipeSlider.js"></script> |
4. Enable the touch slider with default options.
1 |
var slider = $('#slider').swipeSlider(); |
5. If you’d like to create custom controls to slide through the slides manually.
1 |
<a href="#" class="previous">Previous</a> |
2 |
<a href="#" class="next">Next</a> |
1 |
$('.next').on('click', function() { |
2 |
slider.swipeSlider('slideNext'); |
5 |
$('.previous').on('click', function() { |
6 |
slider.swipeSlider('slidePrevious'); |
6. All default configuration options and callback functions.
01 |
var slider = $('#slider').swipeSlider({ |
02 |
animationDuration: 300, |
04 |
autoTransitionDuration: false, |
08 |
onSlideStartCallback: undefined, |
09 |
onSlideCompleteCallback: undefined, |
10 |
onMoveCallback: undefined, |
11 |
onStartCallback: undefined, |
This awesome jQuery plugin is developed by lukethompson. For more Advanced Usages, please check the demo page or visit the official website.
