Ricardo Gomez Angel

Karsten Würth

Matthew DeBlieux

redcharlie

Domenico Loia

Chris Czermak

Liubov Ilchuk

Heidi Kaden

davide ragusa

Bjorn Snelders

Gallereact

Here you have a playground to try out all the possible customizations availables for gallereact.
Set the options you prefer then at the bottom of the page you can copy your custom code snippet.
For getting started check out the npm package gallereact

Options

Default

Option 1

Option 2

Booleans

Swipe

Cover

ArrowOnHover

Transition

Loop

AutoPlay

Titles

Captions

DisplayPreview

DisplayDot

DisplayArrows

Colors

PrimarySecondary

Styles

Outer (your external container)

{ /* insert your style here */ }

{ /* insert your style here */ }

Container

{ /* insert your style here */ }

{ /* insert your style here */ }

Slide

{
  width:"80%",
  height:"90%",
  margin:"5% 10%",
  boxShadow:"0 2px 20px -1px #2222"
}

{
  width:"80%",
  height:"90%",
  margin:"5% 10%",
  boxShadow:"0 2px 20px -1px #2222"
}

Tagline

{
  background:"#FFF"
}

{
  background:"#FFF"
}

Title

{
  fontWeight:800,
  fontSize:"1.2rem"
}

{
  fontWeight:800,
  fontSize:"1.2rem"
}

Caption

{ /* insert your style here */ }

{ /* insert your style here */ }

DotsContainer

{ /* insert your style here */ }

{ /* insert your style here */ }

Dot

{
  width:"25px",
  height:"3px",
  borderRadius:0,
  margin:"0px"
}

{
  width:"25px",
  height:"3px",
  borderRadius:0,
  margin:"0px"
}

DotActive

{ /* insert your style here */ }

{ /* insert your style here */ }

Arrow

{ /* insert your style here */ }

{ /* insert your style here */ }

Preview

{ /* insert your style here */ }

{ /* insert your style here */ }

PreviewActive

{ /* insert your style here */ }

{ /* insert your style here */ }

Output code

<Gallereact
  images={[/* array of images */]} 
  swipe={true} 
  loop={false} 
  titles={true} 
  displayArrows={false} 
  slideStyle={{width:"80%",height:"90%",margin:"5% 10%",boxShadow:"0 2px 20px -1px #2222"}} 
  taglineStyle={{background:"#FFF"}} 
  titleStyle={{fontWeight:800,fontSize:"1.2rem"}} 
  dotStyle={{width:"25px",height:"3px",borderRadius:0,margin:"0px"}}  
/>

Made with ❤️ by div.leo