Skip to content

Latest commit

 

History

History
89 lines (62 loc) · 1.64 KB

README.md

File metadata and controls

89 lines (62 loc) · 1.64 KB
Raw

What is this?

Get simple slider for your application

demo

Version

4.6.0

Installation

Install the package

npm
npm install vm-slider-js
yarn
yarn add vm-slider-js

Usage

HTML
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Slider App</title>
    <style>
        * {
            box-sizing: border-box;
        }
    </style>
</head>

<body>
    <div id="slider">
        <img src="#" alt="Slider #1" />
        <img src="#" alt="Slider #2" />
        <img src="#" alt="Slider #3" />
        <img src="#" alt="Slider #4" />
    </div>

    <script src="./dist/vm-slider-js.js"></script>
    <script>
        document.addEventListener("DOMContentLoaded", function (event) {
            new SliderJS('slider', options)
        })
    </script>
</body>

</html>
NPM
import { SliderJS } from 'vm-slider-js'

new SliderJS('slider', options)

Options

You can pass the 2nd argument as an object with options

SliderJS supports 5 options which are all optional:

  • width - size of images in (px) (Default 940)
  • height - height of images (px) (Default is 270)
  • iconSize - height of icons (px) (Default is 60)
  • timeout - auto sliding timer (ms) (Default is 3000)
  • hideControls - true / false (Default is false)