flexy-slider
Version:
A simple react component which makes your carousel/slider functionality so easy to integrate in your application. ## Demo
2 lines (1 loc) • 6.99 kB
JavaScript
(function(a,h){typeof exports=="object"&&typeof module<"u"?module.exports=h(require("react/jsx-runtime"),require("react")):typeof define=="function"&&define.amd?define(["react/jsx-runtime","react"],h):(a=typeof globalThis<"u"?globalThis:a||self,a["flexy-slider"]=h(a.jsxRuntime,a.React))})(this,function(a,h){"use strict";const N=({svgSource:n,svgColor:t})=>n==="left"?a.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",fill:t,viewBox:"0 0 24 24",children:a.jsx("g",{"data-name":"Layer 2",children:a.jsxs("g",{"data-name":"arrowhead-left",children:[a.jsx("rect",{width:"24",height:"24",opacity:"0",transform:"rotate(90 12 12)"}),a.jsx("path",{d:"M11.64 5.23a1 1 0 0 0-1.41.13l-5 6a1 1 0 0 0 0 1.27l4.83 6a1 1 0 0 0 .78.37 1 1 0 0 0 .78-1.63L7.29 12l4.48-5.37a1 1 0 0 0-.13-1.4z"}),a.jsx("path",{d:"M14.29 12l4.48-5.37a1 1 0 0 0-1.54-1.28l-5 6a1 1 0 0 0 0 1.27l4.83 6a1 1 0 0 0 .78.37 1 1 0 0 0 .78-1.63z"})]})})}):a.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",fill:t,viewBox:"0 0 24 24",children:a.jsx("g",{"data-name":"Layer 2",children:a.jsxs("g",{"data-name":"arrowhead-right",children:[a.jsx("rect",{width:"24",height:"24",opacity:"0",transform:"rotate(-90 12 12)"}),a.jsx("path",{d:"M18.78 11.37l-4.78-6a1 1 0 0 0-1.41-.15 1 1 0 0 0-.15 1.41L16.71 12l-4.48 5.37a1 1 0 0 0 .13 1.41A1 1 0 0 0 13 19a1 1 0 0 0 .77-.36l5-6a1 1 0 0 0 .01-1.27z"}),a.jsx("path",{d:"M7 5.37a1 1 0 0 0-1.61 1.26L9.71 12l-4.48 5.36a1 1 0 0 0 .13 1.41A1 1 0 0 0 6 19a1 1 0 0 0 .77-.36l5-6a1 1 0 0 0 0-1.27z"})]})})}),g={tileToShow:4,responsive:{XS:1,SM:2,MD:3},autoSlideInterval:4e3,autoSlideCount:1,navMode:{navigationSlideCount:1}},j=(n,t,s)=>{let e=t;const{XS:f,SM:w,MD:u}=s,{responsive:p}=g;return n<500?e=f?e<f?e:f:e<p.XS?e:p.XS:n>500&&n<899?e=w?e<w?e:w:e<p.SM?e:p.SM:n>900&&n<1200?e=u?e<u?e:u:e<p.MD?e:p.MD:e=t||g.navMode.navigationSlideCount,e},B=n=>n==="circle"?"30px":"5px",I=n=>{let t={};if(n){const{ArrowBackGroundShape:s,ArrowBackGroundColor:e,iconColor:f}=n;s&&(t.borderRadius=B(s)),e&&(t.backgroundColor=e),f&&(t.color=f)}return t},P="data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3e%3cg%20data-name='Layer%202'%3e%3cg%20data-name='arrowhead-left'%3e%3crect%20width='24'%20height='24'%20opacity='0'%20transform='rotate(90%2012%2012)'/%3e%3cpath%20d='M11.64%205.23a1%201%200%200%200-1.41.13l-5%206a1%201%200%200%200%200%201.27l4.83%206a1%201%200%200%200%20.78.37%201%201%200%200%200%20.78-1.63L7.29%2012l4.48-5.37a1%201%200%200%200-.13-1.4z'/%3e%3cpath%20d='M14.29%2012l4.48-5.37a1%201%200%200%200-1.54-1.28l-5%206a1%201%200%200%200%200%201.27l4.83%206a1%201%200%200%200%20.78.37%201%201%200%200%200%20.78-1.63z'/%3e%3c/g%3e%3c/g%3e%3c/svg%3e",$="data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3e%3cg%20data-name='Layer%202'%3e%3cg%20data-name='arrowhead-right'%3e%3crect%20width='24'%20height='24'%20opacity='0'%20transform='rotate(-90%2012%2012)'/%3e%3cpath%20d='M18.78%2011.37l-4.78-6a1%201%200%200%200-1.41-.15%201%201%200%200%200-.15%201.41L16.71%2012l-4.48%205.37a1%201%200%200%200%20.13%201.41A1%201%200%200%200%2013%2019a1%201%200%200%200%20.77-.36l5-6a1%201%200%200%200%20.01-1.27z'/%3e%3cpath%20d='M7%205.37a1%201%200%200%200-1.61%201.26L9.71%2012l-4.48%205.36a1%201%200%200%200%20.13%201.41A1%201%200%200%200%206%2019a1%201%200%200%200%20.77-.36l5-6a1%201%200%200%200%200-1.27z'/%3e%3c/g%3e%3c/g%3e%3c/svg%3e",G={parentWidth:0,innerWidth:"100%",innerElementPosition:0,passedTile:0,mainWidth:"100%",overflowX:"hidden",autoSlide:!1},E={left:!0,right:!1};return n=>{let{children:t,tileToShow:s,responsive:e={},navMode:f={},componentWidth:w,componentHeight:u,componentMargin:p,tileMargin:x,autoSlide:L}=n;const[l,T]=h.useState({...G}),[W,y]=h.useState({...E});let b=20;x&&(document.documentElement.style.setProperty("--base-tile-margin",`${x}px`),b=x+x);const v=h.useRef(null);s=s||g.tileToShow;const A=()=>{let r={...l,passedTile:s,autoSlide:L},d={...W};r.passedTile>=(t==null?void 0:t.length)&&y({left:!0,right:!0}),(!f||!f.showArrow)&&(r.overflowX="auto");const{clientWidth:i}=v.current.parentElement;i<500?(r.innerWidth=i/(e&&e.XS||g.responsive.XS)*t.length,r.passedTile=e&&e.XS||g.responsive.XS):i>500&&i<899?(r.innerWidth=i/(e&&e.SM||g.responsive.SM)*t.length,r.passedTile=e&&e.SM||g.responsive.SM):i>900&&i<1200?(r.innerWidth=i/(e&&e.MD||g.responsive.MD)*t.length,r.passedTile=e&&e.MD||g.responsive.MD):r.innerWidth=t.length?i/s*t.length:i,Number(r.passedTile)===t.length&&(d.right=!0),r.parentWidth=i,r.mainWidth=i,T(r),y({...d})};h.useLayoutEffect(()=>{if(t!=null&&t.length)return window.addEventListener("resize",A),A(),()=>window.removeEventListener("resize",A)},[]);const C=r=>{const d={left:!1,right:!1},{clientWidth:i}=v.current.parentElement;let o=j(l.parentWidth,f.navigationSlideCount,e);n.autoSlide&&(o=g.autoSlideCount);const{innerElementPosition:M,passedTile:S}=l,c=v.current.children[0].children[0].clientWidth;o?o=o<=s?o:Math.floor(v.current.clientWidth/c):o=Math.floor(v.current.clientWidth/c);let m=(o*c+o*b)*r,D=S+r*-o;if(M!==0&&(m=parseInt(M)+parseInt(m)),r<0&&t.length-S<=s){let k=t.length-S;k<=o&&(m=M+k*(c+b)*r,d.right=!0)}r>0&&m*r>=0&&(m=0,d.left=!0,D=s);let q={...l,mainWidth:i||l.mainWidth,parentWidth:i||l.parentWidth,passedTile:D,innerElementPosition:m};T(q),y(d)};h.useEffect(()=>{const{autoSlideInterval:r}=n;let d;if(l.autoSlide&&l.passedTile>0){let i=r||g.autoSlideInterval;if(l.passedTile>(t==null?void 0:t.length)){let o={...l};o.innerElementPosition=0,o.passedTile=s,T(o),y(E)}else d=setTimeout(()=>{C(-1)},i);return()=>{clearInterval(d)}}},[l.passedTile,l.autoSlide]);const X=h.memo(({style:r,disableMe:d,iconOption:i,directionMode:o})=>{const{type:M}=i||{};let S=I(r),c={arrowSrc:"",altText:"",clickValue:0};return o==="left"?(c.arrowSrc=i&&i.left?i.left:P,c.altText="Left Arrow Slider",c.clickValue=1):(c.arrowSrc=i&&i.right?i.right:$,c.altText="Right Arrow Slider",c.clickValue=-1),a.jsx("span",{className:d?"disabled":"enabled",style:S,onClick:()=>C(c.clickValue),children:M==="IMAGE"?a.jsx("img",{disabled:d,src:c.arrowSrc,alt:c.altText}):a.jsx(N,{svgSource:o,svgColor:S.color})})}),O=h.useCallback(()=>{const{icon:r,showArrow:d,arrowStyle:i}=f||{};return d?a.jsxs(h.Fragment,{children:[a.jsx("div",{className:"nav-slider left",children:a.jsx(X,{directionMode:"left",style:i,disableMe:W.left,iconOption:r})}),a.jsx("div",{className:"nav-slider right",children:a.jsx(X,{directionMode:"right",style:i,disableMe:W.right,iconOption:r})})]}):null}),z=r=>{n.pauseOnHover&&L&&T({...l,autoSlide:r})};return a.jsx(h.Fragment,{children:t&&t.length?a.jsx("div",{style:{width:w?`${w}px`:"100%",height:u?`${u}px`:"auto",margin:p?`${p}px`:"0px"},children:a.jsxs("div",{ref:v,className:"slider-container",style:{width:l.mainWidth,overflowX:l.overflowX},children:[a.jsx("div",{className:"sliderWidthBox",onMouseEnter:()=>z(!1),onMouseLeave:()=>z(!0),style:{width:l.innerWidth,transform:`translateX(${l.innerElementPosition}px)`},children:t}),O()]})}):"No data found !!"})}});