Liubov Ilchuk

Mariya Georgieva

Karsten Würth

Lopez Robin

Bjorn Snelders

Luca Micheli

Robert Anitei

redcharlie

Gabriella Clare Marino

Will Truettner

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