ArrowControls

ArrowControls provide controller icons for navigating from the current slide to the next or the previous slide.

Component API

Prop	Required?	Description	Default Value
iconLeft	false	A JSX element for the icon of the left arrow/button	pre-included icon
iconLeft	false	A JSX element for the icon of the right arrow/button	pre-included icon
sx	false	Styles applied to the arrow buttons	N/A
iconSx	false	Styles applied to the arrow icons	N/A
isInfinite	false	If true, clicking the next arrow while in the last slide will bring you to the beginning, and vise versa.	false

Example

import { Astonish, Slide, ArrowControls } from "astonish";

function Presentation() {
  return (
    <Astonish slideSx={SlideStyles}>
      <Slide sx={{ background: "hotpink" }}>I'm the first slide!</Slide>

      <Slide sx={{ background: "royalblue" }}>I'm the second!</Slide>

      <Slide sx={{ background: "limegreen" }}>I'm the third!</Slide>

      <ArrowControls />
    </Astonish>
  );
}

export default Presentation;

const SlideStyles = {
  display: "flex",
  flexDirection: "column",
  justifyContent: "center",
  alignItems: "center",
  fontSize: "32px",
  fontFamily: "Arial, Helvetica, Ubuntu, sans-serif",
};

Result: