react-film v3.1.0

react-film

React component for showing carousel just like a film strip.

This project scaffolding is from react-component-template.

Demo

Try out our demo at https://spyip.github.io/react-film/.

Sample code

<BasicFilm height={ 316 }>
  <img alt="Cat 01" src="image/01.jpg" />
  <img alt="Cat 02" src="image/02.jpg" />
  <img alt="Cat 03" src="image/03.jpg" />
</BasicFilm>

Note: we need to specify height here because there are no CSS rule one can use to hide scroll bars in Firefox.

Features

• Native horizontal scrolling
  • Virtual scroll bar
  • Optionally, show when hover
  • Support touch scrolling
• Bring your own flipper
  • Sample: show only when overflow
  • Sample: show when hover
• Bring your own scrollbar
  • Sample: show only when overflow
  • Sample: show when hover
• Bring your own dots
  • Sample: show only when overflow
• Variable container width
  • Users can resize the container width any time they want
• Variable item width:
  • Users can resize item width any time they want
  • Item may resize itself from time to time (consider when the image is not loaded)
• Minimal styling as possible, let user customize it
• Support keyboard left/right arrow (supported natively)

Props

Context

Contributions

Like us? Star us.

Want to make it better? File us an issue.

Don't like something you see? Submit a pull request.