@wide/modulus-slider NPM

Modulus Slider

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

Install

npm install @wide/modulus-slider --save

Usage

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';
/**
 * 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:

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

Or build your own html:

<div class="slider swiper" 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 class="slider_pagination swiper-pagination"></div>
</div>

Advanced usage

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

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 })
    }
}