diff --git a/index.html b/index.html index 9e48387c..e2d075d4 100644 --- a/index.html +++ b/index.html @@ -1 +1 @@ -
import React from 'react';\nimport AliceCarousel from 'react-alice-carousel';\nimport 'react-alice-carousel/lib/alice-carousel.css';\n\nconst itemsLength = Array.from({ length: 5 });\n\nconst items = itemsLength.map((item, index) => {\n const style = { height: 200 + index * 10 };\n return <div className="item" style={style} data-value={index + 1} />;\n});\n\nconst Carousel = () => (\n <AliceCarousel\n autoHeight \n infinite\n mouseTracking\n items={items}\n />\n);\n
'},4826:(e,n,t)=>{t.r(n),t.d(n,{default:()=>a});const a='import React from 'react';\nimport AliceCarousel from 'react-alice-carousel';\nimport 'react-alice-carousel/lib/alice-carousel.css';\n\nconst items = [\n <div className="item" data-value="1">1</div>,\n <div className="item" data-value="2">2</div>,\n <div className="item" data-value="3">3</div>,\n <div className="item" data-value="4">4</div>,\n <div className="item" data-value="5">5</div>,\n];\n\nconst Carousel = () => (\n <AliceCarousel\n autoPlay\n autoPlayControls\n autoPlayStrategy="none"\n autoPlayInterval={1000}\n animationDuration={1000}\n animationType="fadeout"\n infinite\n touchTracking={false}\n disableDotsControls\n disableButtonsControls\n items={items}\n />\n);\n
'},3505:(e,n,t)=>{t.r(n),t.d(n,{default:()=>a});const a='import React from 'react';\nimport AliceCarousel from 'react-alice-carousel';\nimport 'react-alice-carousel/lib/alice-carousel.css';\n\nconst itemsLength = Array.from({ length: 5 });\n\nconst items = itemsLength.map((item, index) => {\n const style = { width: 150 + index * 100 };\n return (<div className="item" style={style}>{index + 1}</div>);\n});\n\nconst Carousel = () => (\n <AliceCarousel\n autoWidth\n mouseTracking\n items={items}\n />\n);\n
'},7464:(e,n,t)=>{t.r(n),t.d(n,{default:()=>a});const a='import React from 'react';\nimport AliceCarousel from 'react-alice-carousel';\nimport 'react-alice-carousel/lib/alice-carousel.css';\n\nconst itemsLength = Array.from({ length: 5 });\n\nconst items = itemsLength.map((item, index) => {\n const style = { width: 150 + index * 100 };\n return (<div className="item" style={style}>{index + 1}</div>);\n});\n\nconst Carousel = () => (\n <AliceCarousel\n autoWidth \n infinite\n mouseTracking\n items={items}\n />\n);\n
'},8619:(e,n,t)=>{t.r(n),t.d(n,{default:()=>a});const a='import React from 'react';\nimport AliceCarousel from 'react-alice-carousel';\nimport 'react-alice-carousel/lib/alice-carousel.css';\n\nconst responsive = {\n 0: { \n items: 1\n },\n 568: { \n items: 2\n },\n 1024: {\n items: 3, \n itemsFit: 'contain'\n },\n};\n\nconst items = [\n <div className="item" data-value="1">1</div>,\n <div className="item" data-value="2">2</div>,\n];\n\nconst Carousel = () => (\n <AliceCarousel\n mouseTracking\n items={items}\n responsive={responsive}\n />\n);\n
'},8788:(e,n,t)=>{t.r(n),t.d(n,{default:()=>a});const a='import React from 'react';\nimport AliceCarousel from 'react-alice-carousel';\nimport 'react-alice-carousel/lib/alice-carousel.css';\n\nconst responsive = {\n 0: { items: 1 },\n 568: { items: 2 },\n 1024: { items: 3 },\n};\n\nconst items = [\n <div className="item" data-value="1">1</div>,\n <div className="item" data-value="2">2</div>,\n <div className="item" data-value="3">3</div>,\n <div className="item" data-value="4">4</div>,\n <div className="item" data-value="5">5</div>,\n];\n\nconst Carousel = () => (\n <AliceCarousel\n mouseTracking\n items={items}\n responsive={responsive}\n controlsStrategy="alternate"\n />\n);\n
'},8358:(e,n,t)=>{t.r(n),t.d(n,{default:()=>a});const a='import React, { useState } from 'react';\nimport AliceCarousel from 'react-alice-carousel';\nimport 'react-alice-carousel/lib/alice-carousel.css';\n\nconst items = [\n <div className="item" data-value="1">1</div>,\n <div className="item" data-value="2">2</div>,\n <div className="item" data-value="3">3</div>,\n <div className="item" data-value="4">4</div>,\n <div className="item" data-value="5">5</div>,\n];\n\nconst thumbItems = (items, [setThumbIndex, setThumbAnimation]) => {\n return items.map((item, i) => (\n <div className="thumb" onClick={() => (setThumbIndex(i), setThumbAnimation(true))}>\n {item}\n </div>\n ));\n};\n\nconst Carousel = () => {\n const [mainIndex, setMainIndex] = useState(0);\n const [mainAnimation, setMainAnimation] = useState(false);\n const [thumbIndex, setThumbIndex] = useState(0);\n const [thumbAnimation, setThumbAnimation] = useState(false);\n const [thumbs] = useState(thumbItems(items, [setThumbIndex, setThumbAnimation]));\n\n const slideNext = () => {\n if (!thumbAnimation && thumbIndex < thumbs.length - 1) {\n setThumbAnimation(true);\n setThumbIndex(thumbIndex + 1);\n }\n };\n\n const slidePrev = () => {\n if (!thumbAnimation && thumbIndex > 0) {\n setThumbAnimation(true);\n setThumbIndex(thumbIndex - 1);\n }\n };\n\n const syncMainBeforeChange = (e) => {\n setMainAnimation(true);\n };\n\n const syncMainAfterChange = (e) => {\n setMainAnimation(false);\n\n if (e.type === 'action') {\n setThumbIndex(e.item);\n setThumbAnimation(false);\n } else {\n setMainIndex(thumbIndex);\n }\n };\n\n const syncThumbs = (e) => {\n setThumbIndex(e.item);\n setThumbAnimation(false);\n\n if (!mainAnimation) {\n setMainIndex(e.item);\n }\n };\n\n return [\n <AliceCarousel\n activeIndex={mainIndex}\n animationType="fadeout"\n animationDuration={800}\n disableDotsControls\n disableButtonsControls\n items={items}\n mouseTracking={!thumbAnimation}\n onSlideChange={syncMainBeforeChange}\n onSlideChanged={syncMainAfterChange}\n touchTracking={!thumbAnimation}\n />,\n <div className="thumbs">\n <AliceCarousel\n activeIndex={thumbIndex}\n autoWidth\n disableDotsControls\n disableButtonsControls\n items={thumbs}\n mouseTracking={false}\n onSlideChanged={syncThumbs}\n touchTracking={!mainAnimation}\n />\n <div className="btn-prev" onClick={slidePrev}>⟨</div>\n <div className="btn-next" onClick={slideNext}>⟩</div>\n </div>\n ]\n};\n
'},8438:(e,n,t)=>{t.r(n),t.d(n,{default:()=>a});const a='import React from 'react';\nimport AliceCarousel, { Link } from 'react-alice-carousel';\nimport 'react-alice-carousel/lib/alice-carousel.css';\n\nconst href = '//github.com/maxmarinich/react-alice-carousel';\nconst src = '//github.com/maxmarinich/react-alice-carousel/raw/master/src/assets/img/1200x200.jpg';\n\nconst Carousel = () => (\n <AliceCarousel mouseTracking>\n <Link href={href} target="_blank" className="link">\n <img src={src} alt="" />\n </Link>\n <Link href={href} target="_blank" className="link">\n <img src={src} alt="" />\n </Link>\n <Link href={href} target="_blank" className="link">\n <img src={src} alt="" />\n </Link>\n </AliceCarousel>\n);\n
'},3801:(e,n,t)=>{t.r(n),t.d(n,{default:()=>a});const a='import React from 'react';\nimport AliceCarousel from 'react-alice-carousel';\nimport type { EventObject } from 'react-alice-carousel';\nimport 'react-alice-carousel/lib/alice-carousel.css';\n\nconst responsive = {\n 0: { items: 1 },\n 568: { items: 2 },\n 1024: { items: 3 },\n};\n\nconst createItems = (length, [handleClick]) => {\n let deltaX = 0;\n let difference = 0;\n const swipeDelta = 20;\n\n return Array.from({ length }).map((item, i) => (\n <div\n data-value={i + 1}\n className="item"\n onMouseDown={(e) => (deltaX = e.pageX)}\n onMouseUp={(e) => (difference = Math.abs(e.pageX - deltaX))}\n onClick={() => difference < swipeDelta && handleClick(i)}\n >\n <span className="item-inner" />\n </div>\n ));\n};\n\nconst Carousel = () => {\n const [activeIndex, setActiveIndex] = useState(0);\n const [items] = useState(createItems(5, [setActiveIndex]));\n\n const slidePrev = () => setActiveIndex(activeIndex - 1);\n const slideNext = () => setActiveIndex(activeIndex + 1);\n const syncActiveIndexForSwipeGestures = (e: EventObject) => setActiveIndex(e.item);\n\n const onSlideChanged = (e: EventObject) => {\n syncActiveIndexForSwipeGestures(e);\n console.debug(`onSlideChanged => Item's position after changes: ${e.item}. Event:`, e);\n };\n\n const onUpdated = (e: EventObject) => {\n console.debug(`onUpdated => Item's position after update: ${e.item}. Event:`, e);\n };\n\n return [\n <AliceCarousel\n mouseTracking\n disableDotsControls\n disableButtonsControls\n items={items}\n activeIndex={activeIndex}\n responsive={responsive}\n onSlideChanged={onSlideChanged}\n onUpdated={onUpdated}\n />,\n <div className="b-refs-buttons">\n <button onClick={slidePrev}>Prev</button>\n <button onClick={slideNext}>Next</button>\n </div>,\n ];\n};\n
'},9276:(e,n,t)=>{t.r(n),t.d(n,{default:()=>a});const a='import React, { useRef } from 'react';\nimport AliceCarousel from 'react-alice-carousel';\nimport 'react-alice-carousel/lib/alice-carousel.css';\n\nconst items = [\n <div className="item" data-value="1">1</div>,\n <div className="item" data-value="2">2</div>,\n <div className="item" data-value="3">3</div>,\n <div className="item" data-value="4">4</div>,\n <div className="item" data-value="5">5</div>,\n];\n\nconst Carousel = () => {\n const carousel = useRef<AliceCarousel>(null);\n \n return [\n <AliceCarousel\n key="carousel"\n mouseTracking\n disableDotsControls\n disableButtonsControls\n items={items}\n ref={carousel}\n />,\n <nav key="nav" className="b-refs-navs">\n {items.map((item, i) => {\n return <span key={i} onClick={() => carousel?.current?.slideTo(i)} />;\n })}\n </nav>,\n <div key="btns" className="b-refs-buttons">\n <button onClick={(e) => carousel?.current?.slidePrev(e)}>Prev</button>\n <button onClick={(e) => carousel?.current?.slideNext(e)}>Next</button>\n </div>\n ]\n};\n
'},5341:(e,n,t)=>{t.r(n),t.d(n,{default:()=>a});const a='import React from 'react';\nimport AliceCarousel from 'react-alice-carousel';\nimport 'react-alice-carousel/lib/alice-carousel.css';\n\nconst items = [\n <div className="item" data-value="1">1</div>,\n <div className="item" data-value="2">2</div>,\n <div className="item" data-value="3">3</div>,\n <div className="item" data-value="4">4</div>,\n <div className="item" data-value="5">5</div>,\n];\n\nconst renderSlideInfo = ({ item, itemsCount }) => {\n return `${item}\\\\${itemsCount}`;\n};\n\nconst renderDotsItem = ({ isActive }) => {\n return isActive ? 'x' : 'o';\n};\n\nconst renderPrevButton = ({ isDisabled }) => {\n return <span style={{ opacity: isDisabled ? '0.5' : 1 }}><</span>;\n};\n\nconst renderNextButton = ({ isDisabled }) => {\n return <span style={{ opacity: isDisabled ? '0.5' : 1 }}>></span>;\n};\n\nconst renderPlayPauseButton = ({ isPlaying }) => {\n return isPlaying ? 'PAUSE' : 'PLAY';\n};\n\nconst Carousel = () => (\n <AliceCarousel\n mouseTracking\n items={items}\n autoPlayControls\n disableSlideInfo={false}\n renderSlideInfo={renderSlideInfo}\n renderDotsItem={renderDotsItem}\n renderPrevButton={renderPrevButton}\n renderNextButton={renderNextButton}\n renderPlayPauseButton={renderPlayPauseButton}\n />\n);\n
'},7620:(e,n,t)=>{t.r(n),t.d(n,{default:()=>a});const a='import React from 'react';\nimport AliceCarousel from 'react-alice-carousel';\nimport type { EventObject } from 'react-alice-carousel';\nimport 'react-alice-carousel/lib/alice-carousel.css';\n\nconst responsive = {\n 0: { items: 1 },\n 568: { items: 2 },\n 1024: { items: 3 },\n};\n\nconst items = [\n <div className="item" data-value="1">1</div>,\n <div className="item" data-value="2">2</div>,\n <div className="item" data-value="3">3</div>,\n <div className="item" data-value="4">4</div>,\n <div className="item" data-value="5">5</div>,\n];\n\nconst onSlideChange = (e: EventObject) => {\n console.debug(`onSlideChange => Item's position before a change: ${e.item}. Event:`, e);\n};\n\nconst onSlideChanged = (e: EventObject) => {\n console.debug(`onSlideChanged => Item's position after changes: ${e.item}. Event:`, e);\n};\n\nconst Carousel = () => (\n <AliceCarousel\n mouseTracking\n keyboardNavigation\n items={items}\n responsive={responsive}\n onSlideChange={onSlideChange}\n onSlideChanged={onSlideChanged}\n />\n);\n
'},2103:(e,n,t)=>{t.r(n),t.d(n,{default:()=>a});const a='import React from 'react';\nimport AliceCarousel from 'react-alice-carousel';\nimport type { EventObject } from 'react-alice-carousel';\nimport 'react-alice-carousel/lib/alice-carousel.css';\n\nconst responsive = {\n 0: { items: 1 },\n 568: { items: 2 },\n 1024: { items: 3 },\n};\n\nconst createItems = (length = 5) => {\n return Array.from({ length }).map((e, i) => <div key={i}>{i + 1}</div>);\n};\n\nconst onInitialized = (e: EventObject) => {\n console.debug('onInitialized => ItemsLength:', items.length, 'Event:', e);\n};\n\nconst onResized = (e: EventObject) => {\n console.debug('onResized => ItemsLength:', items.length, 'Event:', e);\n};\n\nconst onUpdated = (e: EventObject) => {\n console.debug('onUpdated => ItemsLength:', items.length, 'Event:', e);\n};\n\nconst Carousel = () => {\n const [items, setItems] = useState(createItems());\n const isDisabled = items.length <= 1;\n\n return (\n <section>\n <div>\n <button disabled={isDisabled} onClick={() => setItems(createItems(items.length - 1))}>-</button>\n <span>Items ({items.length})</span>\n <button onClick={() => setItems(createItems(items.length + 1))}>+</button>\n </div>\n <AliceCarousel\n mouseTracking\n keyboardNavigation\n items={items}\n responsive={responsive}\n onInitialized={onInitialized}\n onResized={onResized}\n onUpdated={onUpdated}\n />\n </section>\n );\n};\n
'},4161:(e,n,t)=>{t.r(n),t.d(n,{default:()=>a});const a='import React from 'react';\nimport AliceCarousel from 'react-alice-carousel';\nimport 'react-alice-carousel/lib/alice-carousel.css';\n\nconst items = [\n <div className="item" data-value="1">1</div>,\n <div className="item" data-value="2">2</div>,\n <div className="item" data-value="3">3</div>,\n <div className="item" data-value="4">4</div>,\n <div className="item" data-value="5">5</div>,\n];\n\nconst Carousel = () => (\n <AliceCarousel\n animationType="fadeout" \n animationDuration={800}\n disableButtonsControls\n infinite\n items={items}\n mouseTracking\n />\n);\n
'},5670:(e,n,t)=>{t.r(n),t.d(n,{default:()=>a});const a='import React, { useState, useEffect } from 'react';\nimport AliceCarousel from 'react-alice-carousel';\nimport 'react-alice-carousel/lib/alice-carousel.css';\n\nconst Carousel = () => {\n const [, setTimestamp] = useState(0);\n const [activeIndex, setActiveIndex] = useState(0);\n\n const onLoad = () => setTimestamp(Date.now());\n const onSlideChanged = ({ item }) => setActiveIndex(item);\n const src = (name = '') => `//github.com/maxmarinich/react-alice-carousel/raw/master/src/assets/img/${name}`;\n\n const items = [\n <TheLazyLoader onLoad={onLoad} src={src('1200x200.jpg')} delay={1000} />,\n <TheLazyLoader onLoad={onLoad} src={src('1200x250.jpg')} delay={5000} />,\n <TheLazyLoader onLoad={onLoad} src={src('1200x300.jpg')} delay={10000} />,\n ];\n\n return (\n <AliceCarousel \n autoHeight \n activeIndex={activeIndex} \n onSlideChanged={onSlideChanged} \n items={items}\n />\n );\n};\n\n\nfunction LazyLoader(props) {\n let timerId;\n const { src = '', delay = 0, onLoad } = props;\n const [isMounted, setMounted] = useState(false);\n const [isLoading, setLoading] = useState(true);\n\n function loadImage() {\n const image = new Image();\n\n image.src = src;\n image.onload = () => {\n setLoading(false);\n onLoad();\n };\n image.onerror = () => {\n setLoading(false);\n };\n }\n\n useEffect(() => {\n if (!isMounted) {\n setMounted(true);\n delay ? (timerId = setTimeout(loadImage, delay)) : loadImage();\n }\n return () => clearTimeout(timerId);\n }, []);\n\n return isLoading ? <div>Loading...</div> : <img width="100%" src={src} />;\n}\n
'},4264:(e,n,t)=>{t.r(n),t.d(n,{default:()=>a});const a='import React, { useState, useEffect } from 'react';\nimport AliceCarousel from 'react-alice-carousel';\nimport 'react-alice-carousel/lib/alice-carousel.css';\n\nconst Carousel = () => {\n const [key, setKey] = useState(0);\n const src = (name = '') => `//github.com/maxmarinich/react-alice-carousel/raw/master/src/assets/img/${name}`;\n\n const [items] = useState([\n <TheLazyLoader onLoad={onLoad} src={src('1200x200.jpg')} delay={1000} />,\n <TheLazyLoader onLoad={onLoad} src={src('1200x250.jpg')} delay={5000} />,\n <TheLazyLoader onLoad={onLoad} src={src('1200x300.jpg')} delay={10000} />,\n ]);\n\n function onLoad() {\n setKey(Date.now());\n }\n\n return (\n <AliceCarousel autoHeight renderKey={key} items={items} />\n );\n};\n\n\nfunction LazyLoader(props) {\n let timerId;\n const { src = '', delay = 0, onLoad } = props;\n const [isMounted, setMounted] = useState(false);\n const [isLoading, setLoading] = useState(true);\n\n function loadImage() {\n const image = new Image();\n\n image.src = src;\n image.onload = () => {\n setLoading(false);\n onLoad();\n };\n image.onerror = () => {\n setLoading(false);\n };\n }\n\n useEffect(() => {\n if (!isMounted) {\n setMounted(true);\n delay ? (timerId = setTimeout(loadImage, delay)) : loadImage();\n }\n return () => clearTimeout(timerId);\n }, []);\n\n return isLoading ? <div>Loading...</div> : <img width="100%" src={src} />;\n}\n
'},9705:(e,n,t)=>{t.r(n),t.d(n,{default:()=>a});const a='import React from 'react';\nimport AliceCarousel from 'react-alice-carousel';\nimport 'react-alice-carousel/lib/alice-carousel.css';\n\nconst responsive = {\n 0: { items: 1 },\n 568: { items: 2 },\n 1024: { items: 3 },\n};\n\nconst items = [\n <div className="item" data-value="1">1</div>,\n <div className="item" data-value="2">2</div>,\n <div className="item" data-value="3">3</div>,\n <div className="item" data-value="4">4</div>,\n <div className="item" data-value="5">5</div>,\n];\n\nconst Carousel = () => (\n <AliceCarousel\n mouseTracking\n items={items}\n paddingLeft={50}\n paddingRight={50}\n responsive={responsive}\n />\n);\n
'},1620:(e,n,t)=>{t.r(n),t.d(n,{default:()=>a});const a='import React, { useState, useEffect, useRef } from 'react';\nimport AliceCarousel from 'react-alice-carousel';\nimport 'react-alice-carousel/lib/alice-carousel.css';\n\nconst items = [\n <div className="item" data-value="1">1</div>,\n <div className="item" data-value="2">2</div>,\n <div className="item" data-value="3">3</div>,\n <div className="item" data-value="4">4</div>,\n <div className="item" data-value="5">5</div>,\n];\n\nconst Carousel = () => {\n const percent = 0.3;\n const section = useRef(null);\n const [padding, setPadding] = useState(0);\n \n const syncState = () => {\n const { current } = section;\n if (current) {\n setPadding(current.offsetWidth * percent);\n }\n };\n \n useEffect(syncState, []);\n \n return (\n <div ref={section}>\n <AliceCarousel\n infinite\n mouseTracking\n items={items} \n paddingRight={padding} \n onResized={syncState} \n />\n </div>\n );\n };\n
'},7548:(e,n,t)=>{t.r(n)},2308:(e,n,t)=>{t.r(n)},9997:(e,n,t)=>{t.r(n)},2354:(e,n,t)=>{t.r(n)},6721:(e,n,t)=>{t.r(n)},210:(e,n,t)=>{t.r(n)},3234:(e,n,t)=>{t.r(n)},5874:(e,n,t)=>{t.r(n)},4448:(e,n,t)=>{var a=t(7294),s=t(3840);function l(e){for(var n="https://reactjs.org/docs/error-decoder.html?invariant="+e,t=1;te||125 e||1250;s--){var l=Math.floor(Math.random()*(s+1));n=[a[l],a[s]],a[s]=n[0],a[l]=n[1]}return a}Object.defineProperty(n,"__esModule",{value:!0}),n.shuffleArrayUniquely=n.shuffleArray=n.genRandomInt=n.genItems=void 0,n.genItems=function(e){return void 0===e&&(e=100),Array.from({length:e}).map((function(e,n){var t=n++;return n%7==0?{id:t,type:5}:n%5==0?{id:t,type:4}:n%3==0?{id:t,type:3}:n%2==0?{id:t,type:2}:n%2==1?{id:t,type:1}:{id:t,type:n}}))},n.genRandomInt=function(e,n){void 0===e&&(e=0),void 0===n&&(n=100);var t=Math.ceil(e),a=Math.floor(n);return Math.floor(Math.random()*(a-t+1)+t)},n.shuffleArray=a,n.shuffleArrayUniquely=function(e,n){void 0===e&&(e=[]);for(var t=a(e),s=function(e){return n?e[n]:e},l=function(e){var n=t[e],a=t[e-1],l=s(a),r=s(n);if(r===l){var i=null,o=t.find((function(n,t){var a=s(n);if(t>e&&a!==r)return i=t,!0}));o&&null!==i&&(t[e]=o,t[i]=n)}},r=1;ro||-u>d)return;y.animate(this.stageComponent,{position:d})}}},n.prototype._handleTouchend=function(e,n){var t=n.deltaX;if(this._clearTouchmovePosition(),this.isTouchMoveProcessStarted){this.isTouchMoveProcessStarted=!1;var a=this.state.animationDuration,s=this.props.animationEasingFunction,l=y.getTranslateXProperty(this.stageComponent),r=y.getSwipeTouchendPosition(this.state,t,l);y.animate(this.stageComponent,{position:r,animationDuration:a,animationEasingFunction:s}),this._handleBeforeTouchEnd(r)}},n.prototype._handleBeforeTouchEnd=function(e){var n=this,t=this.state.animationDuration;this.touchEndTimeoutId=window.setTimeout((function(){return c(n,void 0,void 0,(function(){var n,t,a,s=this;return p(this,(function(l){switch(l.label){case 0:return n=y.getSwipeTouchendIndex(e,this.state),t=y.getTranslate3dProperty(n,this.state),y.animate(this.stageComponent,{position:-t}),a=y.getTransitionProperty(),[4,this.setState({activeIndex:n,translate3d:t,transition:a})];case 1:return l.sent(),requestAnimationFrame((function(){return s._handleSlideChanged()})),[2]}}))}))}),t)},n.prototype._handleSlideTo=function(e){var n=e.activeIndex,t=void 0===n?0:n,a=e.fadeoutAnimationIndex,s=void 0===a?null:a,l=e.fadeoutAnimationPosition,r=void 0===l?null:l,i=e.eventType;return c(this,void 0,void 0,(function(){var e,n,a,l,o,u,c,d,f,h=this;return p(this,(function(p){switch(p.label){case 0:return e=this.props,n=e.infinite,a=e.animationEasingFunction,l=this.state,o=l.itemsCount,u=l.animationDuration,this.isAnimationDisabled||this.state.activeIndex===t||!n&&y.shouldCancelSlideAnimation(t,o)?[2]:(this.isAnimationDisabled=!0,this._cancelTimeoutAnimations(),this._handleSlideChange(i),d=!1,f=y.getTranslate3dProperty(t,this.state),null!==s&&null!==r?(d=!0,c=y.getTransitionProperty()):c=y.getTransitionProperty({animationDuration:u,animationEasingFunction:a}),[4,this.setState({activeIndex:t,transition:c,translate3d:f,animationDuration:u,fadeoutAnimationIndex:s,fadeoutAnimationPosition:r,fadeoutAnimationProcessing:d})]);case 1:return p.sent(),this.slideEndTimeoutId=window.setTimeout((function(){return h._handleBeforeSlideEnd(i)}),u),[2]}}))}))},n.prototype._handleUpdateSlidePosition=function(e){return c(this,void 0,void 0,(function(){var n,t,a;return p(this,(function(s){switch(s.label){case 0:return n=this.state.animationDuration,t=y.getTranslate3dProperty(e,this.state),a=y.getTransitionProperty({animationDuration:0}),[4,this.setState({activeIndex:e,translate3d:t,transition:a,animationDuration:n,fadeoutAnimationIndex:null,fadeoutAnimationPosition:null,fadeoutAnimationProcessing:!1})];case 1:return s.sent(),[2]}}))}))},n.prototype._handleUpdated=function(){this.props.onUpdated&&this.props.onUpdated(l(l({},this.eventObject),{type:j.EventType.UPDATE}))},n.prototype._handleResized=function(e){void 0===e&&(e={}),this.props.onResized&&this.props.onResized(l(l(l({},this.eventObject),e),{type:j.EventType.RESIZE}))},n.prototype._handleSlideChange=function(e){if(this.props.onSlideChange){var n=e?l(l({},this.eventObject),{type:e}):this.eventObject;this.props.onSlideChange(n)}},n.prototype._handleSlideChanged=function(e){return c(this,void 0,void 0,(function(){var n,t,a,s,r,i,o;return p(this,(function(u){switch(u.label){case 0:return n=this.state,t=n.isAutoPlaying,a=n.isAutoPlayCanceledOnAction,s=this.props,r=s.autoPlayStrategy,i=s.onSlideChanged,y.shouldCancelAutoPlayOnAction(r)&&this.hasUserAction&&!a?[4,this.setState({isAutoPlayCanceledOnAction:!0,isAutoPlaying:!1})]:[3,2];case 1:return u.sent(),[3,3];case 2:t&&this._handlePlay(),u.label=3;case 3:return this.isAnimationDisabled=!1,i&&(o=e?l(l({},this.eventObject),{type:e}):this.eventObject,i(o)),e===j.EventType.UPDATE&&this._handleUpdated(),[2]}}))}))},n.prototype._handleDotClick=function(e){this.hasUserAction=!0,this.slideTo(e)},n.prototype._handlePlay=function(){this._setAutoPlayInterval()},n.prototype._cancelTimeoutAnimations=function(){this._clearAutoPlayTimeout(),this._clearSlideEndTimeout(),this.clearTouchendTimeout()},n.prototype._clearAutoPlayTimeout=function(){window.clearTimeout(this.autoPlayTimeoutId),this.autoPlayTimeoutId=void 0},n.prototype._clearSlideEndTimeout=function(){clearTimeout(this.slideEndTimeoutId),this.slideEndTimeoutId=void 0},n.prototype.clearTouchendTimeout=function(){clearTimeout(this.touchEndTimeoutId),this.touchEndTimeoutId=void 0},n.prototype._clearTouchmovePosition=function(){this.startTouchmovePosition=void 0},n.prototype._setTouchmovePosition=function(){var e=y.getTranslateXProperty(this.stageComponent);this.startTouchmovePosition=-e},n.prototype._setInitialState=function(){return c(this,void 0,void 0,(function(){var e;return p(this,(function(n){switch(n.label){case 0:return e=y.calculateInitialState(this.props,this.stageComponent),this.rootComponentDimensions=y.getElementDimensions(this.rootElement),[4,this.setState(e)];case 1:return n.sent(),this.props.onInitialized&&this.props.onInitialized(l(l({},this.eventObject),{type:j.EventType.INIT})),[2]}}))}))},n.prototype._setAutoPlayInterval=function(){var e=this,n=this.props,t=n.autoPlayDirection,a=n.autoPlayInterval;this.autoPlayTimeoutId=window.setTimeout((function(){e.isHovered||(t===j.AutoplayDirection.RTL?e.slidePrev():e.slideNext())}),a)},n.prototype._setupSwipeHandlers=function(){this.swipeListener=new h.default({element:this.rootElement,delta:this.props.swipeDelta,onSwiping:this._handleTouchmove,onSwiped:this._handleTouchend,rotationAngle:5,mouseTrackingEnabled:this.props.mouseTracking,touchTrackingEnabled:this.props.touchTracking,preventDefaultTouchmoveEvent:!this.props.touchMoveDefaultEvents,preventTrackingOnMouseleave:!0}),this.swipeListener.init()},n.prototype._updateComponent=function(){var e=this,n=(this.props.syncStateOnPropsUpdate?this.state:this.props).activeIndex,t=l(l({},this.props),{activeIndex:n});this._cancelTimeoutAnimations(),this.isAnimationDisabled=!1,this.state.isAutoPlaying&&this._handlePlay(),this.setState({clones:y.createClones(t)}),requestAnimationFrame((function(){e.setState(y.calculateInitialState(t,e.stageComponent),(function(){return e._handleUpdated()}))}))},n.prototype._updateSwipeProps=function(){this.swipeListener&&this.swipeListener.update({delta:this.props.swipeDelta,mouseTrackingEnabled:this.props.mouseTracking,touchTrackingEnabled:this.props.touchTracking,preventDefaultTouchmoveEvent:!this.props.touchMoveDefaultEvents})},n.prototype._renderDotsNavigation=function(){var e=this.props,n=e.renderDotsItem,t=e.controlsStrategy;return f.default.createElement(v.DotsNavigation,{state:this.state,onClick:this._handleDotClick,renderDotsItem:n,controlsStrategy:t})},n.prototype._renderPrevButton=function(){var e=this.props.renderPrevButton,n=y.getSlideItemInfo(this.state).isPrevSlideDisabled;return f.default.createElement(v.PrevNextButton,{name:"prev",onClick:this.slidePrev,isDisabled:n,renderPrevButton:e})},n.prototype._renderNextButton=function(){var e=this.props.renderNextButton,n=y.getSlideItemInfo(this.state).isNextSlideDisabled;return f.default.createElement(v.PrevNextButton,{name:"next",onClick:this.slideNext,isDisabled:n,renderNextButton:e})},n.prototype._renderPlayPauseButton=function(){var e=this.props.renderPlayPauseButton,n=this.state.isAutoPlaying;return f.default.createElement(v.PlayPauseButton,{isPlaying:n,onClick:this._handlePlayPauseToggle,renderPlayPauseButton:e})},n.prototype.render=function(){var e=this.state,n=e.translate3d,t=e.clones,a=e.transition,s=e.canUseDom,l=y.shouldDisableDots(this.props,this.state),r=y.shouldDisableButtons(this.props,this.state),i=y.getRenderWrapperStyles(this.props,this.state,this.stageComponent),o=y.getRenderStageStyles({translate3d:n},{transition:a}),u=this.props.ssrSilentMode||s?"":j.Modifiers.SSR,c=y.concatClassnames(j.Classnames.ROOT,u);return f.default.createElement("div",{className:c},f.default.createElement("div",{ref:this._setRootComponentRef},f.default.createElement("div",{style:i,className:j.Classnames.WRAPPER,onMouseEnter:this._handleMouseEnter,onMouseLeave:this._handleMouseLeave},f.default.createElement("ul",{style:o,className:j.Classnames.STAGE,ref:this._setStageComponentRef},t.map(this._renderStageItem)))),l?null:this._renderDotsNavigation(),r?null:this._renderPrevButton(),r?null:this._renderNextButton(),this.props.disableSlideInfo?null:this._renderSlideInfo(),this.props.autoPlayControls?this._renderPlayPauseButton():null)},n.defaultProps=m.defaultProps,n}(f.default.PureComponent);n.default=b},6835:(e,n)=>{var t,a,s,l,r,i,o;Object.defineProperty(n,"__esModule",{value:!0}),n.Modifiers=n.Classnames=n.AutoplayDirection=n.ControlsStrategy=n.AutoPlayStrategy=n.AnimationType=n.EventType=void 0,(o=n.EventType||(n.EventType={})).ACTION="action",o.INIT="init",o.RESIZE="resize",o.UPDATE="update",(i=n.AnimationType||(n.AnimationType={})).FADEOUT="fadeout",i.SLIDE="slide",(r=n.AutoPlayStrategy||(n.AutoPlayStrategy={})).DEFAULT="default",r.ALL="all",r.ACTION="action",r.NONE="none",(l=n.ControlsStrategy||(n.ControlsStrategy={})).DEFAULT="default",l.ALTERNATE="alternate",l.RESPONSIVE="responsive",(s=n.AutoplayDirection||(n.AutoplayDirection={})).RTL="rtl",s.LTR="ltr",(a=n.Classnames||(n.Classnames={})).ANIMATED="animated animated-out fadeOut",a.ROOT="alice-carousel",a.WRAPPER="alice-carousel__wrapper",a.STAGE="alice-carousel__stage",a.STAGE_ITEM="alice-carousel__stage-item",a.DOTS="alice-carousel__dots",a.DOTS_ITEM="alice-carousel__dots-item",a.PLAY_BTN="alice-carousel__play-btn",a.PLAY_BTN_ITEM="alice-carousel__play-btn-item",a.PLAY_BTN_WRAPPER="alice-carousel__play-btn-wrapper",a.SLIDE_INFO="alice-carousel__slide-info",a.SLIDE_INFO_ITEM="alice-carousel__slide-info-item",a.BUTTON_PREV="alice-carousel__prev-btn",a.BUTTON_PREV_WRAPPER="alice-carousel__prev-btn-wrapper",a.BUTTON_PREV_ITEM="alice-carousel__prev-btn-item",a.BUTTON_NEXT="alice-carousel__next-btn",a.BUTTON_NEXT_WRAPPER="alice-carousel__next-btn-wrapper",a.BUTTON_NEXT_ITEM="alice-carousel__next-btn-item",(t=n.Modifiers||(n.Modifiers={})).ACTIVE="__active",t.INACTIVE="__inactive",t.CLONED="__cloned",t.CUSTOM="__custom",t.PAUSE="__pause",t.SEPARATOR="__separator",t.SSR="__ssr",t.TARGET="__target"},7483:(e,n,t)=>{Object.defineProperty(n,"__esModule",{value:!0}),n.isClonedItem=n.isTargetItem=n.isActiveItem=n.getRenderStageItemClasses=void 0;var a=t(6835),s=t(1765),l=t(9547);n.getRenderStageItemClasses=function(e,t){void 0===e&&(e=0);var l=t.fadeoutAnimationIndex,r=(0,n.isActiveItem)(e,t)?a.Modifiers.ACTIVE:"",i=(0,n.isClonedItem)(e,t)?a.Modifiers.CLONED:"",o=(0,n.isTargetItem)(e,t)?a.Modifiers.TARGET:"",u=e===l?a.Classnames.ANIMATED:"";return(0,s.concatClassnames)(a.Classnames.STAGE_ITEM,r,i,o,u)},n.isActiveItem=function(e,n){void 0===e&&(e=0);var t=n.activeIndex,a=n.itemsInSlide,s=n.itemsOffset,r=n.infinite,i=n.autoWidth,o=(0,l.getShiftIndex)(a,s);if(i&&r)return e-o===t+s;var u=t+o;return r?e>=u&&e=t&&es-1+t;var o=(0,l.getShiftIndex)(t,a);return e
'},4826:(e,n,t)=>{t.r(n),t.d(n,{default:()=>a});const a='import React from 'react';\nimport AliceCarousel from 'react-alice-carousel';\nimport 'react-alice-carousel/lib/alice-carousel.css';\n\nconst itemsLength = Array.from({ length: 5 });\n\nconst items = itemsLength.map((item, index) => {\n const style = { height: 200 + index * 10 };\n return <div className="item" style={style} data-value={index + 1} />;\n});\n\nconst Carousel = () => (\n <AliceCarousel\n autoHeight \n infinite\n mouseTracking\n items={items}\n />\n);\n
'},3505:(e,n,t)=>{t.r(n),t.d(n,{default:()=>a});const a='import React from 'react';\nimport AliceCarousel from 'react-alice-carousel';\nimport 'react-alice-carousel/lib/alice-carousel.css';\n\nconst items = [\n <div className="item" data-value="1">1</div>,\n <div className="item" data-value="2">2</div>,\n <div className="item" data-value="3">3</div>,\n <div className="item" data-value="4">4</div>,\n <div className="item" data-value="5">5</div>,\n];\n\nconst Carousel = () => (\n <AliceCarousel\n autoPlay\n autoPlayControls\n autoPlayStrategy="none"\n autoPlayInterval={1000}\n animationDuration={1000}\n animationType="fadeout"\n infinite\n touchTracking={false}\n disableDotsControls\n disableButtonsControls\n items={items}\n />\n);\n
'},7464:(e,n,t)=>{t.r(n),t.d(n,{default:()=>a});const a='import React from 'react';\nimport AliceCarousel from 'react-alice-carousel';\nimport 'react-alice-carousel/lib/alice-carousel.css';\n\nconst itemsLength = Array.from({ length: 5 });\n\nconst items = itemsLength.map((item, index) => {\n const style = { width: 150 + index * 100 };\n return (<div className="item" style={style}>{index + 1}</div>);\n});\n\nconst Carousel = () => (\n <AliceCarousel\n autoWidth\n mouseTracking\n items={items}\n />\n);\n
'},8619:(e,n,t)=>{t.r(n),t.d(n,{default:()=>a});const a='import React from 'react';\nimport AliceCarousel from 'react-alice-carousel';\nimport 'react-alice-carousel/lib/alice-carousel.css';\n\nconst itemsLength = Array.from({ length: 5 });\n\nconst items = itemsLength.map((item, index) => {\n const style = { width: 150 + index * 100 };\n return (<div className="item" style={style}>{index + 1}</div>);\n});\n\nconst Carousel = () => (\n <AliceCarousel\n autoWidth \n infinite\n mouseTracking\n items={items}\n />\n);\n
'},8788:(e,n,t)=>{t.r(n),t.d(n,{default:()=>a});const a='import React from 'react';\nimport AliceCarousel from 'react-alice-carousel';\nimport 'react-alice-carousel/lib/alice-carousel.css';\n\nconst responsive = {\n 0: { \n items: 1\n },\n 568: { \n items: 2\n },\n 1024: {\n items: 3, \n itemsFit: 'contain'\n },\n};\n\nconst items = [\n <div className="item" data-value="1">1</div>,\n <div className="item" data-value="2">2</div>,\n];\n\nconst Carousel = () => (\n <AliceCarousel\n mouseTracking\n items={items}\n responsive={responsive}\n />\n);\n
'},8358:(e,n,t)=>{t.r(n),t.d(n,{default:()=>a});const a='import React from 'react';\nimport AliceCarousel from 'react-alice-carousel';\nimport 'react-alice-carousel/lib/alice-carousel.css';\n\nconst responsive = {\n 0: { items: 1 },\n 568: { items: 2 },\n 1024: { items: 3 },\n};\n\nconst items = [\n <div className="item" data-value="1">1</div>,\n <div className="item" data-value="2">2</div>,\n <div className="item" data-value="3">3</div>,\n <div className="item" data-value="4">4</div>,\n <div className="item" data-value="5">5</div>,\n];\n\nconst Carousel = () => (\n <AliceCarousel\n mouseTracking\n items={items}\n responsive={responsive}\n controlsStrategy="alternate"\n />\n);\n
'},8438:(e,n,t)=>{t.r(n),t.d(n,{default:()=>a});const a='import React, { useState } from 'react';\nimport AliceCarousel from 'react-alice-carousel';\nimport 'react-alice-carousel/lib/alice-carousel.css';\n\nconst items = [\n <div className="item" data-value="1">1</div>,\n <div className="item" data-value="2">2</div>,\n <div className="item" data-value="3">3</div>,\n <div className="item" data-value="4">4</div>,\n <div className="item" data-value="5">5</div>,\n];\n\nconst thumbItems = (items, [setThumbIndex, setThumbAnimation]) => {\n return items.map((item, i) => (\n <div className="thumb" onClick={() => (setThumbIndex(i), setThumbAnimation(true))}>\n {item}\n </div>\n ));\n};\n\nconst Carousel = () => {\n const [mainIndex, setMainIndex] = useState(0);\n const [mainAnimation, setMainAnimation] = useState(false);\n const [thumbIndex, setThumbIndex] = useState(0);\n const [thumbAnimation, setThumbAnimation] = useState(false);\n const [thumbs] = useState(thumbItems(items, [setThumbIndex, setThumbAnimation]));\n\n const slideNext = () => {\n if (!thumbAnimation && thumbIndex < thumbs.length - 1) {\n setThumbAnimation(true);\n setThumbIndex(thumbIndex + 1);\n }\n };\n\n const slidePrev = () => {\n if (!thumbAnimation && thumbIndex > 0) {\n setThumbAnimation(true);\n setThumbIndex(thumbIndex - 1);\n }\n };\n\n const syncMainBeforeChange = (e) => {\n setMainAnimation(true);\n };\n\n const syncMainAfterChange = (e) => {\n setMainAnimation(false);\n\n if (e.type === 'action') {\n setThumbIndex(e.item);\n setThumbAnimation(false);\n } else {\n setMainIndex(thumbIndex);\n }\n };\n\n const syncThumbs = (e) => {\n setThumbIndex(e.item);\n setThumbAnimation(false);\n\n if (!mainAnimation) {\n setMainIndex(e.item);\n }\n };\n\n return [\n <AliceCarousel\n activeIndex={mainIndex}\n animationType="fadeout"\n animationDuration={800}\n disableDotsControls\n disableButtonsControls\n items={items}\n mouseTracking={!thumbAnimation}\n onSlideChange={syncMainBeforeChange}\n onSlideChanged={syncMainAfterChange}\n touchTracking={!thumbAnimation}\n />,\n <div className="thumbs">\n <AliceCarousel\n activeIndex={thumbIndex}\n autoWidth\n disableDotsControls\n disableButtonsControls\n items={thumbs}\n mouseTracking={false}\n onSlideChanged={syncThumbs}\n touchTracking={!mainAnimation}\n />\n <div className="btn-prev" onClick={slidePrev}>⟨</div>\n <div className="btn-next" onClick={slideNext}>⟩</div>\n </div>\n ]\n};\n
'},3801:(e,n,t)=>{t.r(n),t.d(n,{default:()=>a});const a='import React from 'react';\nimport AliceCarousel, { Link } from 'react-alice-carousel';\nimport 'react-alice-carousel/lib/alice-carousel.css';\n\nconst href = '//github.com/maxmarinich/react-alice-carousel';\nconst src = '//github.com/maxmarinich/react-alice-carousel/raw/master/src/assets/img/1200x200.jpg';\n\nconst Carousel = () => (\n <AliceCarousel mouseTracking>\n <Link href={href} target="_blank" className="link">\n <img src={src} alt="" />\n </Link>\n <Link href={href} target="_blank" className="link">\n <img src={src} alt="" />\n </Link>\n <Link href={href} target="_blank" className="link">\n <img src={src} alt="" />\n </Link>\n </AliceCarousel>\n);\n
'},9276:(e,n,t)=>{t.r(n),t.d(n,{default:()=>a});const a='import React from 'react';\nimport AliceCarousel from 'react-alice-carousel';\nimport type { EventObject } from 'react-alice-carousel';\nimport 'react-alice-carousel/lib/alice-carousel.css';\n\nconst responsive = {\n 0: { items: 1 },\n 568: { items: 2 },\n 1024: { items: 3 },\n};\n\nconst createItems = (length, [handleClick]) => {\n let deltaX = 0;\n let difference = 0;\n const swipeDelta = 20;\n\n return Array.from({ length }).map((item, i) => (\n <div\n data-value={i + 1}\n className="item"\n onMouseDown={(e) => (deltaX = e.pageX)}\n onMouseUp={(e) => (difference = Math.abs(e.pageX - deltaX))}\n onClick={() => difference < swipeDelta && handleClick(i)}\n >\n <span className="item-inner" />\n </div>\n ));\n};\n\nconst Carousel = () => {\n const [activeIndex, setActiveIndex] = useState(0);\n const [items] = useState(createItems(5, [setActiveIndex]));\n\n const slidePrev = () => setActiveIndex(activeIndex - 1);\n const slideNext = () => setActiveIndex(activeIndex + 1);\n const syncActiveIndexForSwipeGestures = (e: EventObject) => setActiveIndex(e.item);\n\n const onSlideChanged = (e: EventObject) => {\n syncActiveIndexForSwipeGestures(e);\n console.debug(`onSlideChanged => Item's position after changes: ${e.item}. Event:`, e);\n };\n\n const onUpdated = (e: EventObject) => {\n console.debug(`onUpdated => Item's position after update: ${e.item}. Event:`, e);\n };\n\n return [\n <AliceCarousel\n mouseTracking\n disableDotsControls\n disableButtonsControls\n items={items}\n activeIndex={activeIndex}\n responsive={responsive}\n onSlideChanged={onSlideChanged}\n onUpdated={onUpdated}\n />,\n <div className="b-refs-buttons">\n <button onClick={slidePrev}>Prev</button>\n <button onClick={slideNext}>Next</button>\n </div>,\n ];\n};\n
'},5341:(e,n,t)=>{t.r(n),t.d(n,{default:()=>a});const a='import React, { useRef } from 'react';\nimport AliceCarousel from 'react-alice-carousel';\nimport 'react-alice-carousel/lib/alice-carousel.css';\n\nconst items = [\n <div className="item" data-value="1">1</div>,\n <div className="item" data-value="2">2</div>,\n <div className="item" data-value="3">3</div>,\n <div className="item" data-value="4">4</div>,\n <div className="item" data-value="5">5</div>,\n];\n\nconst Carousel = () => {\n const carousel = useRef<AliceCarousel>(null);\n \n return [\n <AliceCarousel\n key="carousel"\n mouseTracking\n disableDotsControls\n disableButtonsControls\n items={items}\n ref={carousel}\n />,\n <nav key="nav" className="b-refs-navs">\n {items.map((item, i) => {\n return <span key={i} onClick={() => carousel?.current?.slideTo(i)} />;\n })}\n </nav>,\n <div key="btns" className="b-refs-buttons">\n <button onClick={(e) => carousel?.current?.slidePrev(e)}>Prev</button>\n <button onClick={(e) => carousel?.current?.slideNext(e)}>Next</button>\n </div>\n ]\n};\n
'},7620:(e,n,t)=>{t.r(n),t.d(n,{default:()=>a});const a='import React from 'react';\nimport AliceCarousel from 'react-alice-carousel';\nimport 'react-alice-carousel/lib/alice-carousel.css';\n\nconst items = [\n <div className="item" data-value="1">1</div>,\n <div className="item" data-value="2">2</div>,\n <div className="item" data-value="3">3</div>,\n <div className="item" data-value="4">4</div>,\n <div className="item" data-value="5">5</div>,\n];\n\nconst renderSlideInfo = ({ item, itemsCount }) => {\n return `${item}\\\\${itemsCount}`;\n};\n\nconst renderDotsItem = ({ isActive }) => {\n return isActive ? 'x' : 'o';\n};\n\nconst renderPrevButton = ({ isDisabled }) => {\n return <span style={{ opacity: isDisabled ? '0.5' : 1 }}><</span>;\n};\n\nconst renderNextButton = ({ isDisabled }) => {\n return <span style={{ opacity: isDisabled ? '0.5' : 1 }}>></span>;\n};\n\nconst renderPlayPauseButton = ({ isPlaying }) => {\n return isPlaying ? 'PAUSE' : 'PLAY';\n};\n\nconst Carousel = () => (\n <AliceCarousel\n mouseTracking\n items={items}\n autoPlayControls\n disableSlideInfo={false}\n renderSlideInfo={renderSlideInfo}\n renderDotsItem={renderDotsItem}\n renderPrevButton={renderPrevButton}\n renderNextButton={renderNextButton}\n renderPlayPauseButton={renderPlayPauseButton}\n />\n);\n
'},2103:(e,n,t)=>{t.r(n),t.d(n,{default:()=>a});const a='import React from 'react';\nimport AliceCarousel from 'react-alice-carousel';\nimport type { EventObject } from 'react-alice-carousel';\nimport 'react-alice-carousel/lib/alice-carousel.css';\n\nconst responsive = {\n 0: { items: 1 },\n 568: { items: 2 },\n 1024: { items: 3 },\n};\n\nconst items = [\n <div className="item" data-value="1">1</div>,\n <div className="item" data-value="2">2</div>,\n <div className="item" data-value="3">3</div>,\n <div className="item" data-value="4">4</div>,\n <div className="item" data-value="5">5</div>,\n];\n\nconst onSlideChange = (e: EventObject) => {\n console.debug(`onSlideChange => Item's position before a change: ${e.item}. Event:`, e);\n};\n\nconst onSlideChanged = (e: EventObject) => {\n console.debug(`onSlideChanged => Item's position after changes: ${e.item}. Event:`, e);\n};\n\nconst Carousel = () => (\n <AliceCarousel\n mouseTracking\n keyboardNavigation\n items={items}\n responsive={responsive}\n onSlideChange={onSlideChange}\n onSlideChanged={onSlideChanged}\n />\n);\n
'},4161:(e,n,t)=>{t.r(n),t.d(n,{default:()=>a});const a='import React from 'react';\nimport AliceCarousel from 'react-alice-carousel';\nimport type { EventObject } from 'react-alice-carousel';\nimport 'react-alice-carousel/lib/alice-carousel.css';\n\nconst responsive = {\n 0: { items: 1 },\n 568: { items: 2 },\n 1024: { items: 3 },\n};\n\nconst createItems = (length = 5) => {\n return Array.from({ length }).map((e, i) => <div key={i}>{i + 1}</div>);\n};\n\nconst onInitialized = (e: EventObject) => {\n console.debug('onInitialized => ItemsLength:', items.length, 'Event:', e);\n};\n\nconst onResized = (e: EventObject) => {\n console.debug('onResized => ItemsLength:', items.length, 'Event:', e);\n};\n\nconst onUpdated = (e: EventObject) => {\n console.debug('onUpdated => ItemsLength:', items.length, 'Event:', e);\n};\n\nconst Carousel = () => {\n const [items, setItems] = useState(createItems());\n const isDisabled = items.length <= 1;\n\n return (\n <section>\n <div>\n <button disabled={isDisabled} onClick={() => setItems(createItems(items.length - 1))}>-</button>\n <span>Items ({items.length})</span>\n <button onClick={() => setItems(createItems(items.length + 1))}>+</button>\n </div>\n <AliceCarousel\n mouseTracking\n keyboardNavigation\n items={items}\n responsive={responsive}\n onInitialized={onInitialized}\n onResized={onResized}\n onUpdated={onUpdated}\n />\n </section>\n );\n};\n
'},5670:(e,n,t)=>{t.r(n),t.d(n,{default:()=>a});const a='import React from 'react';\nimport AliceCarousel from 'react-alice-carousel';\nimport 'react-alice-carousel/lib/alice-carousel.css';\n\nconst items = [\n <div className="item" data-value="1">1</div>,\n <div className="item" data-value="2">2</div>,\n <div className="item" data-value="3">3</div>,\n <div className="item" data-value="4">4</div>,\n <div className="item" data-value="5">5</div>,\n];\n\nconst Carousel = () => (\n <AliceCarousel\n animationType="fadeout" \n animationDuration={800}\n disableButtonsControls\n infinite\n items={items}\n mouseTracking\n />\n);\n
'},4264:(e,n,t)=>{t.r(n),t.d(n,{default:()=>a});const a='import React, { useState, useEffect } from 'react';\nimport AliceCarousel from 'react-alice-carousel';\nimport 'react-alice-carousel/lib/alice-carousel.css';\n\nconst Carousel = () => {\n const [, setTimestamp] = useState(0);\n const [activeIndex, setActiveIndex] = useState(0);\n\n const onLoad = () => setTimestamp(Date.now());\n const onSlideChanged = ({ item }) => setActiveIndex(item);\n const src = (name = '') => `//github.com/maxmarinich/react-alice-carousel/raw/master/src/assets/img/${name}`;\n\n const items = [\n <TheLazyLoader onLoad={onLoad} src={src('1200x200.jpg')} delay={1000} />,\n <TheLazyLoader onLoad={onLoad} src={src('1200x250.jpg')} delay={5000} />,\n <TheLazyLoader onLoad={onLoad} src={src('1200x300.jpg')} delay={10000} />,\n ];\n\n return (\n <AliceCarousel \n autoHeight \n activeIndex={activeIndex} \n onSlideChanged={onSlideChanged} \n items={items}\n />\n );\n};\n\n\nfunction LazyLoader(props) {\n let timerId;\n const { src = '', delay = 0, onLoad } = props;\n const [isMounted, setMounted] = useState(false);\n const [isLoading, setLoading] = useState(true);\n\n function loadImage() {\n const image = new Image();\n\n image.src = src;\n image.onload = () => {\n setLoading(false);\n onLoad();\n };\n image.onerror = () => {\n setLoading(false);\n };\n }\n\n useEffect(() => {\n if (!isMounted) {\n setMounted(true);\n delay ? (timerId = setTimeout(loadImage, delay)) : loadImage();\n }\n return () => clearTimeout(timerId);\n }, []);\n\n return isLoading ? <div>Loading...</div> : <img width="100%" src={src} />;\n}\n
'},9705:(e,n,t)=>{t.r(n),t.d(n,{default:()=>a});const a='import React, { useState, useEffect } from 'react';\nimport AliceCarousel from 'react-alice-carousel';\nimport 'react-alice-carousel/lib/alice-carousel.css';\n\nconst Carousel = () => {\n const [key, setKey] = useState(0);\n const src = (name = '') => `//github.com/maxmarinich/react-alice-carousel/raw/master/src/assets/img/${name}`;\n\n const [items] = useState([\n <TheLazyLoader onLoad={onLoad} src={src('1200x200.jpg')} delay={1000} />,\n <TheLazyLoader onLoad={onLoad} src={src('1200x250.jpg')} delay={5000} />,\n <TheLazyLoader onLoad={onLoad} src={src('1200x300.jpg')} delay={10000} />,\n ]);\n\n function onLoad() {\n setKey(Date.now());\n }\n\n return (\n <AliceCarousel autoHeight renderKey={key} items={items} />\n );\n};\n\n\nfunction LazyLoader(props) {\n let timerId;\n const { src = '', delay = 0, onLoad } = props;\n const [isMounted, setMounted] = useState(false);\n const [isLoading, setLoading] = useState(true);\n\n function loadImage() {\n const image = new Image();\n\n image.src = src;\n image.onload = () => {\n setLoading(false);\n onLoad();\n };\n image.onerror = () => {\n setLoading(false);\n };\n }\n\n useEffect(() => {\n if (!isMounted) {\n setMounted(true);\n delay ? (timerId = setTimeout(loadImage, delay)) : loadImage();\n }\n return () => clearTimeout(timerId);\n }, []);\n\n return isLoading ? <div>Loading...</div> : <img width="100%" src={src} />;\n}\n
'},1620:(e,n,t)=>{t.r(n),t.d(n,{default:()=>a});const a='import React from 'react';\nimport AliceCarousel from 'react-alice-carousel';\nimport 'react-alice-carousel/lib/alice-carousel.css';\n\nconst responsive = {\n 0: { items: 1 },\n 568: { items: 2 },\n 1024: { items: 3 },\n};\n\nconst items = [\n <div className="item" data-value="1">1</div>,\n <div className="item" data-value="2">2</div>,\n <div className="item" data-value="3">3</div>,\n <div className="item" data-value="4">4</div>,\n <div className="item" data-value="5">5</div>,\n];\n\nconst Carousel = () => (\n <AliceCarousel\n mouseTracking\n items={items}\n paddingLeft={50}\n paddingRight={50}\n responsive={responsive}\n />\n);\n
'},7548:(e,n,t)=>{t.r(n)},2308:(e,n,t)=>{t.r(n)},9997:(e,n,t)=>{t.r(n)},2354:(e,n,t)=>{t.r(n)},6721:(e,n,t)=>{t.r(n)},210:(e,n,t)=>{t.r(n)},3234:(e,n,t)=>{t.r(n)},5874:(e,n,t)=>{t.r(n)},4448:(e,n,t)=>{var a=t(7294),s=t(3840);function l(e){for(var n="https://reactjs.org/docs/error-decoder.html?invariant="+e,t=1;timport React, { useState, useEffect, useRef } from 'react';\nimport AliceCarousel from 'react-alice-carousel';\nimport 'react-alice-carousel/lib/alice-carousel.css';\n\nconst items = [\n <div className="item" data-value="1">1</div>,\n <div className="item" data-value="2">2</div>,\n <div className="item" data-value="3">3</div>,\n <div className="item" data-value="4">4</div>,\n <div className="item" data-value="5">5</div>,\n];\n\nconst Carousel = () => {\n const percent = 0.3;\n const section = useRef(null);\n const [padding, setPadding] = useState(0);\n \n const syncState = () => {\n const { current } = section;\n if (current) {\n setPadding(current.offsetWidth * percent);\n }\n };\n \n useEffect(syncState, []);\n \n return (\n <div ref={section}>\n <AliceCarousel\n infinite\n mouseTracking\n items={items} \n paddingRight={padding} \n onResized={syncState} \n />\n </div>\n );\n };\n
m?(g=p,p=null):g=p.sibling;var v=f(s,p,i[m],o);if(null===v){null===p&&(p=g);break}e&&p&&null===v.alternate&&n(s,p),l=r(v,l,m),null===c?u=v:c.sibling=v,c=v,p=g}if(m===i.length)return t(s,p),sl&&Zs(s,m),u;if(null===p){for(;ml(c,o)?(e[a]=c,e[u]=t,a=u):(e[a]=o,e[i]=t,a=i);else{if(!(ul(c,t)))break e;e[a]=c,e[u]=t,a=u}}}return n}function l(e,n){var t=e.sortIndex-n.sortIndex;return 0!==t?t:e.id-n.id}if("object"==typeof performance&&"function"==typeof performance.now){var r=performance;n.unstable_now=function(){return r.now()}}else{var i=Date,o=i.now();n.unstable_now=function(){return i.now()-o}}var u=[],c=[],p=1,d=null,f=3,h=!1,m=!1,g=!1,v="function"==typeof setTimeout?setTimeout:null,y="function"==typeof clearTimeout?clearTimeout:null,j="undefined"!=typeof setImmediate?setImmediate:null;function b(e){for(var n=a(c);null!==n;){if(null===n.callback)s(c);else{if(!(n.startTime<=e))break;s(c),n.sortIndex=n.expirationTime,t(u,n)}n=a(c)}}function _(e){if(g=!1,b(e),!m)if(null!==a(u))m=!0,M(w);else{var n=a(c);null!==n&&D(_,n.startTime-e)}}function w(e,t){m=!1,g&&(g=!1,y(x),x=-1),h=!0;var l=f;try{for(b(t),d=a(u);null!==d&&(!(d.expirationTime>t)||e&&!C());){var r=d.callback;if("function"==typeof r){d.callback=null,f=d.priorityLevel;var i=r(d.expirationTime<=t);t=n.unstable_now(),"function"==typeof i?d.callback=i:d===a(u)&&s(u),b(t)}else s(u);d=a(u)}if(null!==d)var o=!0;else{var p=a(c);null!==p&&D(_,p.startTime-t),o=!1}return o}finally{d=null,f=l,h=!1}}"undefined"!=typeof navigator&&void 0!==navigator.scheduling&&void 0!==navigator.scheduling.isInputPending&&navigator.scheduling.isInputPending.bind(navigator.scheduling);var k,S=!1,E=null,x=-1,P=5,O=-1;function C(){return!(n.unstable_now()-OLive demo was moved here.
Live demo was moved here.