Elegant Carousel With A Wipe Switch Slider jQuery Plugin

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.