Modulus Slider

Enhanced slider component, based on Swiper, to be used with @wide/modulus.

Install

``
npm install @wide/modulus-slider --save
`

Usage

Register this component using Modulus:
`js
import modulus from '@wide/modulus'
import Slider from '@wide/modulus-slider'

modulus.component('slider', Slider)
`

Import base scss styles (contains Swiper styles):
`scss
@use '@wide/modulus-slider';
/**
* Add pagination module for this example
* @tutorial https://swiperjs.com/swiper-api#modules
*/
@use 'node_modules/swiper/modules/pagination/pagination.scss';
`

And use the provided twig template:
`html
{% include '@wide::modulus-slider' with {
webcomponent: true,
slides: [
'Some HTML',
'Some HTML again'
],
pagination: true,
dataset: {
sync: '#slider2'
}
} %}
`

Or build your own html:
`html


Extend the Slider class and change the configuration (see Swiper API):
`js
import modulus from '@wide/modulus'
import Slider from '@wide/modulus-slider'
/**
* Add pagination module for this example
* @tutorial https://swiperjs.com/swiper-api#modules
*/
import { Pagination } from 'swiper'

modulus.component('slider', class extends Slider {
run() {
const config = {
slidesPerView: 1,
modules: [ Pagination ]
}
super.run({ config })
}
}
`

Libraries

This package uses :
- hotkeys-js
- swiper`

Authors

- Aymeric Assier - github.com/myeti
- Julien Martins Da Costa - github.com/jdacosta
- Sébastien Robillard - github.com/robiseb

License

This project is licensed under the MIT License - see the licence file for details