wipeSlider is a small, elegant, configurable, and responsive plugin that flips between slides with a horizontal or vertical “Swipe Fill” effect. Upload CSS and jQuery for slides and JS for plugins.
More Features:
- Autoplay
- Pagination bullets.
- Navigation arrows.
- Custom transition effect.
- Supports any slide content: photos, textual content, and so forth.
How to make use of it:
1. Load the jQuery wipeSlider plugin and different required assets within the doc.
<link rel="stylesheet" href="/path/to/css/wipeSlider.css"> <script src="/path/to/cdn/jquery.min.js"></script> <script src="/path/to/script/jquery.wipeSlider.js"></script>
2. Add your HTML content as slides to the carousel.
<div class="slidesWrap js_wiper"> <ul class="slides"> <li class="slide"> // Add Image Here <div class="m_innerBox"> <p>Descript 1</p> </div> </li> <li class="slide"> // Add Image Here <div class="m_innerBox"> <p>Descript 2</p> </div> </li> <li class="slide"> // Add Image Here </li> <li class="slide"> // Add Image Here </li> </ul> </div>
3. Setting the options looks like this:
$('.js_wiper').wipeSlider();
$('.js_wiper').wipeSlider({ transition : 1000, auto : true });
Option setting
label | function |
---|---|
transition | Sets the speed at which slides change. The initial value is 500. |
auto | Set autoplay. The initial value is false. |
duration | Set the slide display time during auto-play. The initial value is 4000. |
pager | Generate a pager. The initial value is true. |
controls | Generates a controller that switches to the previous/next slide. The initial value is true. |
direction | Sets the animation direction. Default is ‘horizontal’. |
easing | Sets the easing of the wipe animation. The default is ‘linear’. |
slideBefore | A callback is triggered when the slide transition starts. |
slideAfter | A callback is triggered when the slide transition ends. |
Detailed setting of the direction option
value | effect |
---|---|
‘horizontal’ | Wipe from right to left. |
‘vertical’ | Wipe from top to bottom. |
‘four’ | Wipe sequentially in all four directions. |
‘custom’ | Wipe in the direction set for each slide. Set data-dir=”toLeft”, data-dir=”toRight”, data-dir=”toTop”, or data-dir=”toBottom” for .slide. |
‘Other than those above’ | No animation. Set if you want to use other functions as a slider. |
About callbacks
The following arguments are available.
argument | content |
---|---|
slideNum | Returns the index number of the active slide. |
slideLength | Returns the number of slides for the slider. |
Tiny Carousel With A Wipe Fill Effect, wipeSlider Plugin/Github, Wipe switch slider
See Demo And Download
Official Website(Kackie): Click Here
This superior jQuery/javascript plugin is developed by Kackie. For extra Advanced Usage, please go to the official website.