JS-Slider

Simple JS Slider.

Usage in script file:

  import slider from './modules/slider';

Initiate example:

  slider({
      slidePack: '.main-slider-item',
      wrapper: '.main-slider-wrapper',
      field: '.main-slider',
      direction: 'V',
      timer: 10,
      indicators: true
  });

Where as:

Necessary fields:

slidePack - selector of slide images/divs,

field - selector of slider field, containing wrapper with slides,

wrapper - selector of inner wrapper for the slides,

Needed if arrow buttons avaible, can be used separately:

next - selector of next navigation button/arrow selector,

prev - selector of previous navigation button/arrow selector,

Needed if on-page slide-counters avaible, can be used separately:

totalCounter - selector of total slides counter, changes text depending on number of slides,

currentCount - selector of current slide counter,

Other:

indicators - false(def.)/true - creates dot-indicators allowing to pick slide,

direction - default is horizontal, use 'V' or 'vertical' for vertical slider direction,

timer - time in seconds between slideshow change, default is off

HTML example:

  <div class=main-slider>
    <div class="main-slider-wrapper">
      <div class=main-slider-item>
        <img src=assets/img/main-1.png alt>
      </div>
      <div class=main-slider-item>
        <img src=assets/img/main-2.png alt>
      </div>
    </div>
  </div>