Elegant Carousel With A Wipe Switch Slider jQuery Plugin | wipeSlider

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>
    <li class="slide">
      // Add Image Here
      <div class="m_innerBox">
       <p>Descript 2</p>
    <li class="slide">
     // Add Image Here
    <li class="slide">
      // Add Image Here

3. Setting the options looks like this:

    transition : 1000,
    auto : true

Option setting

transitionSets the speed at which slides change.
The initial value is 500.
autoSet autoplay.
The initial value is false.
durationSet the slide display time during auto-play.
The initial value is 4000.
pagerGenerate a pager.
The initial value is true.
controlsGenerates a controller that switches to the previous/next slide.
The initial value is true.
directionSets the animation direction.
Default is ‘horizontal’.
easingSets the easing of the wipe animation.
The default is ‘linear’.
slideBeforeA callback is triggered when the slide transition starts.
slideAfterA callback is triggered when the slide transition ends.

Detailed setting of the direction option

‘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.

slideNumReturns the index number of the active slide.
slideLengthReturns 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.

Related Posts


Bootstrap 4 Sidebar Menu Responsive Template | MDB

Bootstrap Side Navbar – Responsive sidebar template based on the Bootstrap 4 framework. An easy-to-use, totally responsive, Google Material Design impressed aspect navigation for modern web app…


Bootstrap 5 Treeview Dynamically Collapsible | bs5treeview

Bootstrap 5 Tree View is a very simple plug-in for creating a basic and elegant Treeview using BS5. For use with Bootstrap 5, the attributes have been…


Modern Mobile Touch Slider With Acceleration Transitions | Swiper

Swiper is the most modern free mobile touch slider with accelerated device transitions and amazing original behavior. It is intended for use in mobile websites, mobile web…


[Steps] A Simple, Lightweight jQuery Step Wizard Plugin

jQuery steps wizard is a simple and lightweight plugin. The step is a jQuery plugin that turns any grouped elements into a step-by-step wizard with navigation buttons…


Responsive Image Gallery Lightbox jQuery Plugin | VenoBox

VenoBox is a responsive jQuery modal window plugin suitable for images, embedded content, iFrames, Google Maps, Vimeo, and YouTube videos. The big difference compared to many other…


Create a Beautiful Mobile App-Like Sliding Menu | mmenu.js

Mmenu is the best JavaScript plugin for both on and off-canvas(hamburger menu) menus with sliding submenus for your website and web app. It is very customizable with…

Leave a Reply

Your email address will not be published. Required fields are marked *