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. Initialize the plugin to create a primary carousel.
$('.js_wiper').wipeSlider();
4. Customize the transition speed.
$('.js_wiper').wipeSlider({ transition : 500 });
5. Enable autoplay functionality. Default: false.
$('.js_wiper').wipeSlider({ auto : true, duration : 4000 });
6. Determine the direction of the animation.
// vertical $('.js_wiper').wipeSlider({ direction : 'vertical' });
// random $('.js_wiper').wipeSlider({ direction : 'four' });
// use data attribute to determine the direction for each slide $('.js_wiper').wipeSlider({ direction : 'custom' });
<li class="slide" data-dir="toLeft"> // Add Image Here </li> <li class="slide" data-dir="toRight"> // Add Image Here </li> <li class="slide" data-dir="toTop"> // Add Image Here </li> <li class="slide" data-dir="toBottom"> // Add Image Here </li>
7. Customize the pagination and navigation controls.
// default: true $('.js_wiper').wipeSlider({ pager : true, controls : true, });
.slidesWrap .controlls button, .slidesWrap .pager button { -webkit-appearance: none; box-shadow: none; border: none; background: none; padding: 0; margin: 0; } .slidesWrap .pager ul { list-style-type: none; } .slidesWrap .controlls { position: absolute; top: 0; bottom: 0; left: 0; width: 100%; z-index: 3; display: flex; align-items: center; pointer-events: none } .slidesWrap button { cursor: pointer; outline: none; } .slidesWrap .controlls button { pointer-events: auto; text-indent: -9999px; width: 50px; height: 100%; position: relative; } .slidesWrap .controlls button:after { content: ''; display: block; width: 20px; height: 20px; box-sizing: border-box; border-top: 2px solid #fff; border-right: 2px solid #fff; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; } .slidesWrap .controlls .prevBtn:after { transform: rotate(-135deg); } .slidesWrap .controlls .nextBtn { margin-left: auto; } .slidesWrap .controlls .nextBtn:after { transform: rotate(45deg); } .slidesWrap .pager { display: flex; justify-content: center; align-items: center; z-index: 3; margin: 10px 0 0; } .slidesWrap .pager li+li { margin-left: 10px; } .slidesWrap .pager li button { display: block; text-indent: -9999px; width: 15px; height: 15px; border-radius: 50%; background: #fff; border: 1px solid #000; box-sizing: border-box; } .slidesWrap .pager li button.current { background: #000; }
8. Apply an easing function to the transition effect.
// needs a 3rd easing library for more easing function $('.js_wiper').wipeSlider({ easing : 'linear' });
9. Apply an easing function to the transition effect.
// needs a 3rd easing library for more easing function $('.js_wiper').wipeSlider({ easing : 'linear' });
10. Callback functions.
// needs a 3rd easing library for more easing function $('.js_wiper').wipeSlider({ slideBefore : function(slideNum,slideLength){ console.log('before'); }, slideAfter : function(slideNum,slideLength){ console.log('after'); } });
11. Override the default transition effect.
.slides{ position: relative; } .slides .slide{ width: 300px; height: 300px; position: absolute; top: 0; left: 0; } .slides .slide.active{ animation:display 1s both; z-index: 1; } @keyframes display{ 0%{ transform:scale(0.8); opacity:0; } 100%{ transform:scale(1); opacity:1; } }
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 Usages, please go to the official website.
Be First to Comment