2885-05b138f520966e510c82.js

"use strict";(self.webpackChunkembla_carousel_docs=self.webpackChunkembla_carousel_docs||[]).push([[2885],{2885:function(n,l,t){t.r(l),l.default="import React, { useCallback, useEffect, useState } from 'react';\nimport useEmblaCarousel from 'embla-carousel-react';\nimport AutoScroll from 'embla-carousel-auto-scroll';\nimport { NextButton, PrevButton, usePrevNextButtons } from '../EmblaCarouselArrowButtons';\n\nconst EmblaCarousel = (props) => {\n    const { slides, options } = props;\n    const [emblaRef, emblaApi] = useEmblaCarousel(options, [\n        AutoScroll({ playOnInit: false })\n    ]);\n    const [isPlaying, setIsPlaying] = useState(false);\n    \n    const { prevBtnDisabled, nextBtnDisabled, onPrevButtonClick, onNextButtonClick } = usePrevNextButtons(emblaApi);\n    \n    const onButtonAutoplayClick = useCallback((callback) => {\n        const autoScroll = emblaApi?.plugins()?.autoScroll;\n        if (!autoScroll)\n            return;\n        \n        const resetOrStop = autoScroll.options.stopOnInteraction === false\n            ? autoScroll.reset\n            : autoScroll.stop;\n        \n        resetOrStop();\n        callback();\n    }, [emblaApi]);\n    \n    const toggleAutoplay = useCallback(() => {\n        const autoScroll = emblaApi?.plugins()?.autoScroll;\n        if (!autoScroll)\n            return;\n        \n        const playOrStop = autoScroll.isPlaying()\n            ? autoScroll.stop\n            : autoScroll.play;\n        playOrStop();\n    }, [emblaApi]);\n    \n    useEffect(() => {\n        const autoScroll = emblaApi?.plugins()?.autoScroll;\n        if (!autoScroll)\n            return;\n        \n        setIsPlaying(autoScroll.isPlaying());\n        emblaApi\n            .on('autoScroll:play', () => setIsPlaying(true))\n            .on('autoScroll:stop', () => setIsPlaying(false))\n            .on('reInit', () => setIsPlaying(autoScroll.isPlaying()));\n    }, [emblaApi]);\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>))}\n        </div>\n      </div>\n \n      <div className=\"embla__controls\">\n        <div className=\"embla__buttons\">\n          <PrevButton onClick={() => onButtonAutoplayClick(onPrevButtonClick)} disabled={prevBtnDisabled}/>\n          <NextButton onClick={() => onButtonAutoplayClick(onNextButtonClick)} disabled={nextBtnDisabled}/>\n        </div>\n \n        <button className=\"embla__play\" onClick={toggleAutoplay} type=\"button\">\n          {isPlaying ? 'Stop' : 'Start'}\n        </button>\n      </div>\n    </div>);\n};\n\nexport default EmblaCarousel;\n"}}]);
//# sourceMappingURL=2885-05b138f520966e510c82.js.map