renderPagination

You can provide custom pagination buttons.

Signature

You can pass a function that returns a react element,
This function is a render prop and its signature is:

({ pages, activePage, onClick }) =>  {/* return your element here */}

pages Array of page index.
activePage The current active page id.
onClick Is the hook to the inner onClick of the Carousel. You can attach it wherever you want within the returned component.

Demo

<Carousel
  itemsToShow={3}
  renderPagination={({ pages, activePage, onClick }) => {
    return (
      <Flex direction="row">
        {pages.map(page => {
          const isActivePage = activePage === page
          return (
            <Square
              key={page}
              onClick={() => onClick(page)}
              active={isActivePage}
            />
          )
        })}
      </Flex>
    )
  }}
>
  <Item>1</Item>
  <Item>2</Item>
  <Item>3</Item>
  <Item>4</Item>
  <Item>5</Item>
  <Item>6</Item>
  <Item>7</Item>
  <Item>8</Item>
  <Item>9</Item>
  <Item>10</Item>
</Carousel>

<Carousel
  itemsToShow={3}
  renderPagination={({ pages, activePage, onClick }) => {
    return (
      <Flex direction="row">
        {pages.map(page => {
          const isActivePage = activePage === page
          return (
            <Square
              key={page}
              onClick={() => onClick(page)}
              active={isActivePage}
            />
          )
        })}
      </Flex>
    )
  }}
>
  <Item>1</Item>
  <Item>2</Item>
  <Item>3</Item>
  <Item>4</Item>
  <Item>5</Item>
  <Item>6</Item>
  <Item>7</Item>
  <Item>8</Item>
  <Item>9</Item>
  <Item>10</Item>
</Carousel>

renderPagination

.css-1r0pe6c{color:inherit;-webkit-text-decoration:none;text-decoration:none;}.css-1r0pe6c:hover{-webkit-text-decoration:underline;text-decoration:underline;}You can provide custom pagination buttons.

Signature

Demo

You can provide custom pagination buttons.