@lifarl/react-scroll-snap-slider/dist/module.js

A React Slider / Carousel Component with Scroll Snapping and Intersection Observer. ***[Demo](https://lifarl.github.io/react-scroll-snap-slider/)***

import n,{forwardRef as e,createElement as r,useState as t,useRef as i,useCallback as l,useImperativeHandle as o,useEffect as c,Children as a}from"react";import s from"styled-components";
/*! *****************************************************************************
Copyright (c) Microsoft Corporation. All rights reserved.
Licensed under the Apache License, Version 2.0 (the "License"); you may not use
this file except in compliance with the License. You may obtain a copy of the
License at http://www.apache.org/licenses/LICENSE-2.0

THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
MERCHANTABLITY OR NON-INFRINGEMENT.

See the Apache Version 2.0 License for specific language governing permissions
and limitations under the License.
***************************************************************************** */function d(n,e){return Object.defineProperty?Object.defineProperty(n,"raw",{value:e}):n.raw=e,n}var u,f=s.li(u||(u=d(["\n  scroll-snap-align: center;\n  display: flex;\n  justify-content: center;\n  min-width: ",";\n  :not(:last-child) {\n    margin-right: 8px;\n  }\n\n  @media (min-width: 512px) {\n    ",";\n  }\n\n  @media (min-width: 753px) {\n    ",";\n  }\n\n  @media (min-width: 1232px) {\n    ",";\n  }\n"],["\n  scroll-snap-align: center;\n  display: flex;\n  justify-content: center;\n  min-width: ",";\n  :not(:last-child) {\n    margin-right: 8px;\n  }\n\n  @media (min-width: 512px) {\n    ",";\n  }\n\n  @media (min-width: 753px) {\n    ",";\n  }\n\n  @media (min-width: 1232px) {\n    ",";\n  }\n"])),(function(n){return n.slidesPerPageSettings?100/n.slidesPerPageSettings.mobileSmall+"%":n.slideWidth?n.slideWidth+"px":"100%"}),(function(n){return n.slidesPerPageSettings?"min-width: "+100/n.slidesPerPageSettings.mobileBig+"%":""}),(function(n){return n.slidesPerPageSettings?"min-width: "+100/n.slidesPerPageSettings.tablet+"%":""}),(function(n){return n.slidesPerPageSettings?"min-width: "+100/n.slidesPerPageSettings.desktop+"%":""})),h=n.forwardRef((function(e,r){var t=e.slideIndex,i=e.slidesPerPageSettings,l=e.slideWidth,o=e.children;return n.createElement(f,{slidesPerPageSettings:i,slideWidth:l,"data-index-number":t,key:t,ref:r},o)}));h.displayName="Slide";var p,m,g=s.div(p||(p=d(["\n  position: absolute;\n  ","\n  ","\n  cursor: pointer;\n  transition: all 0.1s ease-in-out;\n  background-color: white;\n  padding: 0.5em;\n  border-radius: 4px;\n  z-index: 1;\n  :active {\n    transform: scale(0.9);\n  }\n\n  @media (max-width: 512px) {\n    display: none !important;\n  }\n"],["\n  position: absolute;\n  ","\n  ","\n  cursor: pointer;\n  transition: all 0.1s ease-in-out;\n  background-color: white;\n  padding: 0.5em;\n  border-radius: 4px;\n  z-index: 1;\n  :active {\n    transform: scale(0.9);\n  }\n\n  @media (max-width: 512px) {\n    display: none !important;\n  }\n"])),(function(n){return"next"===n.direction&&"right: 5%;"}),(function(n){return"prev"===n.direction&&"left: 5%;"})),v=s.svg(m||(m=d(["\n  width: 22px;\n  height: 22px;\n  fill: #676767;\n"],["\n  width: 22px;\n  height: 22px;\n  fill: #676767;\n"]))),w=e((function(n,e){var t=n.direction,i=n.onClick;return r(g,{direction:t,onClick:i,ref:e},r(v,{viewBox:"0 0 8 8"},r("path",{d:"prev"===t?"M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z":"M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z"})))}));w.displayName="NavArrow";var y,x,b,P=s.div(y||(y=d(["\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n"],["\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n"]))),S=s.div(x||(x=d(["\n  ::-webkit-scrollbar {\n    display: none;\n  }\n  -webkit-overflow-scrolling: touch;\n  -ms-overflow-style: none;\n  scrollbar-width: none;\n  scroll-snap-type: x mandatory;\n  scroll-behavior: smooth;\n  overflow-x: scroll;\n  width: 100%;\n"],["\n  ::-webkit-scrollbar {\n    display: none;\n  }\n  -webkit-overflow-scrolling: touch;\n  -ms-overflow-style: none;\n  scrollbar-width: none;\n  scroll-snap-type: x mandatory;\n  scroll-behavior: smooth;\n  overflow-x: scroll;\n  width: 100%;\n"]))),k=s.ul(b||(b=d(["\n  display: flex;\n  flex-wrap: nowrap;\n  white-space: nowrap;\n  list-style: none;\n  width: 100%;\n  padding: 0;\n  margin: 0;\n"],["\n  display: flex;\n  flex-wrap: nowrap;\n  white-space: nowrap;\n  list-style: none;\n  width: 100%;\n  padding: 0;\n  margin: 0;\n"]))),C=e((function(e,r){var s=e.renderCustomArrow,d=e.slidesPerPageSettings,u=e.slideWidth,f=e.onScrollStart,p=e.onScrollEnd,m=e.onSlidesVisibilityChange,g=e.onSlideVisible,v=e.children,y=t(!1),x=y[0],b=y[1],C=i(null),W=i(null),E=i([]),N=i(null),M=i(null),j=i(null),z=i(0),A=i(0),I=i([]),T=l((function(n,e){E.current[e]=n}),[]),B=l((function(){var n,e,r;return(null===(r=null===(e=null===(n=W.current)||void 0===n?void 0:n.firstChild)||void 0===e?void 0:e.firstChild)||void 0===r?void 0:r.clientWidth)||0}),[]),L=l((function(n){n.forEach((function(n){var e,r,t=n.target,i=Number(t.dataset.indexNumber);if(n.intersectionRatio>=.5)return z.current=i,I.current.push(i),I.current.sort(),null===(e=E.current[i])||void 0===e||e.setAttribute("aria-hidden","false"),void(g&&g(i));I.current=I.current.filter((function(n){return n!==i})),null===(r=E.current[i])||void 0===r||r.setAttribute("aria-hidden","true")})),A.current=I.current[Math.floor(I.current.length/2)],m&&m(A.current)}),[]),O=l((function(){if(!W.current)return!1;var n=W.current.clientWidth,e=B()-1;return E.current.length*e>n}),[]),R=function(n){var e="prev"===n?-1:1;if(W.current){var r=B(),t=Math.floor(W.current.clientWidth/r);W.current.scrollBy({top:0,behavior:"smooth",left:t*r*e})}},F=l((function(n){W.current&&W.current.scrollTo({top:0,behavior:"smooth",left:n})}),[]),V=l((function(n){if(W.current){var e=W.current.scrollLeft,r=W.current.clientWidth,t=B(),i=t*n;i<e?F(i):i+t>e+r&&F(i+t-r)}}),[]);return o(r,(function(){return{scrollToSlide:V,sliderRef:W}})),c((function(){j.current&&j.current.disconnect();for(var n=function(n,e,r,t){void 0===n&&(n=null);var i=e.current;if(null!==i)return i;var l=new IntersectionObserver(r,{root:n,rootMargin:"0px",threshold:t});return e.current=l,l}(W.current,j,L,.5),e=0,r=E.current;e<r.length;e++){var t=r[e];t&&n.observe(t)}return function(){return n.disconnect()}}),[n.Children.count(v)]),c((function(){x&&f&&f(A.current)}),[x]),c((function(){if(O()&&W.current&&M.current&&N.current)return x?(M.current.style.display="none",void(N.current.style.display="none")):void(W.current.scrollLeft<=30?(M.current.style.display="block",N.current.style.display="none"):W.current.clientWidth+W.current.scrollLeft>=W.current.scrollWidth-30?(N.current.style.display="block",M.current.style.display="none"):(M.current.style.display="block",N.current.style.display="block"))}),[n.Children.count(v),x]),n.createElement(P,null,s?n.createElement(n.Fragment,null,s({direction:"prev",ref:N,onClick:R}),s({direction:"next",ref:M,onClick:R})):n.createElement(n.Fragment,null,n.createElement(w,{ref:N,direction:"prev",onClick:function(){return R("prev")}}),n.createElement(w,{ref:M,direction:"next",onClick:function(){return R("next")}})),n.createElement(S,{onScroll:function(){C.current&&clearTimeout(C.current),C.current=setTimeout((function(){C.current=null,b(!1),p&&p(A.current)}),250),x||b(!0)},ref:W,tabIndex:0},n.createElement(k,null,a.map(v,(function(e,r){return n.createElement(h,{key:r,slideIndex:r,slidesPerPageSettings:d,slideWidth:u,ref:function(n){return T(n,r)}},e)})))))}));C.displayName="Carousel";var W=C;export{W as Slider,v as StyledArrow,P as StyledCarousel,g as StyledNavWrapper,f as StyledSlide,S as StyledSlider,k as StyledUl};
//# sourceMappingURL=module.js.map