Fully Responsive Background Slideshow With Pure JavaScript – PureSlider

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 () {
    }
    
});