FlexCarousel Documentation

<div class="flexcarousel"
    data-width="auto">

        <div
            data-width="auto">
                first item
        </div>
        <div>second item</div>
        <div>third item</div>
</div>
Attribute Values Description
data-selector-show auto | true | false
  • Optional.
  • Default : auto
  • auto : if the width of the items including spacing is equal or less than the viewport width, no selectors will be shown.
data-displayCount auto | integer
  • Optional.
  • Default : auto
  • auto : number of items visible in the carousel viewport will depend on several factors : peek, peekMinSize, individual item width settings, gap & caroursel viewport width.
  • <integer> : set to any number of items fully visible in the carousel viewport. If there is not enough space for the items using their width values, first gaps are removed, then hardcoded margins, then all items with auto width will be squeezed down to 4 pixels (hiding all content) and lastly other items will be squeezed down to 4 pixels.
data-draggable true | false
  • Optional.
  • Default : true
  • true : a user can scroll the carousel by dragging it using either the mouse or finger. If there are extra-space, draggable will be forced to false.
  • false : a user can NOT scroll the carousel by dragging it.
data-extra-space items | gap | none
  • Optional.
  • Default : items
  • If all the carousel items fill less than the available carousel space, the carousel have extra-space. In the data-extra-space value we specify how to handle that extra space.
  • items : grow the size of the carousel items until there is no extra space left.
  • gap : grow the size of the gap between the items until there is no extra space left.
  • none : do nothing about the extra space, just let it be.
data-item-width auto | length in pixels
  • Optional.
  • Default : auto
  • Sets the width for each item.
  • auto : Item width will adjust, eg. if displayCount is set to 1, the item will get the width of the full length of the carousel viewport or if no displayCount is set, and the sum width of all the items are greater than the carousel viewport, the item width will be adjusted to the natural width of its content.
  • Note that apart from auto, this value can be set only in pixels px, not % or em etc.
Item
data-width auto | length in pixels
  • Optional.
  • Default : auto
  • Overwrites the width for this particular item set by data-item-width.
  • Note that apart from auto, this value can be set only in pixels px, not % or em etc.
data-disable true | false
  • Optional.
  • Default : false
  • true : will remove this item from the carousel.
  • false : will not remove this item from the carousel.


API

Action Code Description
update
  • FlexCarousel.update(carouselId, options)
  • carouselId : Mandatory. specify which carousel instance should be updated.
  • options : Optional. Object containing any properties that should be updated.
Update a carousel instance typically to respond to screen changes or initial screen size.