Federico Beccari

Damiano Baschiera

Karol Kaczorek

Noah Mayer

Liubov Ilchuk

Dennis van den Worm

Nellia Kurme

Chris Czermak

Caleb Stokes

Karsten Würth

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