onChange

`onChange` will pass the new current `item-object` and current `page-index`:

(currentItem, pageIndex) => {/*...*/}

The item-object has the shape of:

{
    item: {/* your item */},
    index: // the item's index number 
}

<Carousel
  itemsToShow={2}
  onChange={(currentItem, pageIndex) =>
    alert(JSON.stringify({ currentItem, pageIndex }))
  }
>
  <Item someProp="cool1">1</Item>
  <Item someProp="cool2">2</Item>
  <Item someProp="cool3">3</Item>
  <Item someProp="cool4">4</Item>
  <Item someProp="cool5">5</Item>
  <Item someProp="cool6">6</Item>
</Carousel>

<Carousel
  itemsToShow={2}
  onChange={(currentItem, pageIndex) =>
    alert(JSON.stringify({ currentItem, pageIndex }))
  }
>
  <Item someProp="cool1">1</Item>
  <Item someProp="cool2">2</Item>
  <Item someProp="cool3">3</Item>
  <Item someProp="cool4">4</Item>
  <Item someProp="cool5">5</Item>
  <Item someProp="cool6">6</Item>
</Carousel>

onChange

.css-1r0pe6c{color:inherit;-webkit-text-decoration:none;text-decoration:none;}.css-1r0pe6c:hover{-webkit-text-decoration:underline;text-decoration:underline;}.css-ueqitl{font-family:Inconsolata;}onChange will pass the new .css-1vg6q84{font-weight:700;}current item-object and current page-index:

`onChange` will pass the new current `item-object` and current `page-index`: