Smooth Mobile-Friendly Slider Plugin With jQuery And CSS3 - swipeslider
File Size: | 14.3 KB |
---|---|
Views Total: | 2979 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

swipeslider is a responsive, touch-friendly jQuery content slider / carousel plugin that uses CSS3 transitions and transforms for smooth sliding animations.
Main features:
- Easy to implement.
- Highly customizable.
- Fully responsive.
- Infinite looping.
- Supports both mouse drag and touch swipe events.
- Supports any html content, not only images.
- Autoplay and pause on hover.
How to use it:
1. Load the required swipeslider.css
in the head section of the document.
<link href="swipeslider.css" rel="stylesheet">
2. Create a list of any html content you want to present and then wrap the list into a wrapping element with the CSS class 'swipeSlider'.
<div id="demo" class="swipeslider"> <ul class="sw-slides"> <li class="sw-slide"> Slide 1 Content </li> <li class="sw-slide"> Slide 2 Content </li> <li class="sw-slide"> Slide 3 Content </li> <li class="sw-slide"> Slide 4 Content </li> </ul> </div>
3. Load the latest JQuery library and the swipeslider.js
before we close the body tag.
<script src="//code.jquery.com/jquery-2.2.0.min.js"></script> <script src="swipeslider.js"></script>
4. Call the function on the wrapping element to generate a basic slider.
$('#demo').swipeslider();
5. Config the slider with the following options.
$('#demo').swipeslider({ /** / How long one slide will change the other. */ transitionDuration: 500, /** / Enable autoplay */ autoPlay: true, /** * How frequently slides will be changed. */ autoPlayTimeout: 3000, /** * Transition effect. */ timingFunction: 'ease-out', /** * Show 'Next' and 'Previous' buttons. */ prevNextButtons: true, /** * Show slide switches. */ bullets: true, /** * Enable swipe function. */ swipe: true, /** * Overall height of the slider. Set it to percent to make it responsive. * Otherwise the slider will keep the height. */ sliderHeight: '60%' });
Change log:
2016-06-12
- Fix: fixed class-name with typo.
2016-05-04
- Responsiveness fix.
This awesome jQuery plugin is developed by AlexEmashev. For more Advanced Usages, please check the demo page or visit the official website.