Falcon UI

swipeable

Swipeable and SwipeableItem components are designed as foundation for building image galleries, carousels in very straightforward way using CSS Scroll Snap capabilities. Both accept responsive, theme-based style props for styles customization.

xxxxxxxxxx
 
import { Swipeable, SwipeableItem } from '@deity/falcon-ui';

 
<Swipeable css={{ height: 300 }}>
  <SwipeableItem
    as={Image}
    src="https://images.unsplash.com/photo-1525018827743-4a889b27b980?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=84cb2187a5d5ce3a1b579c70b1beae98&auto=format&fit=crop&w=1950&q=80"
  />
  <SwipeableItem
    as={Image}
    src="https://images.unsplash.com/photo-1533796846028-7243a1adf748?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=fab1a48ac8030aee83bb5bb1a350a3c3&auto=format&fit=crop&w=668&q=80"
  />
  <SwipeableItem
    as={Image}
    src="https://images.unsplash.com/photo-1503664974666-c4b8f669f3ae?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=e1a277c929d2a8ccf0982e44c33fc732&auto=format&fit=crop&w=1400&q=80"
  />
</Swipeable>