4193-4d65907de41b8c97b98b.js

"use strict";(self.webpackChunkembla_carousel_docs=self.webpackChunkembla_carousel_docs||[]).push([[4193],{4193:function(_,n,e){e.r(n),n.default='import React, { \n/*__NAV_AUTOPLAY_REPLACE_START__*/ useCallback /*__NAV_AUTOPLAY_REPLACE_END__*/ } from \'react\';\nimport useEmblaCarousel from \'embla-carousel-react\';\n/*__DOT_BUTTONS_REPLACE_START__*/\nimport { DotButton, useDotButton } from \'./EmblaCarouselDotButton\';\n/*__DOT_BUTTONS_REPLACE_END__*/\n/*__PREV_NEXT_BUTTONS_REPLACE_START__*/\nimport { PrevButton, NextButton, usePrevNextButtons } from \'./EmblaCarouselArrowButtons\';\n/*__PREV_NEXT_BUTTONS_REPLACE_END__*/\n/*__AUTOPLAY_REPLACE_START__*/\nimport Autoplay from \'embla-carousel-autoplay\';\n/*__AUTOPLAY_REPLACE_END__*/\nimport imageByIndex from \'../imageByIndex\';\n\nconst EmblaCarousel = (props) => {\n    const { slides, options } = props;\n    const [emblaRef, emblaApi] = useEmblaCarousel(options, \n    /*__PLUGINS_REPLACE_START__*/\n    [\n        /*__AUTOPLAY_REPLACE_START__*/\n        Autoplay()\n        /*__AUTOPLAY_REPLACE_END__*/\n    ]\n    /*__PLUGINS_REPLACE_END__*/\n    );\n    \n    /*__NAV_AUTOPLAY_REPLACE_START__*/\n    const onButtonClick = useCallback((emblaApi) => {\n        const { autoplay } = emblaApi.plugins();\n        if (!autoplay)\n            return;\n        if (autoplay.options.stopOnInteraction !== false)\n            autoplay.stop();\n    }, []);\n    /*__NAV_AUTOPLAY_REPLACE_END__*/\n    \n    /*__DOT_BUTTONS_REPLACE_START__*/\n    const { selectedIndex, scrollSnaps, onDotButtonClick } = useDotButton(emblaApi, \n    /*__NAV_AUTOPLAY_REPLACE_START__*/ onButtonClick /*__NAV_AUTOPLAY_REPLACE_END__*/);\n    /*__DOT_BUTTONS_REPLACE_END__*/\n    \n    /*__PREV_NEXT_BUTTONS_REPLACE_START__*/\n    const { prevBtnDisabled, nextBtnDisabled, onPrevButtonClick, onNextButtonClick } = usePrevNextButtons(emblaApi, \n    /*__NAV_AUTOPLAY_REPLACE_START__*/ onButtonClick /*__NAV_AUTOPLAY_REPLACE_END__*/);\n    /*__PREV_NEXT_BUTTONS_REPLACE_END__*/\n    \n    return (<div className="embla" \n    /*__DIRECTION_RTL_REPLACE_START__*/ dir="rtl" /*__DIRECTION_RTL_REPLACE_END__*/>\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              <img className="embla__slide__img" src={imageByIndex(index)} alt="Your alt text"/>\n            </div>))}\n        </div>\n      </div>\n \n      {/*__PREV_NEXT_BUTTONS_REPLACE_START__*/}\n      <div className="embla__buttons">\n        <PrevButton onClick={onPrevButtonClick} disabled={prevBtnDisabled}/>\n        <NextButton onClick={onNextButtonClick} disabled={nextBtnDisabled}/>\n      </div>\n      {/*__PREV_NEXT_BUTTONS_REPLACE_END__*/}\n \n      {/*__DOT_BUTTONS_REPLACE_START__*/}\n      <div className="embla__dots">\n        {scrollSnaps.map((_, index) => (<DotButton key={index} onClick={() => onDotButtonClick(index)} className={\'embla__dot\'.concat(index === selectedIndex ? \' embla__dot--selected\' : \'\')}/>))}\n      </div>\n      {/*__DOT_BUTTONS_REPLACE_END__*/}\n    </div>);\n};\n\nexport default EmblaCarousel;\n'}}]);
//# sourceMappingURL=4193-4d65907de41b8c97b98b.js.map