Bjorn Snelders

Luca Micheli

Dario Veronesi

Gabriella Clare Marino

Bogdan Dada

Chad Greiter

Karsten Würth

Mike Swigunski

Michele Bitetto

davide ragusa

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