Carousel

A custom carousel element.

Provided Aliases: $carousel, $slide, $index

$slide is the alias for individual item in the array of items passed into carousel. $index is the alias for the index of that item. The names of $slide and $index depend on the values passed as props for itemAlias and indexAlias respectively.

Example

const items = [
  { productTitle: 'toothpaste', imageUrl: '/image/3245.tif'},
  { productTitle: 'shampoo', imageUrl: '/image/6732.tif'},
  { productTitle: 'shirt', imageUrl: '/image/6212.tif'},
 ];
const handler = () => console.log('Click!');

<gb-carousel items="{ items }" speed="{ 300 }" slides-to-show="{ 2 }" slides-to-scroll="{ 2 }">
    <gb-link url="/details/{ $slide.productId }" on-click="{ handler }">
      <img src="{ $slide.imageUrl }">
    </gb-link>
    <gb-link url="/details/{ $slide.productId }" on-click="{ handler }">
      <p>{ $slide.productTitle }</p>
    </gb-link>
</gb-carousel>

Properties

Property	Type	Default	Required	Description
`items`	array	`[]`	yes	The total items to display in a carousel. Each item is one slide.
`speed`	number	`0`		The value to control the duration of slide transitions. It is in millisecond and works exactly as ‘transition-duration’ for transition property in CSS3. If set to 0, there is no transition for slide changes.
`slidesToShow`	number	`1`		The number of items that display in the viewport of a carousel.
`slidesToScroll`	number	`1`		The number of items that scroll per time.
`itemAlias`	string	`slide`		The name each item will be aliased as.
`indexAlias`	string	`index`		The name each index will be aliased as.

State

Property	Type	Default	Description
`currentSlide`	number	`0`	The active slide index. If slidesToShow is more than 1, it is the index of the leftmost item.
`transitioning`	boolean	`false`	True when carousel is transitioning, false before and after transitioning or when speed is set to 0.
`items`	array	`[]`	The total items that include original items passed in and cloned items for transition purpose.

Events

This component does not listen for any events.