1330-43e1b7833a41d28c8126.js.map

{"version":3,"file":"1330-43e1b7833a41d28c8126.js","mappings":"uIAAA,opF","sources":["webpack://embla-carousel-docs/./src/components/Sandbox/React/SandboxFilesDist/Parallax/EmblaCarousel.jsx"],"sourcesContent":["export default \"import React, { useCallback, useEffect, useState } from 'react';\\nimport useEmblaCarousel from 'embla-carousel-react';\\nimport { flushSync } from 'react-dom';\\nimport imageByIndex from '../imageByIndex';\\n\\nconst TWEEN_FACTOR = 1.2;\\n\\nconst EmblaCarousel = (props) => {\\n    const { slides, options } = props;\\n    const [emblaRef, emblaApi] = useEmblaCarousel(options);\\n    const [tweenValues, setTweenValues] = useState([]);\\n    \\n    const onScroll = useCallback(() => {\\n        if (!emblaApi)\\n            return;\\n        \\n        const engine = emblaApi.internalEngine();\\n        const scrollProgress = emblaApi.scrollProgress();\\n        \\n        const styles = emblaApi.scrollSnapList().map((scrollSnap, index) => {\\n            let diffToTarget = scrollSnap - scrollProgress;\\n            \\n            if (engine.options.loop) {\\n                engine.slideLooper.loopPoints.forEach((loopItem) => {\\n                    const target = loopItem.target();\\n                    if (index === loopItem.index && target !== 0) {\\n                        const sign = Math.sign(target);\\n                        if (sign === -1)\\n                            diffToTarget = scrollSnap - (1 + scrollProgress);\\n                        if (sign === 1)\\n                            diffToTarget = scrollSnap + (1 - scrollProgress);\\n                    }\\n                });\\n            }\\n            return diffToTarget * (-1 / TWEEN_FACTOR) * 100;\\n        });\\n        setTweenValues(styles);\\n    }, [emblaApi, setTweenValues]);\\n    \\n    useEffect(() => {\\n        if (!emblaApi)\\n            return;\\n        onScroll();\\n        emblaApi.on('scroll', () => {\\n            flushSync(() => onScroll());\\n        });\\n        emblaApi.on('reInit', onScroll);\\n    }, [emblaApi, onScroll]);\\n    \\n    return (<div className=\\\"embla\\\">\\n      <div className=\\\"embla__viewport\\\" ref={emblaRef}>\\n        <div className=\\\"embla__container\\\">\\n          {slides.map((index) => (<div className=\\\"embla__slide\\\" key={index}>\\n              <div className=\\\"embla__slide__number\\\">\\n                <span>{index + 1}</span>\\n              </div>\\n              <div className=\\\"embla__parallax\\\">\\n                <div className=\\\"embla__parallax__layer\\\" style={{\\n                ...(tweenValues.length && {\\n                    transform: `translateX(${tweenValues[index]}%)`\\n                })\\n            }}>\\n                  <img className=\\\"embla__slide__img embla__parallax__img\\\" src={imageByIndex(index)} alt=\\\"Your alt text\\\"/>\\n                </div>\\n              </div>\\n            </div>))}\\n        </div>\\n      </div>\\n    </div>);\\n};\\n\\nexport default EmblaCarousel;\\n\";"],"names":[],"sourceRoot":""}