SHARE
TWEET

Untitled

a guest Jul 16th, 2019 54 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. const pages = [
  2.   'https://images.pexels.com/photos/62689/pexels-photo-62689.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260',
  3.   'https://images.pexels.com/photos/296878/pexels-photo-296878.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260',
  4.   'https://images.pexels.com/photos/1509428/pexels-photo-1509428.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260',
  5.   'https://images.pexels.com/photos/351265/pexels-photo-351265.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260',
  6.   'https://images.pexels.com/photos/924675/pexels-photo-924675.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260'
  7. ]
  8.  
  9.  
  10.  
  11. function Viewpager() {
  12.   const index = useRef(0)
  13.   const [props, set] = useSprings(pages.length, i => ({ x: i * window.innerWidth, sc: 1, display: 'block' }))
  14.   const bind = useGesture(({ down, delta: [xDelta], direction: [xDir], distance, cancel }) => {
  15.     if (down && distance > window.innerWidth / 2)
  16.       cancel((index.current = clamp(index.current + (xDir > 0 ? -1 : 1), 0, pages.length - 1)))
  17.     set(i => {
  18.       if (i < index.current - 1 || i > index.current + 1) return { display: 'none' }
  19.       const x = (i - index.current) * window.innerWidth + (down ? xDelta : 0)
  20.       const sc = down ? 1 - distance / window.innerWidth / 2 : 1
  21.       return { x, sc, display: 'block' }
  22.     })
  23.   })
  24.   return props.map(({x, display, sc }, i) => (
  25.     <animated.div {...bind()} key={i} style={{ display, transform: x.interpolate(x => `translate3d(${x}px,0,0)`) }}>
  26.       <animated.div style={{ transform: sc.interpolate(s => `scale(${s})`), backgroundImage: `url(${pages[i]})` }} />
  27.     </animated.div>
  28.    
  29.         ))
  30.    
  31.   }
  32.  
  33. export default Viewpager;
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!
 
Top