Enhanced slider component, based on `Swiper`, to be used with `@wide/modulus`.
npm install @wide/modulus-sliderEnhanced slider component, based on Swiper, to be used with @wide/modulus.
```
npm install @wide/modulus-slider --save
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 })
}
}
`
This package uses :
- hotkeys-js
- swiper`
- Aymeric Assier - github.com/myeti
- Julien Martins Da Costa - github.com/jdacosta
- Sébastien Robillard - github.com/robiseb
This project is licensed under the MIT License - see the licence file for details