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.
