veams-component-slider

The component represents a simple but powerful slider.

Usage no npm install needed!

<script type="module">
  import veamsComponentSlider from 'https://cdn.skypack.dev/veams-component-slider';
</script>

README

npm version Gitter Chat

Slider

Description

The component represents a simple but powerful slider.

The slider module is a component for cycling through elements, like a carousel or slideshow. It allows users to swipe on touch-enabled devices.

Requirements

  • Veams >= v5.0.0 - Veams Framework.

Installation

Installation with Veams

veams install vc slider

Fields

slider.hbs

The partial is a wrapWith partial.

Settings

  • settings.sliderContextClass {String} [default] - Context class of component.
  • settings.sliderClasses {String} - Modifier classes for component.
  • settings.sliderJsOptions {Object} - JavaScript options which gets stringified.
  • settings.sliderInnerFullWidth {Boolean} [false] - Delete the class .is-container from .slider__content.
  • settings.sliderHidePagination {Boolean} [false] - Hide the pagination when set to true.

slider__controls.hbs

Content

  • content.sliderButtons {Object} - Contains the controls content. When the object is not defined, the controls will not be printed out.
  • content.sliderButtons.prev {String} - Define the button text for the previous button.
  • content.sliderButtons.next {String} - Define the button text for the next button.

slider__list.hbs

The partial is a wrapWith partial.

Settings

  • settings.sliderOverflow {Boolean} - Set this option to true if you want to add the class .is-overflow which gives you the possibility to show all hidden items next to the active element(s).

slider__item.hbs

The partial is a wrapWith partial.

JavaScript Options

The module gives you the possibility to override default options:

  • activeClass {String} ['is-active'] - Class for the active slide.
  • actions {String} ['[data-js-item="slider-actions"]'] - Actions wrapper element in the component.
  • autoPlay {Boolean} [false] - Enable autoplay option of the slider.
  • autoPlayInterval {Number} [3000] - Autoplay speed in milliseconds.
  • cloneClass {String} ['is-cloned'] - For the infinite slider the last and first element get cloned. The cloning class can be overriden.
  • disablePagination {Boolean} [false] - Disable pagination.
  • enableTouchSwipe {Boolean} [true] - Enable support for swipe gestures on touch devices.
  • groupPaginationItems {Boolean} [true] - Enable the grouping of pagination items.
  • hiddenClass {String} ['is-hidden'] - The hidden class used by handling the visibility of the slider.
  • infinite {Boolean} ['is-closed'] - The slider will be set in infinite mode. Can not be used with multiple active slide items.
  • items {String} ['[data-js-item="slider-item"]'] - Define the slide item element.
  • next {String} ['[data-js-item="slider-next"]'] - Define the next button element.
  • prev {String} ['[data-js-item="slider-prev"]'] - Define the prev button element.
  • pagination {String} ['[data-js-item="slider-pagination"]'] - Define the pagination element in which the pagination items are generated in.
  • paginationItemClass {String} ['slider__pagination-list-item'] - Class for the generated pagination item.
  • paginationItemJsAtom {String} ['slider-pagination-item'] - Data attribute for the generated pagination item.
  • paginationList {String} ['[data-js-item="slider-pagination-list"]'] - Define the pagination list element in which the pagination items are generated in.
  • ribbon {String} ['[data-js-item="slider-ribbon"]'] - Define the slider ribbon which is holding all slides and gets the full width.
  • pauseOnHover {Boolean} [true] - When autoplay is set you can enable/disable pause on hover.
  • slideByItemNumber {Number} [false] - You can use the option to override the initial slide step which is the number of current visible items.
  • startAtIndex {Number} [0] - Start index for the slider.
  • openIndex {Number} [null] - Index of panel to be opened on init (zero based).
  • visibleItems {Object} [ {'desktop': 1, 'tablet-large': 1, 'tablet-small': 1, 'mobile-large': 1, 'mobile-medium': 1, 'mobile-small': 1} ] - Define how many slide items should be visible on different viewports.
  • wrapper {String} ['[data-js-item="slider-wrapper"]'] - Define the slider wrapper element.

Sass Options

There are multiple global variables which you can change:

  • $slider-darken [10 !default] - Darken value for hover effects.
  • $slider-unresolved-height [300px !default] - Set a fix height when the slider is in unresolved state.
  • $slider-duration [600ms !default] - Slide item animation duration.
  • $slider-ease-method [ease !default] - Slide item animation ease method.
  • $slider-control-bg-color [#a5cfd1 !default] - Background color of control buttons.
  • $slider-pagination-color [#555 !default] - Background color of pagination items.
  • $slider-pagination-color-active [$slider-pagination-color !default] - Active vackground color of pagination items which gets darken by $slider-darken.
  • $slider-pagination-size [15px !default] - Pagination size (width & height).
  • $slider-pagination-border-radius [25% !default] - Border radius of pagination items.