Analytics & Reports


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.


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 url="/details/{ $slide.productId }" on-click="{ handler }">
      <p>{ $slide.productTitle }</p>


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.


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.


This component does not listen for any events.