https://github.com/blacksaildivision/vjslider

Tiny ES6 slider - infinite, responsive, powered by WebPack
https://github.com/blacksaildivision/vjslider

Last synced: about 5 hours ago
JSON representation

Tiny ES6 slider - infinite, responsive, powered by WebPack

• Host: GitHub
• URL: https://github.com/blacksaildivision/vjslider
• Owner: blacksaildivision
• Created: 2016-06-01T06:46:26.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2023-08-29T14:04:48.000Z (about 1 year ago)
• Last Synced: 2024-09-10T15:47:55.305Z (2 months ago)
• Language: JavaScript
• Homepage:
• Size: 1.93 MB
• Stars: 16
• Watchers: 4
• Forks: 3
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md

Awesome Lists containing this project

README

        
vjslider - Vanilla JS Slider

============================

vjslider is:

 - super simple

 - infinite

 - responsive

 - touch friendly

 - no dependencies

 - tiny 2.25kB gzipped

 - written in ES6

 - powered by WebPack

 - tested with Jest and Puppeteer

How to use?

-----------

HTML markup: 

```html



    


        
Slide 1

        
Slide 2

        
Slide 3

    



```


Include styles:

```html

```

Include vjslider library:

```html

```

Run slider:

```js

// Init slider

const options = {};

const slider = new VJSlider(document.querySelector('.vjslider'), options);

// You can manually change slides by using next() and prev() functions:

slider.next();

slider.prev();

// You can destroy slider with

slider.destroy();

// You can reload slider (with alternative options if needed passed as argument to reload method)

slider.reload({numberOfVisibleSlides: 3});

```

Full example in demo directory. 

Options

-------

You can use following options:

`numberOfVisibleSlides` (_default: 1_) - display given number of slides in slider viewport.

Development

-----------

vjslider is build with WebPack. 

WebPack is responsible for building and linting JS files, building CSS from Sass files. If you need pure ES6 version, use script from ./src directory.

Install dependencies, webpack and run local server

```

npm install

npm start

```

Prepare production build

```

npm run build

```

Webpack has local server running after `npm start` command. To see the demo visit [http://localhost:8363/demo](http://localhost:8363/demo)

Run tests (webpack-dev-server must be up and running)

```

npm test

```