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.