veams-component-slider v5.1.2

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.