t-a-e-3d-carousel-reactjs/build/3DCarousel.js

3D responsive and customizable carousel for reactJs

module.exports=function(e){var r={};function t(n){if(r[n])return r[n].exports;var a=r[n]={i:n,l:!1,exports:{}};return e[n].call(a.exports,a,a.exports,t),a.l=!0,a.exports}return t.m=e,t.c=r,t.d=function(e,r,n){t.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:n})},t.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},t.t=function(e,r){if(1&r&&(e=t(e)),8&r)return e;if(4&r&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(t.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&r&&"string"!=typeof e)for(var a in e)t.d(n,a,function(r){return e[r]}.bind(null,a));return n},t.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(r,"a",r),r},t.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},t.p="",t(t.s=5)}([function(e,r){e.exports=require("react")},function(e,r,t){var n=t(2),a=t(3);"string"==typeof(a=a.__esModule?a.default:a)&&(a=[[e.i,a,""]]);var o={insert:"head",singleton:!1};n(a,o);e.exports=a.locals||{}},function(e,r,t){"use strict";var n,a=function(){return void 0===n&&(n=Boolean(window&&document&&document.all&&!window.atob)),n},o=function(){var e={};return function(r){if(void 0===e[r]){var t=document.querySelector(r);if(window.HTMLIFrameElement&&t instanceof window.HTMLIFrameElement)try{t=t.contentDocument.head}catch(e){t=null}e[r]=t}return e[r]}}(),i=[];function l(e){for(var r=-1,t=0;t<i.length;t++)if(i[t].identifier===e){r=t;break}return r}function c(e,r){for(var t={},n=[],a=0;a<e.length;a++){var o=e[a],c=r.base?o[0]+r.base:o[0],s=t[c]||0,u="".concat(c," ").concat(s);t[c]=s+1;var _=l(u),d={css:o[1],media:o[2],sourceMap:o[3]};-1!==_?(i[_].references++,i[_].updater(d)):i.push({identifier:u,updater:v(d,r),references:1}),n.push(u)}return n}function s(e){var r=document.createElement("style"),n=e.attributes||{};if(void 0===n.nonce){var a=t.nc;a&&(n.nonce=a)}if(Object.keys(n).forEach((function(e){r.setAttribute(e,n[e])})),"function"==typeof e.insert)e.insert(r);else{var i=o(e.insert||"head");if(!i)throw new Error("Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.");i.appendChild(r)}return r}var u,_=(u=[],function(e,r){return u[e]=r,u.filter(Boolean).join("\n")});function d(e,r,t,n){var a=t?"":n.media?"@media ".concat(n.media," {").concat(n.css,"}"):n.css;if(e.styleSheet)e.styleSheet.cssText=_(r,a);else{var o=document.createTextNode(a),i=e.childNodes;i[r]&&e.removeChild(i[r]),i.length?e.insertBefore(o,i[r]):e.appendChild(o)}}function f(e,r,t){var n=t.css,a=t.media,o=t.sourceMap;if(a?e.setAttribute("media",a):e.removeAttribute("media"),o&&"undefined"!=typeof btoa&&(n+="\n/*# sourceMappingURL=data:application/json;base64,".concat(btoa(unescape(encodeURIComponent(JSON.stringify(o))))," */")),e.styleSheet)e.styleSheet.cssText=n;else{for(;e.firstChild;)e.removeChild(e.firstChild);e.appendChild(document.createTextNode(n))}}var m=null,p=0;function v(e,r){var t,n,a;if(r.singleton){var o=p++;t=m||(m=s(r)),n=d.bind(null,t,o,!1),a=d.bind(null,t,o,!0)}else t=s(r),n=f.bind(null,t,r),a=function(){!function(e){if(null===e.parentNode)return!1;e.parentNode.removeChild(e)}(t)};return n(e),function(r){if(r){if(r.css===e.css&&r.media===e.media&&r.sourceMap===e.sourceMap)return;n(e=r)}else a()}}e.exports=function(e,r){(r=r||{}).singleton||"boolean"==typeof r.singleton||(r.singleton=a());var t=c(e=e||[],r);return function(e){if(e=e||[],"[object Array]"===Object.prototype.toString.call(e)){for(var n=0;n<t.length;n++){var a=l(t[n]);i[a].references--}for(var o=c(e,r),s=0;s<t.length;s++){var u=l(t[s]);0===i[u].references&&(i[u].updater(),i.splice(u,1))}t=o}}}},function(e,r,t){(r=t(4)(!1)).push([e.i,".carousel_____container{\r\n    width: 90vw;\r\n    height: 70vh;\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n    perspective: 800px;\r\n}\r\n\r\n.carousel_____image{\r\n    display: flex;\r\n    position: absolute;\r\n    width: 50vw;\r\n    height: 50vh;\r\n    justify-content: center;\r\n    align-items: center;\r\n    color: #fff;\r\n    transition: all 0.7s ease;\r\n    object-fit: cover;\r\n    border-radius: 7px;\r\n}\r\n\r\n.carousel_____zIndex4{\r\n    z-index: 4;\r\n}\r\n.carousel_____zIndex3{\r\n    z-index: 3;\r\n}\r\n.carousel_____zIndex2{\r\n    z-index: 2;\r\n}\r\n\r\n.carousel____middle{\r\n    transform: translateX(0) scale(1.1) rotateY(0);\r\n    opacity: 1;\r\n    filter: blur(0);\r\n    cursor: pointer;\r\n}\r\n\r\n.carousel____right, .carousel____left{\r\n    opacity: 0.6;\r\n    filter: blur(3px);\r\n    pointer-events: none;\r\n}\r\n\r\n.carousel____left{\r\n    transform: translateX(-17vw) scale(0.9) rotateY(10deg);\r\n}\r\n\r\n.carousel____right{\r\n    transform: translateX(17vw) scale(0.9) rotateY(-10deg);\r\n}\r\n\r\n.carousel_____arrow-indicators{\r\n    z-index: 6;\r\n    font-size: 3rem;\r\n    cursor: pointer;\r\n    color: #fff;\r\n}\r\n\r\n.carousel_____indicators-wrapper{\r\n    display: flex;\r\n    flex-direction: row;\r\n    justify-content: space-between;\r\n    padding-left: 80px;\r\n    padding-right: 80px;\r\n    width: 90vw;\r\n}\r\n\r\n.carousel_____image-overlay{\r\n    display: flex;\r\n    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\r\n    font-variant: small-caps;\r\n    position: absolute;\r\n    width: 50vw;\r\n    height: 53vh;\r\n    justify-content: center;\r\n    align-items: center;\r\n    background: rgb(0, 0, 0, 0.4);\r\n    z-index: 5;\r\n    flex-direction: column;\r\n    letter-spacing: 10px;\r\n    color: #fff;\r\n    cursor: pointer;\r\n    transition: all 0.4s ease;\r\n    transform-origin: bottom;\r\n    border-radius: 7px;\r\n    transform: scale(1.1);\r\n}\r\n\r\n.carousel_____image-overlay-enter{\r\n    transform: scaleX(1.1) scaleY(1.1);\r\n    opacity: 1;\r\n}\r\n\r\n.carousel_____image-overlay-leave{\r\n    transform: scaleX(0) scaleY(1.1);\r\n    opacity: 0;\r\n}\r\n\r\n.carousel_____image-container-wrapper{\r\n    position: absolute;\r\n    width: 50vw;\r\n    height: 50vh;\r\n}\r\n\r\n.carousel_____image-overlay-disabled{\r\n    display: none;\r\n}\r\n\r\n@media screen and (max-width: 750px){\r\n    .carousel_____arrow-indicators{\r\n        font-size: 2rem;\r\n    }\r\n    \r\n    .carousel_____indicators-wrapper{\r\n        padding-left: 10px;\r\n        padding-right: 10px;\r\n        width: 100vw;\r\n    }\r\n}",""]),e.exports=r},function(e,r,t){"use strict";e.exports=function(e){var r=[];return r.toString=function(){return this.map((function(r){var t=function(e,r){var t=e[1]||"",n=e[3];if(!n)return t;if(r&&"function"==typeof btoa){var a=(i=n,l=btoa(unescape(encodeURIComponent(JSON.stringify(i)))),c="sourceMappingURL=data:application/json;charset=utf-8;base64,".concat(l),"/*# ".concat(c," */")),o=n.sources.map((function(e){return"/*# sourceURL=".concat(n.sourceRoot||"").concat(e," */")}));return[t].concat(o).concat([a]).join("\n")}var i,l,c;return[t].join("\n")}(r,e);return r[2]?"@media ".concat(r[2]," {").concat(t,"}"):t})).join("")},r.i=function(e,t,n){"string"==typeof e&&(e=[[null,e,""]]);var a={};if(n)for(var o=0;o<this.length;o++){var i=this[o][0];null!=i&&(a[i]=!0)}for(var l=0;l<e.length;l++){var c=[].concat(e[l]);n&&a[c[0]]||(t&&(c[2]?c[2]="".concat(t," and ").concat(c[2]):c[2]=t),r.push(c))}},r}},function(e,r,t){"use strict";t.r(r);var n=t(0),a=t.n(n),o=(t(1),{color:void 0,size:void 0,className:void 0,style:void 0,attr:void 0}),i=a.a.createContext&&a.a.createContext(o),l=function(){return(l=Object.assign||function(e){for(var r,t=1,n=arguments.length;t<n;t++)for(var a in r=arguments[t])Object.prototype.hasOwnProperty.call(r,a)&&(e[a]=r[a]);return e}).apply(this,arguments)},c=function(e,r){var t={};for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&r.indexOf(n)<0&&(t[n]=e[n]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var a=0;for(n=Object.getOwnPropertySymbols(e);a<n.length;a++)r.indexOf(n[a])<0&&Object.prototype.propertyIsEnumerable.call(e,n[a])&&(t[n[a]]=e[n[a]])}return t};function s(e){return function(r){return a.a.createElement(u,l({attr:l({},e.attr)},r),function e(r){return r&&r.map((function(r,t){return a.a.createElement(r.tag,l({key:t},r.attr),e(r.child))}))}(e.child))}}function u(e){var r=function(r){var t,n=e.attr,o=e.size,i=e.title,s=c(e,["attr","size","title"]),u=o||r.size||"1em";return r.className&&(t=r.className),e.className&&(t=(t?t+" ":"")+e.className),a.a.createElement("svg",l({stroke:"currentColor",fill:"currentColor",strokeWidth:"0"},r.attr,n,s,{className:t,style:l(l({color:e.color||r.color},r.style),e.style),height:u,width:u,xmlns:"http://www.w3.org/2000/svg"}),i&&a.a.createElement("title",null,i),e.children)};return void 0!==i?a.a.createElement(i.Consumer,null,(function(e){return r(e)})):r(o)}function _(e){return s({tag:"svg",attr:{viewBox:"0 0 512 512"},child:[{tag:"path",attr:{d:"M256 48C141.1 48 48 141.1 48 256s93.1 208 208 208 208-93.1 208-208S370.9 48 256 48zm43.4 289.1c7.5 7.5 7.5 19.8 0 27.3-3.8 3.8-8.7 5.6-13.6 5.6s-9.9-1.9-13.7-5.7l-94-94.3c-6.9-7.6-6.7-19.3.6-26.6l95.4-95.7c7.5-7.5 19.7-7.6 27.3 0 7.5 7.5 7.6 19.7 0 27.3l-81.9 81 79.9 81.1z"}}]})(e)}function d(e){return s({tag:"svg",attr:{viewBox:"0 0 512 512"},child:[{tag:"path",attr:{d:"M48 256c0 114.9 93.1 208 208 208s208-93.1 208-208S370.9 48 256 48 48 141.1 48 256zm244.5 0l-81.9-81.1c-7.5-7.5-7.5-19.8 0-27.3s19.8-7.5 27.3 0l95.4 95.7c7.3 7.3 7.5 19.1.6 26.6l-94 94.3c-3.8 3.8-8.7 5.7-13.7 5.7-4.9 0-9.9-1.9-13.6-5.6-7.5-7.5-7.6-19.7 0-27.3l79.9-81z"}}]})(e)}r.default=function(e){for(var r=e.imageList,t=e.imageClassName,o=e.id,i=e.onClick,l=e.className,c=e.autoplay,s=e.showArrows,u=e.overlayClassName,f=e.interval,m=[!0,!1],p=m.includes(s)?s:m[0],v=m.includes(c)?c:m[1],g={middle:0,left:1,right:r.length-1},y=[],h=0;h<r.length;h++)null==r[h].title&&(r[h].title=""),y.push({index:h,url:r[h].url,title:r[h].title});function x(){document.getElementById(g.right).classList.add("carousel____right"),document.getElementById(g.left).classList.add("carousel____left"),document.getElementById(g.middle).classList.add("carousel____middle"),document.getElementById(g.middle).classList.add("carousel_____zIndex4"),g.title=""}function b(){document.getElementById(g.middle).classList.remove("carousel____middle"),document.getElementById(g.left).classList.remove("carousel____left"),document.getElementById(g.right).classList.remove("carousel____right"),document.getElementById(g.left).classList.remove("carousel_____zIndex2"),document.getElementById(g.right).classList.remove("carousel_____zIndex3"),document.getElementById(g.right).classList.remove("carousel_____zIndex2"),document.getElementById(g.left).classList.remove("carousel_____zIndex3"),document.getElementById(g.middle).classList.remove("carousel_____zIndex4"),E()}function w(){b(),g.left=g.middle,g.middle=g.right,0!=g.right?g.right=g.right-1:g.right=r.length-1,x(),document.getElementById(g.right).classList.add("carousel_____zIndex2"),document.getElementById(g.left).classList.add("carousel_____zIndex3")}function E(){document.getElementById("carousel_____image-overlay-"+g.middle).classList.remove("carousel_____image-overlay-enter"),document.getElementById("carousel_____image-overlay-"+g.middle).classList.add("carousel_____image-overlay-leave")}return Object(n.useEffect)((function(){x()}),[]),v&&(null==f&&(f=2e3),setInterval((function(){w()}),f)),a.a.createElement("div",{className:"carousel_____container ".concat(l),id:o},p?a.a.createElement("div",{className:"carousel_____indicators-wrapper"},a.a.createElement(_,{className:"carousel_____arrow-indicators",id:"carousel_____left-arrow",onClick:function(){return w()}}),a.a.createElement(d,{className:"carousel_____arrow-indicators",id:"carousel_____right-arrow",onClick:function(){return b(),g.right=g.middle,g.middle=g.left,g.left==r.length-1?g.left=0:g.left=g.left+1,x(),document.getElementById(g.right).classList.add("carousel_____zIndex3"),void document.getElementById(g.left).classList.add("carousel_____zIndex2")}})):"",y.map((function(e){return a.a.createElement("div",{className:"carousel_____image-container-wrapper",key:e.index,onMouseEnter:function(){return document.getElementById("carousel_____image-overlay-"+g.middle).classList.remove("carousel_____image-overlay-leave"),void document.getElementById("carousel_____image-overlay-"+g.middle).classList.add("carousel_____image-overlay-enter")}},""!=e.title?a.a.createElement("div",{id:"carousel_____image-overlay-"+e.index,className:"carousel_____image-overlay carousel_____image-overlay-leave ".concat(u),onMouseLeave:function(){return E()}},a.a.createElement("h1",{className:"carousel_____overlay-title"},e.title)):a.a.createElement("div",{id:"carousel_____image-overlay-"+e.index,className:"carousel_____image-overlay-disabled"}),a.a.createElement("img",{src:e.url,alt:"carousel",id:e.index,className:"carousel_____image  ".concat(t),onClick:i}))})))}}]);