Miss any of our Open RFC calls?Watch the recordings here! »

@wide/modulus-slider

2.0.0 • Public • Published

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:

import modulus from '@wide/modulus'
import Slider from '@wide/modulus-slider'
 
modulus.component('slider', Slider)

Import base scss styles (contains Swiper styles):

@use '@wide/modulus-slider';

And use the provided twig template:

{% include '@wide::modulus-slider' with {
  slides: [
    'Some HTML',
    'Some HTML again'
  ],
  sync: '#slider2'
} %}

Or build your own html:

<div class="slider swiper-container" is="slider" data-sync="#slider2">
    <div class="swiper-wrapper">
        <div class="slider_slide swiper-slide">
            Some HTML
        </div>
        <div class="slider_slide swiper-slide">
            Some HTML again
        </div>
    </div>
</div>

Advanced usage

Extend the Slider class and change the configuration (see Swiper docs):

import Slider from '@wide/modulus-slider'
 
class MySlider extends Slider {
 
    run() {
        super.run({
            slidesPerView: 1
        })
    }
 
}

Or programmatically instanciate a slider:

import Slider from '@wide/modulus-slider'
 
const slider = Slider.create(el, name, {
    slidesPerView: 1
}) 

Libraries

This package uses :

Authors

License

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

Keywords

none

Install

npm i @wide/modulus-slider

DownloadsWeekly Downloads

2

Version

2.0.0

License

MIT

Unpacked Size

20.1 kB

Total Files

9

Last publish

Collaborators

  • avatar
  • avatar
  • avatar
  • avatar