Author: | Grosloup |
---|---|
Views Total: | 4,484 views |
Official Page: | Go to website |
Last Update: | October 11, 2016 |
License: | MIT |
Preview:

Description:
PureSlider is a tiny, pure JavaScript library which helps you generate a responsive, automatic and fully configurable slideshow/slider from plain html/javascript.
How to use it:
First you need to include the PureSlider’s files on the html page.
<link rel="stylesheet" href="dist/css/pure_slide.min.css"> <script src="dist/js/PureSlider.min.js"></script>
Create a set of slides for the slideshow/slider and add your own images as backgrounds to them. The ‘data-slide-laps’ attribute is used to specify the transition delay in seconds for each slide.
<div class="ps-slider" id="mySlider"> <div class="ps-slides" id="mySlides"> <div id="slide10" class="ps-slide" data-slide-laps="5" style="background-image: url('1.jpg');"> <div class="inner"> <h1>Supports Inner Content</h1> </div> </div> <div id="slide20" class="ps-slide" data-slide-laps="4" style="2.jpg');"></div> <div id="slide30" class="ps-slide" style="background-image: url('3.jpg');"></div> <div id="slide40" class="ps-slide" style="background-image: url('4.jpg');"></div> <div id="slide50" class="ps-slide" style="background-image: url('5.jpg');"></div> </div> </div>
Create a new slider instance with some options.
var ps = new PureSlider({ // options here } );
Initialize the slider and done.
ps.init(document.querySelector('#mySlider'));
All default options to customize the slider/slideshow.
var ps = new PureSlider({ // enable autoplay autoplay: false, // pause on hover stopOnHover: true, // transition delay in ms laps: 3000, // show navigation showNav: true, // show pagination showBtn: true, // or 'backward' direction: 'forward', // CSS classes currentCursorClassName: 'ps-current', currentSlideClassName: 'ps-current', slideClassName: 'ps-slide', slidesClassName: 'ps-slides', sliderNavClassName: 'ps-slider-nav', // navigation options prevBtnClassName: 'ps-left-nav-btn', prevBtnHtml: 'prev', nextBtnClassName: 'ps-right-nav-btn', nextBtnHtml: 'next', // callbacks onBeforeSlideChangeCb: function () { }, onAfterSlideChangeCb: function () { }, onBeforeStartCb: function () { }, onAfterStartCb: function () { }, onBeforeStopCb: function () { }, onAfterStopCb: function () { }, onBeforeInitCb: function () { }, onAfterInitCb: function () { } });