Author: | yusufsefasezer |
---|---|
Views Total: | 230 views |
Official Page: | Go to website |
Last Update: | February 27, 2023 |
License: | MIT |
Preview:

Description:
ysSlider.js is an easy yet customizable JavaScript slider plugin to create responsive, touch-enabled image carousels/slideshows with optional CSS3 transitions.
How to use it:
1. Load the ysSlider.js plugin’s files in the document.
<link rel="stylesheet" href="dist/css/ysslider.css" /> <script src="dist/js/ysslider.js"></script>
2. Add images together with next/prev controls into the slider wrapper.
<div class="ysslider"> <div class="item"><img src="https://source.unsplash.com/CKFgnLGpWqc/600x450" /></div> <div class="item"><img src="https://source.unsplash.com/7Of7_zOhyyA/600x450" /></div> <div class="item"><img src="https://source.unsplash.com/Ah09BJMwFWs/600x450" /></div> <div class="item"><img src="https://source.unsplash.com/pGwXiFyB7JE/600x450" /></div> <div class="controlbar"> <a href="javascript:void(0);" class="prev">Prev</a> <a href="javascript:void(0);" class="next">Next</a> </div> </div>
3. Apply an Animate.css based transition effect to the slide as follows:
<link rel="stylesheet" href="/path/to/cdn/animate.min.css">
<div class="ysslider"> <div class="item"><img src="https://source.unsplash.com/CKFgnLGpWqc/600x450" /></div> <div class="item fadeIn"><img src="https://source.unsplash.com/7Of7_zOhyyA/600x450" /></div> <div class="item zoomIn"><img src="https://source.unsplash.com/Ah09BJMwFWs/600x450" /></div> <div class="item"><img src="https://source.unsplash.com/pGwXiFyB7JE/600x450" /></div> <div class="controlbar"> <a href="javascript:void(0);" class="prev">Prev</a> <a href="javascript:void(0);" class="next">Next</a> </div> </div>
4. Initialize the slider and enable the animation.
var mySlider = new ysSlider({ animate: true });
5. Enable the prev/next controls.
document.querySelector(".prev").onclick = function () { mySlider.prev(); } document.querySelector(".next").onclick = function () { mySlider.next(); }
6. Enable/disable the autoplay functionality.
var mySlider = new ysSlider({ auto: true, pause: 2000 });
7. Enable/disable the next/prev controls.
var mySlider = new ysSlider({ controls: true, controlBar: '.controlbar });
8. Enable/disable touch interactions. Default: false.
var mySlider = new ysSlider({ touch: true });
9. Default selectors.
var mySlider = new ysSlider({ wrapper: '.ysslider', itemClass: '.item' });
10. More API methods.
// destroy the slider instance mySlider.destroy(); // return the total number of slides in the slider mySlider.getSlideCount(); // return the current slide index in the slider. mySlider.getCurrentSlide();
Changelog:
02/27/2023
- v1.0.0