diff --git a/docs/404.html b/docs/404.html index 2d195d6..f346944 100644 --- a/docs/404.html +++ b/docs/404.html @@ -8,14 +8,14 @@ Page Not Found | Tiny-Swiper | Ingenious JavaScript Carousel powered by wonderful plugins - +

Page Not Found

We could not find what you were looking for.

Please contact the owner of the site that linked you to the original URL and let them know their link is broken.

- + \ No newline at end of file diff --git a/docs/b5865bef.3ef811e2.js b/docs/b5865bef.3ef811e2.js new file mode 100644 index 0000000..397eaf4 --- /dev/null +++ b/docs/b5865bef.3ef811e2.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[22],{124:function(e,t,i){},82:function(e,t,i){"use strict";i.r(t),i.d(t,"frontMatter",(function(){return ee})),i.d(t,"metadata",(function(){return te})),i.d(t,"rightToc",(function(){return ie})),i.d(t,"default",(function(){return ae}));var n=i(2),a=i(6),s=i(0),r=i.n(s),c=i(83);function o(){return(o=Object.assign||function(e){for(var t=1;t=1)for(var a=1;a<=t;a++)n.load(e+a),n.load(e-a)}};e.on("before-init",(function(){t.lazyload=o({loadPrevNext:!1,loadPrevNextAmount:1,loadOnTransitionStart:!1,elementClass:"swiper-lazy",loadingClass:"swiper-lazy-loading",loadedClass:"swiper-lazy-loaded",preloaderClass:"swiper-lazy-preloader"},t.lazyload)})),i.loadOnTransitionStart?e.on("before-slide",(function(e,t,a){n.loadRange(a,i.loadPrevNextAmount)})):e.on("after-slide",(function(e){n.loadRange(e,i.loadPrevNextAmount)})),e.on("after-destroy",(function(){e.lazyload&&delete e.lazyload}))}}function g(e,t){var i={$pageList:[],$pagination:null};e.on("before-init",(function(){t.pagination&&(t.pagination=Object.assign({clickable:!1,bulletClass:"swiper-pagination-bullet",bulletActiveClass:"swiper-pagination-bullet-active"},t.pagination))})),e.on("after-init",(function(){if(t.pagination){var n=t.pagination,a=n.bulletClass,s=n.bulletActiveClass,r=e.env.element.$list,c="string"==typeof t.pagination.el?document.body.querySelector(t.pagination.el):t.pagination.el,o=[],d=document.createDocumentFragment(),b=r.length-Math.ceil(t.slidesPerView)+1;t.excludeElements.push(c),i.$pagination=c,i.$pageList=o;for(var u=0;u=0&&i.bottom<=window.innerHeight&&i.left>=0&&i.right<=window.innerWidth&&t}function N(e,t){if(t.keyboard){var i=t.keyboard,n={enable:function(){i.enabled=!0},disable:function(){i.enabled=!1},onKeyDown:function(n){var a=n.key;i.onlyInViewport&&!y(e.env.element.$el)||!i.enabled||(t.isHorizontal?a===O?e.slideTo(e.state.index-1):a===v&&e.slideTo(e.state.index+1):a===w?e.slideTo(e.state.index-1):a===h&&e.slideTo(e.state.index+1))}};e.on("before-init",(function(){t.keyboard=o({enabled:!0,onlyInViewport:!0},t.keyboard),e.keyboard=n,b(window,"keydown",n.onKeyDown)})),e.on("after-destroy",(function(){n&&(u(window,"keydown",n.onKeyDown),delete e.keyboard)}))}}function x(e,t){var i={$el:null},n={wheeling:!1,wheelDelta:0,wheelingTimer:0},a=function(i){var a=Math.abs(i.deltaX)>Math.abs(i.deltaY)?i.deltaX:i.deltaY,s=e.state.index;if(Math.abs(a)-Math.abs(n.wheelDelta)>0&&!n.wheeling&&Math.abs(a)>=t.mousewheel.sensitivity){var r=t.mousewheel.invert?-1:1;e.slideTo(a>0?s-r:s+r),n.wheeling=!0,n.wheelingTimer=setTimeout((function(){n.wheeling=!1}),t.mousewheel.interval)}n.wheelDelta=a,i.preventDefault(),i.stopPropagation()};e.on("before-init",(function(){t.mousewheel&&(t.mousewheel=Object.assign({invert:!1,sensitivity:1,interval:400},t.mousewheel))})),e.on("after-init",(function(){if(t.mousewheel){var n=e.env.element.$el;i.$el=n,b(n,"wheel",a)}})),e.on("after-destroy",(function(){t.mousewheel&&(u(i.$el,"wheel",a),delete i.$el)}))}var S={direction:"horizontal",touchRatio:1,touchAngle:45,longSwipesRatio:.5,initialSlide:0,loop:!1,freeMode:!1,mousewheel:!1,passiveListeners:!0,resistance:!0,resistanceRatio:.85,speed:300,longSwipesMs:300,spaceBetween:0,slidesPerView:1,centeredSlides:!1,slidePrevClass:"swiper-slide-prev",slideNextClass:"swiper-slide-next",slideActiveClass:"swiper-slide-active",slideClass:"swiper-slide",wrapperClass:"swiper-wrapper",touchStartPreventDefault:!0,touchStartForcePreventDefault:!1,touchMoveStopPropagation:!1,excludeElements:[],injections:{translate:function(e,t,i,n){m(t.element.$wrapper,{transition:e.isStart?"none":"transform ease "+n+"ms",transform:i.isHorizontal?"translate3d("+e.transforms+"px, 0, 0)":"translate3d(0, "+e.transforms+"px, 0)"})}}};var C="before-init",z="after-init",T="before-slide",D="scroll",E="after-slide",P="before-destroy",k="after-destroy";var M=180/Math.PI;function A(){var e=[];return{getDuration:function(){var t=e[0],i=e[e.length-1];return t?i.time-t.time:0},getOffset:function(){var t=e[0],i=e[e.length-1];return t?{x:i.x-t.x,y:i.y-t.y}:{x:0,y:0}},getLogs:function(){return e},vector:function(){return function(e,t){var i=e[t],n=e[t-1]||i,a={x:i.x-n.x,y:i.y-n.y},s=i.time-n.time,r=a.x/s||0,c=a.y/s||0;return o({},a,{angle:Math.atan2(Math.abs(a.y),Math.abs(a.x))*M,velocityX:r,velocityY:c})}(e,e.length-1)},clear:function(){e=[]},push:function(t){e.push(o({time:Date.now()},t))}}}function $(){return performance?performance.now():Date.now()}function I(){var e,t,i,n,a=(i=requestAnimationFrame||webkitRequestAnimationFrame||setTimeout,n=cancelAnimationFrame||webkitCancelAnimationFrame||clearTimeout,{run:function(n){e=void 0===e?$():e,t=i((function(){var t=$(),i=t-e;e=t,n(i)}))},stop:function(){e=void 0,n(t)}});return{run:function e(t){a.run((function(i){e(t),t(i)}))},stop:function(){a.stop()}}}function L(e,t){var i=e.tracker,n=t.initStatus;i.clear(),n()}function R(e,t,i,n){var a=e.touchable,s=["INPUT","SELECT","OPTION","TEXTAREA","BUTTON","VIDEO"],r=function(e,t,i,n){var a=n.initLayout,s=n.initStatus,r=n.render,c=n.scrollPixel,o=n.slideTo,l=n.getOffsetSteps,d=I();return{preheat:function(e,t){var n=i.tracker;d.stop(),n.clear(),n.push(e),a(t),s(t),i.isStart=!0,r()},move:function(t){var n=i.tracker,a=e.touchRatio,s=e.touchAngle,o=e.isHorizontal;if(i.isStart&&!i.isScrolling){n.push(t);var l=n.vector(),d=n.getOffset();if(d.x||d.y)if(o&&l.anglee.longSwipesMs?o(a+g*(m>0?-1:1)):o(m>0?a-f:a+f),L(i,n)}}}}(i,e,t,n),c=r.preheat,o=r.move,l=r.stop;function d(e){var t=a?e.changedTouches[0]:e;return{x:t.pageX,y:t.pageY}}function p(t){for(var n=0;n0||navigator.msMaxTouchPoints>0||window.DocumentTouch&&document instanceof DocumentTouch);Object.assign(i,{touchable:s,element:e,measure:n,limitation:a})}return i.update=n,n(e),i}var F="data-shallow-slider",V="data-slider";function X(e,t){function i(){e.element.$wrapper.querySelectorAll("["+F+"]").forEach((function(t){return e.element.$wrapper.removeChild(t)}))}function n(){e.element.$list.forEach((function(e,t){return p(e,V,t)})),i(),function(){if(t.loop){var i=e.element,n=e.limitation,a=i.$list,s=i.$wrapper,r=n.expand,c=a.slice(-r).map((function(e){return e.cloneNode(!0)})),o=a.slice(0,r).map((function(e){return e.cloneNode(!0)}));c.forEach((function(e,t){s.appendChild(p(o[t],F)),s.insertBefore(p(c[t],F),a[0])}))}}()}function a(){var i,n=e.element,a=e.measure,s=n.$wrapper,r={display:"flex",willChange:"transform",flexDirection:t.isHorizontal?"row":"column"},c=((i={})[t.isHorizontal?"width":"height"]=a.slideSize+"px",i[t.isHorizontal?"margin-right":"margin-bottom"]=t.spaceBetween+"px",i);m(s,r),s.querySelectorAll("[data-slider]").forEach((function(e){return m(e,c)}))}return{init:function(){n(),a()},render:function(i,n,a,s){var r=e.element.$wrapper,c=void 0===n?t.speed:n;t.injections.translate(i,e,t,c),i.isStart||function(i){var n=e.element.$wrapper,a=i.index;n.querySelectorAll("[data-slider]").forEach((function(e){var i=~~e.getAttribute(V);d(e,[t.slidePrevClass,t.slideNextClass,t.slideActiveClass]),i===a&&l(e,t.slideActiveClass),i===a-1&&l(e,t.slidePrevClass),i===a+1&&l(e,t.slideNextClass)}))}(i),s&&getComputedStyle(r).transform,a&&setTimeout(a,c)},destroy:function(){var n=e.element,a=n.$list,s=n.$wrapper,r=t.isHorizontal?"margin-right":"margin-bottom";["display","will-change","flex-direction"].forEach((function(e){s.style.removeProperty(e)})),a.forEach((function(e){return e.style.removeProperty(r)})),i()},updateSize:a}}function q(e,t){var i=e-t.max,n=e-t.min;return i>0?i:n<0?n:0}function Y(e,t,i,n,a){function s(t){var n=e.measure;return Math.ceil(Math.abs(t)/n.boxSize-i.longSwipesRatio)}function r(e,i,a){n.render(t,e,i,a)}function c(n){var s,r=e.limitation,c=r.min,l=r.max,d=l-c+(i.loop?e.measure.boxSize:0),b=d+1;t.transforms=n,i.loop?(s=(l-n)%b/d,t.progress=s<0?1+s:s>1?s-1:s):(s=(l-n)/d,t.progress=s<0?0:s>1?1:s),a.emit(D,o({},t))}function l(n,o){var l=e.measure,d=e.limitation,b=d.maxIndex-d.minIndex+1,u=i.loop?(n%b+b)%b:n>d.maxIndex?d.maxIndex:n0?1:-1)*(i.minIndex-a-1)+t-e;return Math.abs(n)>Math.abs(s)?s:n}(t.index,u,d,f);g===f||m?t.index===u&&c(m>0?d.min-l.boxSize+m:d.max+l.boxSize+m):c(g<0?d.min-l.boxSize:d.max+l.boxSize),r(0,void 0,!0)}a.emit(T,t.index,t,u),t.index=u,c(p),r(o,(function(){a.emit(E,u,t)}))}return{update:function(){l(t.index,0),n.updateSize()},render:r,transform:c,slideTo:l,scrollPixel:function(n){var a=t.transforms,s=e.measure,r=e.limitation,o=Number(n.toExponential().split("e")[1]),l=o<=0?Math.pow(10,-(o-1)):1,d=a;if(i.resistance&&!i.loop&&(n>0&&a>=r.max?n-=Math.pow(n*l,i.resistanceRatio)/l:n<0&&a<=r.min&&(n+=Math.pow(-n*l,i.resistanceRatio)/l)),d+=n,i.loop){var b=t.tracker.vector(),u=i.isHorizontal?b.velocityX:b.velocityY,p=q(a,r);p&&function(e,t,i){return e>0&&t>i.max||e<0&&t0?r.min-s.boxSize+p:r.max+s.boxSize+p)}c(d)},initStatus:function(e){void 0===e&&(e=0),t.startTransform=e,t.isStart=!1,t.isScrolling=!1,t.isTouching=!1},initLayout:function(e){c(e)},getOffsetSteps:s}}function K(e,t){var i="string"==typeof e?document.body.querySelector(e):e,n=i.querySelector("."+t.wrapperClass),a=[].slice.call(i.getElementsByClassName(t.slideClass));return{$el:i,$wrapper:n,$list:a}}var _=function e(t,i){var n,a=function(e){var t=o({},S,e);return o({},t,{isHorizontal:"horizontal"===t.direction})}(i),s=(n={},{on:function(e,t){n[e]?n[e].push(t):n[e]=[t]},off:function(e,t){if(n[e]){var i=n[e].indexOf(t);i>-1&&n[e].splice(i,1)}},emit:function(e){for(var t=arguments.length,i=new Array(t>1?t-1:0),a=1;a=0||(a[i]=e[i]);return a}(e,t);if(Object.getOwnPropertySymbols){var s=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,i)&&(a[i]=e[i])}return a}var G=s.createElement("g",null,s.createElement("path",{d:"M119.8.3L49 76.1h37l-21.3 53.4 70.8-75.8H98.3z",fill:"#ff0074"}));var Q=function(e){var t=e.title,i=e.titleId,n=J(e,["title","titleId"]);return s.createElement("svg",W({viewBox:"0 0 184.4 129.8","aria-labelledby":i},n),t?s.createElement("title",{id:i},t):null,G)};function Z(e){const t=()=>e.demoID?r.a.createElement("a",{className:"edit-link",href:`https://stackblitz.com/edit/${e.demoID}?file=index.html`,target:"_blank"},r.a.createElement(Q,{className:"edit-icon"}),"Edit in Stackblitz"):null,i=Object(s.createRef)();return Object(s.useEffect)((()=>{const t=U(i.current.children[0],{...e.option});return()=>t.destroy()})),r.a.createElement("div",{className:"demo-container"},r.a.createElement(t,null),r.a.createElement("div",{ref:i,className:"demo-block"},e.children))}var ee={id:"demo",title:"Demos"},te={unversionedId:"demo",id:"version-2.0.0-alpha/demo",isDocsHomePage:!1,title:"Demos",description:"import {",source:"@site/versioned_docs/version-2.0.0-alpha/demo.md",slug:"/demo",permalink:"/docs/demo",editUrl:"https://github.com/joe223/tiny-swiper/blob/dev_2.0/packages/website/docs/versioned_docs/version-2.0.0-alpha/demo.md",version:"2.0.0-alpha",sidebar:"version-2.0.0-alpha/someSidebar",previous:{title:"APIs",permalink:"/docs/api"},next:{title:"Changelog",permalink:"/docs/changelog"}},ie=[{value:"Basic",id:"basic",children:[{value:"Default Setup",id:"default-setup",children:[]},{value:"Loop mode",id:"loop-mode",children:[]},{value:"FreeMode",id:"freemode",children:[]},{value:"Vertical Slider",id:"vertical-slider",children:[]},{value:"Space Between Slides",id:"space-between-slides",children:[]},{value:"Speed Control",id:"speed-control",children:[]},{value:"Resistance Control",id:"resistance-control",children:[]}]},{value:"Plugins",id:"plugins",children:[{value:"Pagination",id:"pagination",children:[]},{value:"Lazyload",id:"lazyload",children:[]},{value:"Keyboard Control",id:"keyboard-control",children:[]},{value:"Mousewheel",id:"mousewheel",children:[]}]}],ne={rightToc:ie};function ae(e){var t=e.components,i=Object(a.a)(e,["components"]);return Object(c.b)("wrapper",Object(n.a)({},ne,i,{components:t,mdxType:"MDXLayout"}),Object(c.b)("h2",{id:"basic"},"Basic"),Object(c.b)("h3",{id:"default-setup"},"Default Setup"),Object(c.b)(Z,{option:{},demoID:"tiny-swiper2-basic-demo",mdxType:"Demo"},Object(c.b)("div",{className:"swiper-container"},Object(c.b)("div",{className:"swiper-wrapper"},Object(c.b)("div",{className:"swiper-slide"},Object(c.b)("img",{src:"https://user-images.githubusercontent.com/10026019/102327273-74284900-3fc0-11eb-913a-69661b73ab5d.png"})),Object(c.b)("div",{className:"swiper-slide"},Object(c.b)("img",{src:"https://user-images.githubusercontent.com/10026019/102327264-712d5880-3fc0-11eb-8f07-7d58264938c1.png"})),Object(c.b)("div",{className:"swiper-slide"},Object(c.b)("img",{src:"https://user-images.githubusercontent.com/10026019/102327267-72f71c00-3fc0-11eb-8550-8845f38935a4.png"})),Object(c.b)("div",{className:"swiper-slide"},Object(c.b)("img",{src:"https://user-images.githubusercontent.com/10026019/102327260-6f639500-3fc0-11eb-85fa-cfaa45ce054c.png"})),Object(c.b)("div",{className:"swiper-slide"},Object(c.b)("img",{src:"https://user-images.githubusercontent.com/10026019/102327267-72f71c00-3fc0-11eb-8550-8845f38935a4.png"}))))),Object(c.b)("h3",{id:"loop-mode"},"Loop mode"),Object(c.b)(Z,{option:{loop:!0},demoID:"tiny-swiper2-demo-loop-mode",mdxType:"Demo"},Object(c.b)("div",{className:"swiper-container"},Object(c.b)("div",{className:"swiper-wrapper"},Object(c.b)("div",{className:"swiper-slide"},Object(c.b)("img",{src:"https://user-images.githubusercontent.com/10026019/102327273-74284900-3fc0-11eb-913a-69661b73ab5d.png"})),Object(c.b)("div",{className:"swiper-slide"},Object(c.b)("img",{src:"https://user-images.githubusercontent.com/10026019/102327264-712d5880-3fc0-11eb-8f07-7d58264938c1.png"})),Object(c.b)("div",{className:"swiper-slide"},Object(c.b)("img",{src:"https://user-images.githubusercontent.com/10026019/102327267-72f71c00-3fc0-11eb-8550-8845f38935a4.png"})),Object(c.b)("div",{className:"swiper-slide"},Object(c.b)("img",{src:"https://user-images.githubusercontent.com/10026019/102327260-6f639500-3fc0-11eb-85fa-cfaa45ce054c.png"})),Object(c.b)("div",{className:"swiper-slide"},Object(c.b)("img",{src:"https://user-images.githubusercontent.com/10026019/102327267-72f71c00-3fc0-11eb-8550-8845f38935a4.png"}))))),Object(c.b)("h3",{id:"freemode"},"FreeMode"),Object(c.b)(Z,{option:{freeMode:!0,loop:!0},demoID:"tiny-swiper2-demo-freemode",mdxType:"Demo"},Object(c.b)("div",{className:"swiper-container"},Object(c.b)("div",{className:"swiper-wrapper"},Object(c.b)("div",{className:"swiper-slide"},Object(c.b)("img",{src:"https://user-images.githubusercontent.com/10026019/102327273-74284900-3fc0-11eb-913a-69661b73ab5d.png"})),Object(c.b)("div",{className:"swiper-slide"},Object(c.b)("img",{src:"https://user-images.githubusercontent.com/10026019/102327264-712d5880-3fc0-11eb-8f07-7d58264938c1.png"})),Object(c.b)("div",{className:"swiper-slide"},Object(c.b)("img",{src:"https://user-images.githubusercontent.com/10026019/102327267-72f71c00-3fc0-11eb-8550-8845f38935a4.png"})),Object(c.b)("div",{className:"swiper-slide"},Object(c.b)("img",{src:"https://user-images.githubusercontent.com/10026019/102327260-6f639500-3fc0-11eb-85fa-cfaa45ce054c.png"})),Object(c.b)("div",{className:"swiper-slide"},Object(c.b)("img",{src:"https://user-images.githubusercontent.com/10026019/102327267-72f71c00-3fc0-11eb-8550-8845f38935a4.png"}))))),Object(c.b)("h3",{id:"vertical-slider"},"Vertical Slider"),Object(c.b)(Z,{option:{direction:"vertical"},demoID:"tiny-swiper2-demo-vertical-slider",mdxType:"Demo"},Object(c.b)("div",{className:"swiper-container"},Object(c.b)("div",{className:"swiper-wrapper"},Object(c.b)("div",{className:"swiper-slide"},Object(c.b)("img",{src:"https://user-images.githubusercontent.com/10026019/102327273-74284900-3fc0-11eb-913a-69661b73ab5d.png"})),Object(c.b)("div",{className:"swiper-slide"},Object(c.b)("img",{src:"https://user-images.githubusercontent.com/10026019/102327264-712d5880-3fc0-11eb-8f07-7d58264938c1.png"})),Object(c.b)("div",{className:"swiper-slide"},Object(c.b)("img",{src:"https://user-images.githubusercontent.com/10026019/102327267-72f71c00-3fc0-11eb-8550-8845f38935a4.png"})),Object(c.b)("div",{className:"swiper-slide"},Object(c.b)("img",{src:"https://user-images.githubusercontent.com/10026019/102327260-6f639500-3fc0-11eb-85fa-cfaa45ce054c.png"})),Object(c.b)("div",{className:"swiper-slide"},Object(c.b)("img",{src:"https://user-images.githubusercontent.com/10026019/102327267-72f71c00-3fc0-11eb-8550-8845f38935a4.png"}))))),Object(c.b)("h3",{id:"space-between-slides"},"Space Between Slides"),Object(c.b)(Z,{option:{spaceBetween:100},demoID:"tiny-swiper2-demo-space-between-slides",mdxType:"Demo"},Object(c.b)("div",{className:"swiper-container"},Object(c.b)("div",{className:"swiper-wrapper"},Object(c.b)("div",{className:"swiper-slide"},Object(c.b)("img",{src:"https://user-images.githubusercontent.com/10026019/102327273-74284900-3fc0-11eb-913a-69661b73ab5d.png"})),Object(c.b)("div",{className:"swiper-slide"},Object(c.b)("img",{src:"https://user-images.githubusercontent.com/10026019/102327264-712d5880-3fc0-11eb-8f07-7d58264938c1.png"})),Object(c.b)("div",{className:"swiper-slide"},Object(c.b)("img",{src:"https://user-images.githubusercontent.com/10026019/102327267-72f71c00-3fc0-11eb-8550-8845f38935a4.png"})),Object(c.b)("div",{className:"swiper-slide"},Object(c.b)("img",{src:"https://user-images.githubusercontent.com/10026019/102327260-6f639500-3fc0-11eb-85fa-cfaa45ce054c.png"})),Object(c.b)("div",{className:"swiper-slide"},Object(c.b)("img",{src:"https://user-images.githubusercontent.com/10026019/102327267-72f71c00-3fc0-11eb-8550-8845f38935a4.png"}))))),Object(c.b)("h3",{id:"speed-control"},"Speed Control"),Object(c.b)(Z,{option:{speed:2e3},demoID:"tiny-swiper2-demo-speed-control",mdxType:"Demo"},Object(c.b)("div",{className:"swiper-container"},Object(c.b)("div",{className:"swiper-wrapper"},Object(c.b)("div",{className:"swiper-slide"},Object(c.b)("img",{src:"https://user-images.githubusercontent.com/10026019/102327273-74284900-3fc0-11eb-913a-69661b73ab5d.png"})),Object(c.b)("div",{className:"swiper-slide"},Object(c.b)("img",{src:"https://user-images.githubusercontent.com/10026019/102327264-712d5880-3fc0-11eb-8f07-7d58264938c1.png"})),Object(c.b)("div",{className:"swiper-slide"},Object(c.b)("img",{src:"https://user-images.githubusercontent.com/10026019/102327267-72f71c00-3fc0-11eb-8550-8845f38935a4.png"})),Object(c.b)("div",{className:"swiper-slide"},Object(c.b)("img",{src:"https://user-images.githubusercontent.com/10026019/102327260-6f639500-3fc0-11eb-85fa-cfaa45ce054c.png"})),Object(c.b)("div",{className:"swiper-slide"},Object(c.b)("img",{src:"https://user-images.githubusercontent.com/10026019/102327267-72f71c00-3fc0-11eb-8550-8845f38935a4.png"}))))),Object(c.b)("h3",{id:"resistance-control"},"Resistance Control"),Object(c.b)("p",null,"With less resistanceRatio comes bigger resistance."),Object(c.b)(Z,{option:{resistance:!1},demoID:"tiny-swiper2-demo-resistance-control",mdxType:"Demo"},Object(c.b)("div",{className:"swiper-container"},Object(c.b)("div",{className:"swiper-wrapper"},Object(c.b)("div",{className:"swiper-slide"},Object(c.b)("img",{src:"https://user-images.githubusercontent.com/10026019/102327273-74284900-3fc0-11eb-913a-69661b73ab5d.png"})),Object(c.b)("div",{className:"swiper-slide"},Object(c.b)("img",{src:"https://user-images.githubusercontent.com/10026019/102327264-712d5880-3fc0-11eb-8f07-7d58264938c1.png"})),Object(c.b)("div",{className:"swiper-slide"},Object(c.b)("img",{src:"https://user-images.githubusercontent.com/10026019/102327267-72f71c00-3fc0-11eb-8550-8845f38935a4.png"})),Object(c.b)("div",{className:"swiper-slide"},Object(c.b)("img",{src:"https://user-images.githubusercontent.com/10026019/102327260-6f639500-3fc0-11eb-85fa-cfaa45ce054c.png"})),Object(c.b)("div",{className:"swiper-slide"},Object(c.b)("img",{src:"https://user-images.githubusercontent.com/10026019/102327267-72f71c00-3fc0-11eb-8550-8845f38935a4.png"}))))),Object(c.b)("h2",{id:"plugins"},"Plugins"),Object(c.b)("h3",{id:"pagination"},"Pagination"),Object(c.b)("p",null,"You need to implement CSS code yourself."),Object(c.b)(Z,{option:{pagination:{el:".swiper-plugin-pagination",clickable:!0,bulletClass:"swiper-plugin-pagination__item",bulletActiveClass:"is-active"},plugins:[g]},demoID:"tiny-swiper2-demo-plugin-pagination",mdxType:"Demo"},Object(c.b)("div",{className:"swiper-container"},Object(c.b)("div",{className:"swiper-wrapper"},Object(c.b)("div",{className:"swiper-slide"},Object(c.b)("img",{src:"https://user-images.githubusercontent.com/10026019/102327273-74284900-3fc0-11eb-913a-69661b73ab5d.png"})),Object(c.b)("div",{className:"swiper-slide"},Object(c.b)("img",{src:"https://user-images.githubusercontent.com/10026019/102327264-712d5880-3fc0-11eb-8f07-7d58264938c1.png"})),Object(c.b)("div",{className:"swiper-slide"},Object(c.b)("img",{src:"https://user-images.githubusercontent.com/10026019/102327267-72f71c00-3fc0-11eb-8550-8845f38935a4.png"})),Object(c.b)("div",{className:"swiper-slide"},Object(c.b)("img",{src:"https://user-images.githubusercontent.com/10026019/102327260-6f639500-3fc0-11eb-85fa-cfaa45ce054c.png"})),Object(c.b)("div",{className:"swiper-slide"},Object(c.b)("img",{src:"https://user-images.githubusercontent.com/10026019/102327267-72f71c00-3fc0-11eb-8550-8845f38935a4.png"}))),Object(c.b)("div",{className:"swiper-plugin-pagination"}))),Object(c.b)("h3",{id:"lazyload"},"Lazyload"),Object(c.b)(Z,{option:{lazyload:{loadPrevNext:!1,loadPrevNextAmount:1,loadOnTransitionStart:!1,elementClass:"swiper-lazy",loadingClass:"swiper-lazy-loading",loadedClass:"swiper-lazy-loaded",preloaderClass:"swiper-lazy-preloader"},plugins:[f]},demoID:"tiny-swiper2-demo-plugin-plugin-lazyload",mdxType:"Demo"},Object(c.b)("div",{className:"swiper-container"},Object(c.b)("div",{className:"swiper-wrapper"},Object(c.b)("div",{className:"swiper-slide"},Object(c.b)("img",{className:"swiper-lazy","data-src":"https://user-images.githubusercontent.com/10026019/102327273-74284900-3fc0-11eb-913a-69661b73ab5d.png"}),Object(c.b)("div",{className:"swiper-lazy-preloader"})),Object(c.b)("div",{className:"swiper-slide"},Object(c.b)("img",{className:"swiper-lazy","data-src":"https://user-images.githubusercontent.com/10026019/102327264-712d5880-3fc0-11eb-8f07-7d58264938c1.png"}),Object(c.b)("div",{className:"swiper-lazy-preloader"})),Object(c.b)("div",{className:"swiper-slide"},Object(c.b)("img",{className:"swiper-lazy","data-src":"https://user-images.githubusercontent.com/10026019/102327267-72f71c00-3fc0-11eb-8550-8845f38935a4.png"}),Object(c.b)("div",{className:"swiper-lazy-preloader"})),Object(c.b)("div",{className:"swiper-slide"},Object(c.b)("img",{className:"swiper-lazy","data-src":"https://user-images.githubusercontent.com/10026019/102327260-6f639500-3fc0-11eb-85fa-cfaa45ce054c.png"}),Object(c.b)("div",{className:"swiper-lazy-preloader"})),Object(c.b)("div",{className:"swiper-slide"},Object(c.b)("img",{className:"swiper-lazy","data-src":"https://user-images.githubusercontent.com/10026019/102327267-72f71c00-3fc0-11eb-8550-8845f38935a4.png"}),Object(c.b)("div",{className:"swiper-lazy-preloader"}))))),Object(c.b)("h3",{id:"keyboard-control"},"Keyboard Control"),Object(c.b)("p",null,"Using ",Object(c.b)("inlineCode",{parentName:"p"},"up")," ",Object(c.b)("inlineCode",{parentName:"p"},"right")," ",Object(c.b)("inlineCode",{parentName:"p"},"down")," ",Object(c.b)("inlineCode",{parentName:"p"},"left")," keys to control swiper instance."),Object(c.b)("p",null,"Keys ",Object(c.b)("inlineCode",{parentName:"p"},"up")," and ",Object(c.b)("inlineCode",{parentName:"p"},"down")," work only when ",Object(c.b)("inlineCode",{parentName:"p"},"direction: vertical"),", so do ",Object(c.b)("inlineCode",{parentName:"p"},"right")," and ",Object(c.b)("inlineCode",{parentName:"p"},"left"),"."),Object(c.b)(Z,{option:{keyboard:{enabled:!0},plugins:[N]},demoID:"tiny-swiper2-demo-plugin-plugin-keyboardcontrol",mdxType:"Demo"},Object(c.b)("div",{className:"swiper-container"},Object(c.b)("div",{className:"swiper-wrapper"},Object(c.b)("div",{className:"swiper-slide"},Object(c.b)("img",{src:"https://user-images.githubusercontent.com/10026019/102327273-74284900-3fc0-11eb-913a-69661b73ab5d.png"})),Object(c.b)("div",{className:"swiper-slide"},Object(c.b)("img",{src:"https://user-images.githubusercontent.com/10026019/102327264-712d5880-3fc0-11eb-8f07-7d58264938c1.png"})),Object(c.b)("div",{className:"swiper-slide"},Object(c.b)("img",{src:"https://user-images.githubusercontent.com/10026019/102327267-72f71c00-3fc0-11eb-8550-8845f38935a4.png"})),Object(c.b)("div",{className:"swiper-slide"},Object(c.b)("img",{src:"https://user-images.githubusercontent.com/10026019/102327260-6f639500-3fc0-11eb-85fa-cfaa45ce054c.png"})),Object(c.b)("div",{className:"swiper-slide"},Object(c.b)("img",{src:"https://user-images.githubusercontent.com/10026019/102327267-72f71c00-3fc0-11eb-8550-8845f38935a4.png"}))),Object(c.b)("div",{className:"swiper-plugin-pagination"}))),Object(c.b)("h3",{id:"mousewheel"},"Mousewheel"),Object(c.b)(Z,{option:{mousewheel:{invert:!1,interval:400},plugins:[x]},demoID:"tiny-swiper2-demo-plugin-plugin-mousewheel",mdxType:"Demo"},Object(c.b)("div",{className:"swiper-container"},Object(c.b)("div",{className:"swiper-wrapper"},Object(c.b)("div",{className:"swiper-slide"},Object(c.b)("img",{src:"https://user-images.githubusercontent.com/10026019/102327273-74284900-3fc0-11eb-913a-69661b73ab5d.png"})),Object(c.b)("div",{className:"swiper-slide"},Object(c.b)("img",{src:"https://user-images.githubusercontent.com/10026019/102327264-712d5880-3fc0-11eb-8f07-7d58264938c1.png"})),Object(c.b)("div",{className:"swiper-slide"},Object(c.b)("img",{src:"https://user-images.githubusercontent.com/10026019/102327267-72f71c00-3fc0-11eb-8550-8845f38935a4.png"})),Object(c.b)("div",{className:"swiper-slide"},Object(c.b)("img",{src:"https://user-images.githubusercontent.com/10026019/102327260-6f639500-3fc0-11eb-85fa-cfaa45ce054c.png"})),Object(c.b)("div",{className:"swiper-slide"},Object(c.b)("img",{src:"https://user-images.githubusercontent.com/10026019/102327267-72f71c00-3fc0-11eb-8550-8845f38935a4.png"}))))))}ae.isMDXComponent=!0},83:function(e,t,i){"use strict";i.d(t,"a",(function(){return b})),i.d(t,"b",(function(){return m}));var n=i(0),a=i.n(n);function s(e,t,i){return t in e?Object.defineProperty(e,t,{value:i,enumerable:!0,configurable:!0,writable:!0}):e[t]=i,e}function r(e,t){var i=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),i.push.apply(i,n)}return i}function c(e){for(var t=1;t=0||(a[i]=e[i]);return a}(e,t);if(Object.getOwnPropertySymbols){var s=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,i)&&(a[i]=e[i])}return a}var l=a.a.createContext({}),d=function(e){var t=a.a.useContext(l),i=t;return e&&(i="function"==typeof e?e(t):c(c({},t),e)),i},b=function(e){var t=d(e.components);return a.a.createElement(l.Provider,{value:t},e.children)},u={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},p=a.a.forwardRef((function(e,t){var i=e.components,n=e.mdxType,s=e.originalType,r=e.parentName,l=o(e,["components","mdxType","originalType","parentName"]),b=d(i),p=n,m=b["".concat(r,".").concat(p)]||b[p]||u[p]||s;return i?a.a.createElement(m,c(c({ref:t},l),{},{components:i})):a.a.createElement(m,c({ref:t},l))}));function m(e,t){var i=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var s=i.length,r=new Array(s);r[0]=p;var c={};for(var o in t)hasOwnProperty.call(t,o)&&(c[o]=t[o]);c.originalType=e,c.mdxType="string"==typeof e?e:n,r[1]=c;for(var l=2;l=1)for(var a=1;a<=t;a++)n.load(e+a),n.load(e-a)}};e.on("before-init",(function(){t.lazyload=o({loadPrevNext:!1,loadPrevNextAmount:1,loadOnTransitionStart:!1,elementClass:"swiper-lazy",loadingClass:"swiper-lazy-loading",loadedClass:"swiper-lazy-loaded",preloaderClass:"swiper-lazy-preloader"},t.lazyload)})),i.loadOnTransitionStart?e.on("before-slide",(function(e,t,a){n.loadRange(a,i.loadPrevNextAmount)})):e.on("after-slide",(function(e){n.loadRange(e,i.loadPrevNextAmount)})),e.on("after-destroy",(function(){e.lazyload&&delete e.lazyload}))}}function g(e,t){var i={$pageList:[],$pagination:null};e.on("before-init",(function(){t.pagination&&(t.pagination=Object.assign({clickable:!1,bulletClass:"swiper-pagination-bullet",bulletActiveClass:"swiper-pagination-bullet-active"},t.pagination))})),e.on("after-init",(function(){if(t.pagination){var n=t.pagination,a=n.bulletClass,s=n.bulletActiveClass,r=e.env.element.$list,c="string"==typeof t.pagination.el?document.body.querySelector(t.pagination.el):t.pagination.el,o=[],d=document.createDocumentFragment(),b=r.length-Math.ceil(t.slidesPerView)+1;t.excludeElements.push(c),i.$pagination=c,i.$pageList=o;for(var u=0;u=0&&i.bottom<=window.innerHeight&&i.left>=0&&i.right<=window.innerWidth&&t}function N(e,t){if(t.keyboard){var i=t.keyboard,n={enable:function(){i.enabled=!0},disable:function(){i.enabled=!1},onKeyDown:function(n){var a=n.key;i.onlyInViewport&&!y(e.env.element.$el)||!i.enabled||(t.isHorizontal?a===O?e.slideTo(e.state.index-1):a===v&&e.slideTo(e.state.index+1):a===w?e.slideTo(e.state.index-1):a===h&&e.slideTo(e.state.index+1))}};e.on("before-init",(function(){t.keyboard=o({enabled:!0,onlyInViewport:!0},t.keyboard),e.keyboard=n,b(window,"keydown",n.onKeyDown)})),e.on("after-destroy",(function(){n&&(u(window,"keydown",n.onKeyDown),delete e.keyboard)}))}}function x(e,t){var i={$el:null},n={wheeling:!1,wheelDelta:0,wheelingTimer:0},a=function(i){var a=Math.abs(i.deltaX)>Math.abs(i.deltaY)?i.deltaX:i.deltaY,s=e.state.index;if(Math.abs(a)-Math.abs(n.wheelDelta)>0&&!n.wheeling&&Math.abs(a)>=t.mousewheel.sensitivity){var r=t.mousewheel.invert?-1:1;e.slideTo(a>0?s-r:s+r),n.wheeling=!0,n.wheelingTimer=setTimeout((function(){n.wheeling=!1}),t.mousewheel.interval)}n.wheelDelta=a,i.preventDefault(),i.stopPropagation()};e.on("before-init",(function(){t.mousewheel&&(t.mousewheel=Object.assign({invert:!1,sensitivity:1,interval:400},t.mousewheel))})),e.on("after-init",(function(){if(t.mousewheel){var n=e.env.element.$el;i.$el=n,b(n,"wheel",a)}})),e.on("after-destroy",(function(){t.mousewheel&&(u(i.$el,"wheel",a),delete i.$el)}))}var S={direction:"horizontal",touchRatio:1,touchAngle:45,longSwipesRatio:.5,initialSlide:0,loop:!1,freeMode:!1,mousewheel:!1,passiveListeners:!0,resistance:!0,resistanceRatio:.85,speed:300,longSwipesMs:300,spaceBetween:0,slidesPerView:1,centeredSlides:!1,slidePrevClass:"swiper-slide-prev",slideNextClass:"swiper-slide-next",slideActiveClass:"swiper-slide-active",slideClass:"swiper-slide",wrapperClass:"swiper-wrapper",touchStartPreventDefault:!0,touchStartForcePreventDefault:!1,touchMoveStopPropagation:!1,excludeElements:[],injections:{translate:function(e,t,i,n){m(t.element.$wrapper,{transition:e.isStart?"none":"transform ease "+n+"ms",transform:i.isHorizontal?"translate3d("+e.transforms+"px, 0, 0)":"translate3d(0, "+e.transforms+"px, 0)"})}}};var C="before-init",z="after-init",T="before-slide",D="scroll",E="after-slide",P="before-destroy",k="after-destroy";var M=180/Math.PI;function A(){var e=[];return{getDuration:function(){var t=e[0],i=e[e.length-1];return t?i.time-t.time:0},getOffset:function(){var t=e[0],i=e[e.length-1];return t?{x:i.x-t.x,y:i.y-t.y}:{x:0,y:0}},getLogs:function(){return e},vector:function(){return function(e,t){var i=e[t],n=e[t-1]||i,a={x:i.x-n.x,y:i.y-n.y},s=i.time-n.time,r=a.x/s||0,c=a.y/s||0;return o({},a,{angle:Math.atan2(Math.abs(a.y),Math.abs(a.x))*M,velocityX:r,velocityY:c})}(e,e.length-1)},clear:function(){e=[]},push:function(t){e.push(o({time:Date.now()},t))}}}function $(){return performance?performance.now():Date.now()}function I(){var e,t,i,n,a=(i=requestAnimationFrame||webkitRequestAnimationFrame||setTimeout,n=cancelAnimationFrame||webkitCancelAnimationFrame||clearTimeout,{run:function(n){e=void 0===e?$():e,t=i((function(){var t=$(),i=t-e;e=t,n(i)}))},stop:function(){e=void 0,n(t)}});return{run:function e(t){a.run((function(i){e(t),t(i)}))},stop:function(){a.stop()}}}function L(e,t){var i=e.tracker,n=t.initStatus;i.clear(),n()}function R(e,t,i,n){var a=e.touchable,s=["INPUT","SELECT","OPTION","TEXTAREA","BUTTON","VIDEO"],r=function(e,t,i,n){var a=n.initLayout,s=n.initStatus,r=n.render,c=n.scrollPixel,o=n.slideTo,l=n.getOffsetSteps,d=I();return{preheat:function(e,t){var n=i.tracker;d.stop(),n.clear(),n.push(e),a(t),s(t),i.isStart=!0,r()},move:function(t){var n=i.tracker,a=e.touchRatio,s=e.touchAngle,o=e.isHorizontal;if(i.isStart&&!i.isScrolling){n.push(t);var l=n.vector(),d=n.getOffset();if(d.x||d.y)if(o&&l.anglee.longSwipesMs?o(a+g*(m>0?-1:1)):o(m>0?a-f:a+f),L(i,n)}}}}(i,e,t,n),c=r.preheat,o=r.move,l=r.stop;function d(e){var t=a?e.changedTouches[0]:e;return{x:t.pageX,y:t.pageY}}function p(t){for(var n=0;n0||navigator.msMaxTouchPoints>0||window.DocumentTouch&&document instanceof DocumentTouch);Object.assign(i,{touchable:s,element:e,measure:n,limitation:a})}return i.update=n,n(e),i}var F="data-shallow-slider",V="data-slider";function X(e,t){function i(){e.element.$wrapper.querySelectorAll("["+F+"]").forEach((function(t){return e.element.$wrapper.removeChild(t)}))}function n(){e.element.$list.forEach((function(e,t){return p(e,V,t)})),i(),function(){if(t.loop){var i=e.element,n=e.limitation,a=i.$list,s=i.$wrapper,r=n.expand,c=a.slice(-r).map((function(e){return e.cloneNode(!0)})),o=a.slice(0,r).map((function(e){return e.cloneNode(!0)}));c.forEach((function(e,t){s.appendChild(p(o[t],F)),s.insertBefore(p(c[t],F),a[0])}))}}()}function a(){var i,n=e.element,a=e.measure,s=n.$wrapper,r={display:"flex",willChange:"transform",flexDirection:t.isHorizontal?"row":"column"},c=((i={})[t.isHorizontal?"width":"height"]=a.slideSize+"px",i[t.isHorizontal?"margin-right":"margin-bottom"]=t.spaceBetween+"px",i);m(s,r),s.querySelectorAll("[data-slider]").forEach((function(e){return m(e,c)}))}return{init:function(){n(),a()},render:function(i,n,a,s){var r=e.element.$wrapper,c=void 0===n?t.speed:n;t.injections.translate(i,e,t,c),i.isStart||function(i){var n=e.element.$wrapper,a=i.index;n.querySelectorAll("[data-slider]").forEach((function(e){var i=~~e.getAttribute(V);d(e,[t.slidePrevClass,t.slideNextClass,t.slideActiveClass]),i===a&&l(e,t.slideActiveClass),i===a-1&&l(e,t.slidePrevClass),i===a+1&&l(e,t.slideNextClass)}))}(i),s&&getComputedStyle(r).transform,a&&setTimeout(a,c)},destroy:function(){var n=e.element,a=n.$list,s=n.$wrapper,r=t.isHorizontal?"margin-right":"margin-bottom";["display","will-change","flex-direction"].forEach((function(e){s.style.removeProperty(e)})),a.forEach((function(e){return e.style.removeProperty(r)})),i()},updateSize:a}}function q(e,t,i){var n=e-i.max,a=e-i.min;return n>0?n:a<0?a:0}function Y(e,t,i,n,a){function s(t){var n=e.measure;return Math.ceil(Math.abs(t)/n.boxSize-i.longSwipesRatio)}function r(e,i,a){n.render(t,e,i,a)}function c(n){var s,r=e.limitation,c=r.min,l=r.max,d=l-c+(i.loop?e.measure.boxSize:0),b=d+1;t.transforms=n,i.loop?(s=(l-n)%b/d,t.progress=s<0?1+s:s>1?s-1:s):(s=(l-n)/d,t.progress=s<0?0:s>1?1:s),a.emit(D,o({},t))}function l(n,o){var l=e.measure,d=e.limitation,b=d.maxIndex-d.minIndex+1,u=i.loop?(n%b+b)%b:n>d.maxIndex?d.maxIndex:n0?s-e+(t-a)-1:a-e+(t-s)+1;return Math.abs(n)>Math.abs(r)?r:n}(t.index,u,d,f);g===f||m?t.index===u&&c(m>0?d.min-l.boxSize+m:d.max+l.boxSize+m):c(g<0?d.min-l.boxSize:d.max+l.boxSize),r(0,void 0,!0)}a.emit(T,t.index,t,u),t.index=u,c(p),r(o,(function(){a.emit(E,u,t)}))}return{update:function(){l(t.index,0),n.updateSize()},render:r,transform:c,slideTo:l,scrollPixel:function(n){var a=t.transforms,s=e.measure,r=e.limitation,o=Number(n.toExponential().split("e")[1]),l=o<=0?Math.pow(10,-(o-1)):1,d=a;if(i.resistance&&!i.loop&&(n>0&&a>=r.max?n-=Math.pow(n*l,i.resistanceRatio)/l:n<0&&a<=r.min&&(n+=Math.pow(-n*l,i.resistanceRatio)/l)),d+=n,i.loop){var b=t.tracker.vector(),u=i.isHorizontal?b.velocityX:b.velocityY,p=q(a,0,r);p&&function(e,t,i,n){return e>0&&t>n.max||e<0&&t0?r.min-s.boxSize+p:r.max+s.boxSize+p)}c(d)},initStatus:function(e){void 0===e&&(e=0),t.startTransform=e,t.isStart=!1,t.isScrolling=!1,t.isTouching=!1},initLayout:function(e){c(e)},getOffsetSteps:s}}function K(e,t){var i="string"==typeof e?document.body.querySelector(e):e,n=i.querySelector("."+t.wrapperClass),a=[].slice.call(i.getElementsByClassName(t.slideClass));return{$el:i,$wrapper:n,$list:a}}var _=function e(t,i){var n,a=function(e){var t=o({},S,e);return o({},t,{isHorizontal:"horizontal"===t.direction})}(i),s=(n={},{on:function(e,t){n[e]?n[e].push(t):n[e]=[t]},off:function(e,t){if(n[e]){var i=n[e].indexOf(t);i>-1&&n[e].splice(i,1)}},emit:function(e){for(var t=arguments.length,i=new Array(t>1?t-1:0),a=1;a=0||(a[i]=e[i]);return a}(e,t);if(Object.getOwnPropertySymbols){var s=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,i)&&(a[i]=e[i])}return a}var G=s.createElement("g",null,s.createElement("path",{d:"M119.8.3L49 76.1h37l-21.3 53.4 70.8-75.8H98.3z",fill:"#ff0074"}));var Q=function(e){var t=e.title,i=e.titleId,n=J(e,["title","titleId"]);return s.createElement("svg",W({viewBox:"0 0 184.4 129.8","aria-labelledby":i},n),t?s.createElement("title",{id:i},t):null,G)};function Z(e){const t=()=>e.demoID?r.a.createElement("a",{className:"edit-link",href:`https://stackblitz.com/edit/${e.demoID}?file=index.html`,target:"_blank"},r.a.createElement(Q,{className:"edit-icon"}),"Edit in Stackblitz"):null,i=Object(s.createRef)();return Object(s.useEffect)((()=>{const t=U(i.current.children[0],{...e.option});return()=>t.destroy()})),r.a.createElement("div",{className:"demo-container"},r.a.createElement(t,null),r.a.createElement("div",{ref:i,className:"demo-block"},e.children))}var ee={id:"demo",title:"Demos"},te={unversionedId:"demo",id:"version-2.0.0-alpha/demo",isDocsHomePage:!1,title:"Demos",description:"import {",source:"@site/versioned_docs/version-2.0.0-alpha/demo.md",slug:"/demo",permalink:"/docs/demo",editUrl:"https://github.com/joe223/tiny-swiper/blob/dev_2.0/packages/website/docs/versioned_docs/version-2.0.0-alpha/demo.md",version:"2.0.0-alpha",sidebar:"version-2.0.0-alpha/someSidebar",previous:{title:"APIs",permalink:"/docs/api"},next:{title:"Changelog",permalink:"/docs/changelog"}},ie=[{value:"Basic",id:"basic",children:[{value:"Default Setup",id:"default-setup",children:[]},{value:"Loop mode",id:"loop-mode",children:[]},{value:"FreeMode",id:"freemode",children:[]},{value:"Vertical Slider",id:"vertical-slider",children:[]},{value:"Space Between Slides",id:"space-between-slides",children:[]},{value:"Speed Control",id:"speed-control",children:[]},{value:"Resistance Control",id:"resistance-control",children:[]}]},{value:"Plugins",id:"plugins",children:[{value:"Pagination",id:"pagination",children:[]},{value:"Lazyload",id:"lazyload",children:[]},{value:"Keyboard Control",id:"keyboard-control",children:[]},{value:"Mousewheel",id:"mousewheel",children:[]}]}],ne={rightToc:ie};function ae(e){var t=e.components,i=Object(a.a)(e,["components"]);return Object(c.b)("wrapper",Object(n.a)({},ne,i,{components:t,mdxType:"MDXLayout"}),Object(c.b)("h2",{id:"basic"},"Basic"),Object(c.b)("h3",{id:"default-setup"},"Default Setup"),Object(c.b)(Z,{option:{},demoID:"tiny-swiper2-basic-demo",mdxType:"Demo"},Object(c.b)("div",{className:"swiper-container"},Object(c.b)("div",{className:"swiper-wrapper"},Object(c.b)("div",{className:"swiper-slide"},Object(c.b)("img",{src:"https://user-images.githubusercontent.com/10026019/102327273-74284900-3fc0-11eb-913a-69661b73ab5d.png"})),Object(c.b)("div",{className:"swiper-slide"},Object(c.b)("img",{src:"https://user-images.githubusercontent.com/10026019/102327264-712d5880-3fc0-11eb-8f07-7d58264938c1.png"})),Object(c.b)("div",{className:"swiper-slide"},Object(c.b)("img",{src:"https://user-images.githubusercontent.com/10026019/102327267-72f71c00-3fc0-11eb-8550-8845f38935a4.png"})),Object(c.b)("div",{className:"swiper-slide"},Object(c.b)("img",{src:"https://user-images.githubusercontent.com/10026019/102327260-6f639500-3fc0-11eb-85fa-cfaa45ce054c.png"})),Object(c.b)("div",{className:"swiper-slide"},Object(c.b)("img",{src:"https://user-images.githubusercontent.com/10026019/102327267-72f71c00-3fc0-11eb-8550-8845f38935a4.png"}))))),Object(c.b)("h3",{id:"loop-mode"},"Loop mode"),Object(c.b)(Z,{option:{loop:!0},demoID:"tiny-swiper2-demo-loop-mode",mdxType:"Demo"},Object(c.b)("div",{className:"swiper-container"},Object(c.b)("div",{className:"swiper-wrapper"},Object(c.b)("div",{className:"swiper-slide"},Object(c.b)("img",{src:"https://user-images.githubusercontent.com/10026019/102327273-74284900-3fc0-11eb-913a-69661b73ab5d.png"})),Object(c.b)("div",{className:"swiper-slide"},Object(c.b)("img",{src:"https://user-images.githubusercontent.com/10026019/102327264-712d5880-3fc0-11eb-8f07-7d58264938c1.png"})),Object(c.b)("div",{className:"swiper-slide"},Object(c.b)("img",{src:"https://user-images.githubusercontent.com/10026019/102327267-72f71c00-3fc0-11eb-8550-8845f38935a4.png"})),Object(c.b)("div",{className:"swiper-slide"},Object(c.b)("img",{src:"https://user-images.githubusercontent.com/10026019/102327260-6f639500-3fc0-11eb-85fa-cfaa45ce054c.png"})),Object(c.b)("div",{className:"swiper-slide"},Object(c.b)("img",{src:"https://user-images.githubusercontent.com/10026019/102327267-72f71c00-3fc0-11eb-8550-8845f38935a4.png"}))))),Object(c.b)("h3",{id:"freemode"},"FreeMode"),Object(c.b)(Z,{option:{freeMode:!0,loop:!0},demoID:"tiny-swiper2-demo-freemode",mdxType:"Demo"},Object(c.b)("div",{className:"swiper-container"},Object(c.b)("div",{className:"swiper-wrapper"},Object(c.b)("div",{className:"swiper-slide"},Object(c.b)("img",{src:"https://user-images.githubusercontent.com/10026019/102327273-74284900-3fc0-11eb-913a-69661b73ab5d.png"})),Object(c.b)("div",{className:"swiper-slide"},Object(c.b)("img",{src:"https://user-images.githubusercontent.com/10026019/102327264-712d5880-3fc0-11eb-8f07-7d58264938c1.png"})),Object(c.b)("div",{className:"swiper-slide"},Object(c.b)("img",{src:"https://user-images.githubusercontent.com/10026019/102327267-72f71c00-3fc0-11eb-8550-8845f38935a4.png"})),Object(c.b)("div",{className:"swiper-slide"},Object(c.b)("img",{src:"https://user-images.githubusercontent.com/10026019/102327260-6f639500-3fc0-11eb-85fa-cfaa45ce054c.png"})),Object(c.b)("div",{className:"swiper-slide"},Object(c.b)("img",{src:"https://user-images.githubusercontent.com/10026019/102327267-72f71c00-3fc0-11eb-8550-8845f38935a4.png"}))))),Object(c.b)("h3",{id:"vertical-slider"},"Vertical Slider"),Object(c.b)(Z,{option:{direction:"vertical"},demoID:"tiny-swiper2-demo-vertical-slider",mdxType:"Demo"},Object(c.b)("div",{className:"swiper-container"},Object(c.b)("div",{className:"swiper-wrapper"},Object(c.b)("div",{className:"swiper-slide"},Object(c.b)("img",{src:"https://user-images.githubusercontent.com/10026019/102327273-74284900-3fc0-11eb-913a-69661b73ab5d.png"})),Object(c.b)("div",{className:"swiper-slide"},Object(c.b)("img",{src:"https://user-images.githubusercontent.com/10026019/102327264-712d5880-3fc0-11eb-8f07-7d58264938c1.png"})),Object(c.b)("div",{className:"swiper-slide"},Object(c.b)("img",{src:"https://user-images.githubusercontent.com/10026019/102327267-72f71c00-3fc0-11eb-8550-8845f38935a4.png"})),Object(c.b)("div",{className:"swiper-slide"},Object(c.b)("img",{src:"https://user-images.githubusercontent.com/10026019/102327260-6f639500-3fc0-11eb-85fa-cfaa45ce054c.png"})),Object(c.b)("div",{className:"swiper-slide"},Object(c.b)("img",{src:"https://user-images.githubusercontent.com/10026019/102327267-72f71c00-3fc0-11eb-8550-8845f38935a4.png"}))))),Object(c.b)("h3",{id:"space-between-slides"},"Space Between Slides"),Object(c.b)(Z,{option:{spaceBetween:100},demoID:"tiny-swiper2-demo-space-between-slides",mdxType:"Demo"},Object(c.b)("div",{className:"swiper-container"},Object(c.b)("div",{className:"swiper-wrapper"},Object(c.b)("div",{className:"swiper-slide"},Object(c.b)("img",{src:"https://user-images.githubusercontent.com/10026019/102327273-74284900-3fc0-11eb-913a-69661b73ab5d.png"})),Object(c.b)("div",{className:"swiper-slide"},Object(c.b)("img",{src:"https://user-images.githubusercontent.com/10026019/102327264-712d5880-3fc0-11eb-8f07-7d58264938c1.png"})),Object(c.b)("div",{className:"swiper-slide"},Object(c.b)("img",{src:"https://user-images.githubusercontent.com/10026019/102327267-72f71c00-3fc0-11eb-8550-8845f38935a4.png"})),Object(c.b)("div",{className:"swiper-slide"},Object(c.b)("img",{src:"https://user-images.githubusercontent.com/10026019/102327260-6f639500-3fc0-11eb-85fa-cfaa45ce054c.png"})),Object(c.b)("div",{className:"swiper-slide"},Object(c.b)("img",{src:"https://user-images.githubusercontent.com/10026019/102327267-72f71c00-3fc0-11eb-8550-8845f38935a4.png"}))))),Object(c.b)("h3",{id:"speed-control"},"Speed Control"),Object(c.b)(Z,{option:{speed:2e3},demoID:"tiny-swiper2-demo-speed-control",mdxType:"Demo"},Object(c.b)("div",{className:"swiper-container"},Object(c.b)("div",{className:"swiper-wrapper"},Object(c.b)("div",{className:"swiper-slide"},Object(c.b)("img",{src:"https://user-images.githubusercontent.com/10026019/102327273-74284900-3fc0-11eb-913a-69661b73ab5d.png"})),Object(c.b)("div",{className:"swiper-slide"},Object(c.b)("img",{src:"https://user-images.githubusercontent.com/10026019/102327264-712d5880-3fc0-11eb-8f07-7d58264938c1.png"})),Object(c.b)("div",{className:"swiper-slide"},Object(c.b)("img",{src:"https://user-images.githubusercontent.com/10026019/102327267-72f71c00-3fc0-11eb-8550-8845f38935a4.png"})),Object(c.b)("div",{className:"swiper-slide"},Object(c.b)("img",{src:"https://user-images.githubusercontent.com/10026019/102327260-6f639500-3fc0-11eb-85fa-cfaa45ce054c.png"})),Object(c.b)("div",{className:"swiper-slide"},Object(c.b)("img",{src:"https://user-images.githubusercontent.com/10026019/102327267-72f71c00-3fc0-11eb-8550-8845f38935a4.png"}))))),Object(c.b)("h3",{id:"resistance-control"},"Resistance Control"),Object(c.b)("p",null,"With less resistanceRatio comes bigger resistance."),Object(c.b)(Z,{option:{resistance:!1},demoID:"tiny-swiper2-demo-resistance-control",mdxType:"Demo"},Object(c.b)("div",{className:"swiper-container"},Object(c.b)("div",{className:"swiper-wrapper"},Object(c.b)("div",{className:"swiper-slide"},Object(c.b)("img",{src:"https://user-images.githubusercontent.com/10026019/102327273-74284900-3fc0-11eb-913a-69661b73ab5d.png"})),Object(c.b)("div",{className:"swiper-slide"},Object(c.b)("img",{src:"https://user-images.githubusercontent.com/10026019/102327264-712d5880-3fc0-11eb-8f07-7d58264938c1.png"})),Object(c.b)("div",{className:"swiper-slide"},Object(c.b)("img",{src:"https://user-images.githubusercontent.com/10026019/102327267-72f71c00-3fc0-11eb-8550-8845f38935a4.png"})),Object(c.b)("div",{className:"swiper-slide"},Object(c.b)("img",{src:"https://user-images.githubusercontent.com/10026019/102327260-6f639500-3fc0-11eb-85fa-cfaa45ce054c.png"})),Object(c.b)("div",{className:"swiper-slide"},Object(c.b)("img",{src:"https://user-images.githubusercontent.com/10026019/102327267-72f71c00-3fc0-11eb-8550-8845f38935a4.png"}))))),Object(c.b)("h2",{id:"plugins"},"Plugins"),Object(c.b)("h3",{id:"pagination"},"Pagination"),Object(c.b)("p",null,"You need to implement CSS code yourself."),Object(c.b)(Z,{option:{pagination:{el:".swiper-plugin-pagination",clickable:!0,bulletClass:"swiper-plugin-pagination__item",bulletActiveClass:"is-active"},plugins:[g]},demoID:"tiny-swiper2-demo-plugin-pagination",mdxType:"Demo"},Object(c.b)("div",{className:"swiper-container"},Object(c.b)("div",{className:"swiper-wrapper"},Object(c.b)("div",{className:"swiper-slide"},Object(c.b)("img",{src:"https://user-images.githubusercontent.com/10026019/102327273-74284900-3fc0-11eb-913a-69661b73ab5d.png"})),Object(c.b)("div",{className:"swiper-slide"},Object(c.b)("img",{src:"https://user-images.githubusercontent.com/10026019/102327264-712d5880-3fc0-11eb-8f07-7d58264938c1.png"})),Object(c.b)("div",{className:"swiper-slide"},Object(c.b)("img",{src:"https://user-images.githubusercontent.com/10026019/102327267-72f71c00-3fc0-11eb-8550-8845f38935a4.png"})),Object(c.b)("div",{className:"swiper-slide"},Object(c.b)("img",{src:"https://user-images.githubusercontent.com/10026019/102327260-6f639500-3fc0-11eb-85fa-cfaa45ce054c.png"})),Object(c.b)("div",{className:"swiper-slide"},Object(c.b)("img",{src:"https://user-images.githubusercontent.com/10026019/102327267-72f71c00-3fc0-11eb-8550-8845f38935a4.png"}))),Object(c.b)("div",{className:"swiper-plugin-pagination"}))),Object(c.b)("h3",{id:"lazyload"},"Lazyload"),Object(c.b)(Z,{option:{lazyload:{loadPrevNext:!1,loadPrevNextAmount:1,loadOnTransitionStart:!1,elementClass:"swiper-lazy",loadingClass:"swiper-lazy-loading",loadedClass:"swiper-lazy-loaded",preloaderClass:"swiper-lazy-preloader"},plugins:[f]},demoID:"tiny-swiper2-demo-plugin-plugin-lazyload",mdxType:"Demo"},Object(c.b)("div",{className:"swiper-container"},Object(c.b)("div",{className:"swiper-wrapper"},Object(c.b)("div",{className:"swiper-slide"},Object(c.b)("img",{className:"swiper-lazy","data-src":"https://user-images.githubusercontent.com/10026019/102327273-74284900-3fc0-11eb-913a-69661b73ab5d.png"}),Object(c.b)("div",{className:"swiper-lazy-preloader"})),Object(c.b)("div",{className:"swiper-slide"},Object(c.b)("img",{className:"swiper-lazy","data-src":"https://user-images.githubusercontent.com/10026019/102327264-712d5880-3fc0-11eb-8f07-7d58264938c1.png"}),Object(c.b)("div",{className:"swiper-lazy-preloader"})),Object(c.b)("div",{className:"swiper-slide"},Object(c.b)("img",{className:"swiper-lazy","data-src":"https://user-images.githubusercontent.com/10026019/102327267-72f71c00-3fc0-11eb-8550-8845f38935a4.png"}),Object(c.b)("div",{className:"swiper-lazy-preloader"})),Object(c.b)("div",{className:"swiper-slide"},Object(c.b)("img",{className:"swiper-lazy","data-src":"https://user-images.githubusercontent.com/10026019/102327260-6f639500-3fc0-11eb-85fa-cfaa45ce054c.png"}),Object(c.b)("div",{className:"swiper-lazy-preloader"})),Object(c.b)("div",{className:"swiper-slide"},Object(c.b)("img",{className:"swiper-lazy","data-src":"https://user-images.githubusercontent.com/10026019/102327267-72f71c00-3fc0-11eb-8550-8845f38935a4.png"}),Object(c.b)("div",{className:"swiper-lazy-preloader"}))))),Object(c.b)("h3",{id:"keyboard-control"},"Keyboard Control"),Object(c.b)("p",null,"Using ",Object(c.b)("inlineCode",{parentName:"p"},"up")," ",Object(c.b)("inlineCode",{parentName:"p"},"right")," ",Object(c.b)("inlineCode",{parentName:"p"},"down")," ",Object(c.b)("inlineCode",{parentName:"p"},"left")," keys to control swiper instance."),Object(c.b)("p",null,"Keys ",Object(c.b)("inlineCode",{parentName:"p"},"up")," and ",Object(c.b)("inlineCode",{parentName:"p"},"down")," work only when ",Object(c.b)("inlineCode",{parentName:"p"},"direction: vertical"),", so do ",Object(c.b)("inlineCode",{parentName:"p"},"right")," and ",Object(c.b)("inlineCode",{parentName:"p"},"left"),"."),Object(c.b)(Z,{option:{keyboard:{enabled:!0},plugins:[N]},demoID:"tiny-swiper2-demo-plugin-plugin-keyboardcontrol",mdxType:"Demo"},Object(c.b)("div",{className:"swiper-container"},Object(c.b)("div",{className:"swiper-wrapper"},Object(c.b)("div",{className:"swiper-slide"},Object(c.b)("img",{src:"https://user-images.githubusercontent.com/10026019/102327273-74284900-3fc0-11eb-913a-69661b73ab5d.png"})),Object(c.b)("div",{className:"swiper-slide"},Object(c.b)("img",{src:"https://user-images.githubusercontent.com/10026019/102327264-712d5880-3fc0-11eb-8f07-7d58264938c1.png"})),Object(c.b)("div",{className:"swiper-slide"},Object(c.b)("img",{src:"https://user-images.githubusercontent.com/10026019/102327267-72f71c00-3fc0-11eb-8550-8845f38935a4.png"})),Object(c.b)("div",{className:"swiper-slide"},Object(c.b)("img",{src:"https://user-images.githubusercontent.com/10026019/102327260-6f639500-3fc0-11eb-85fa-cfaa45ce054c.png"})),Object(c.b)("div",{className:"swiper-slide"},Object(c.b)("img",{src:"https://user-images.githubusercontent.com/10026019/102327267-72f71c00-3fc0-11eb-8550-8845f38935a4.png"}))),Object(c.b)("div",{className:"swiper-plugin-pagination"}))),Object(c.b)("h3",{id:"mousewheel"},"Mousewheel"),Object(c.b)(Z,{option:{mousewheel:{invert:!1,interval:400},plugins:[x]},demoID:"tiny-swiper2-demo-plugin-plugin-mousewheel",mdxType:"Demo"},Object(c.b)("div",{className:"swiper-container"},Object(c.b)("div",{className:"swiper-wrapper"},Object(c.b)("div",{className:"swiper-slide"},Object(c.b)("img",{src:"https://user-images.githubusercontent.com/10026019/102327273-74284900-3fc0-11eb-913a-69661b73ab5d.png"})),Object(c.b)("div",{className:"swiper-slide"},Object(c.b)("img",{src:"https://user-images.githubusercontent.com/10026019/102327264-712d5880-3fc0-11eb-8f07-7d58264938c1.png"})),Object(c.b)("div",{className:"swiper-slide"},Object(c.b)("img",{src:"https://user-images.githubusercontent.com/10026019/102327267-72f71c00-3fc0-11eb-8550-8845f38935a4.png"})),Object(c.b)("div",{className:"swiper-slide"},Object(c.b)("img",{src:"https://user-images.githubusercontent.com/10026019/102327260-6f639500-3fc0-11eb-85fa-cfaa45ce054c.png"})),Object(c.b)("div",{className:"swiper-slide"},Object(c.b)("img",{src:"https://user-images.githubusercontent.com/10026019/102327267-72f71c00-3fc0-11eb-8550-8845f38935a4.png"}))))))}ae.isMDXComponent=!0},83:function(e,t,i){"use strict";i.d(t,"a",(function(){return b})),i.d(t,"b",(function(){return m}));var n=i(0),a=i.n(n);function s(e,t,i){return t in e?Object.defineProperty(e,t,{value:i,enumerable:!0,configurable:!0,writable:!0}):e[t]=i,e}function r(e,t){var i=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),i.push.apply(i,n)}return i}function c(e){for(var t=1;t=0||(a[i]=e[i]);return a}(e,t);if(Object.getOwnPropertySymbols){var s=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,i)&&(a[i]=e[i])}return a}var l=a.a.createContext({}),d=function(e){var t=a.a.useContext(l),i=t;return e&&(i="function"==typeof e?e(t):c(c({},t),e)),i},b=function(e){var t=d(e.components);return a.a.createElement(l.Provider,{value:t},e.children)},u={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},p=a.a.forwardRef((function(e,t){var i=e.components,n=e.mdxType,s=e.originalType,r=e.parentName,l=o(e,["components","mdxType","originalType","parentName"]),b=d(i),p=n,m=b["".concat(r,".").concat(p)]||b[p]||u[p]||s;return i?a.a.createElement(m,c(c({ref:t},l),{},{components:i})):a.a.createElement(m,c({ref:t},l))}));function m(e,t){var i=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var s=i.length,r=new Array(s);r[0]=p;var c={};for(var o in t)hasOwnProperty.call(t,o)&&(c[o]=t[o]);c.originalType=e,c.mdxType="string"==typeof e?e:n,r[1]=c;for(var l=2;lAPIs | Tiny-Swiper | Ingenious JavaScript Carousel powered by wonderful plugins - + @@ -25,7 +25,7 @@
Version: 0.1.x

APIs

Swiper parameters

ParameterTypedefaultDescription
directionstring'horizontal'Could be 'horizontal' or 'vertical' (for vertical slider).
speednumber300Duration of transition between slides (in ms)
intermittentnumber0Time to suspend between two swip actions. Only for mousewheel mode.
initialSlidenumber0Index number of initial slide.
spaceBetweennumber0Distance between slides in px.
longSwipesMsnumber300Minimal duration (in ms) to trigger swipe to next/previous slide during long swipes
longSwipesRationumber0.5Ratio to trigger swipe to next/previous slide during long swipes.
slidePrevClassstring'swiper-slide-prev'CSS class name of slide which is right before currently active slide
slideNextClassstring'swiper-slide-next'CSS class name of slide which is right after currently active slide
slideActiveClassstring'swiper-slide-active'CSS class name of currently active slide
slideClassstring'swiper-slide'CSS class name of slide
wrapperClassstring'swiper-wrapper'CSS class name of slides' wrapper
touchRationumber1Touch ratio
touchAnglenumber45Allowable angle (in degrees) to trigger touch move. Range of values: [0, 90].
touchStartPreventDefaultbooleantrueIf disabled, touchstart (mousedown) event won't be prevented
touchStartForcePreventDefaultbooleanfalseForce to always prevent default for touchstart (mousedown) event
touchMoveStopPropagationbooleanfalseIf enabled, then propagation of "touchmove" will be stopped
mousewheelobject/booleanfalseEnables navigation through slides using mouse wheel. Object with mousewheel parameters or boolean true to enable with default settings.
paginationobject/booleanfalseObject with navigation parameters.
passiveListenersbooleantruePassive event listeners will be used by default where possible to improve scrolling performance on mobile devices. But if you need to use e.preventDefault and you have conflict with it, then you should disable this parameter
resistancebooleantrueSet to false if you want to disable resistant bounds
resistanceRationumber0.85This option allows you to control resistance ratio

Mousewheel Control Parameters

ParameterTypedefaultDescription
sensitivitynumber1Multiplier of mousewheel data, allows to tweak mouse wheel sensitivity
invertbooleanfalseSet to true to invert sliding direction

Pagination Parameters

ParameterTypedefaultDescription
clickablebooleanfalseIf true then clicking on pagination button will cause transition to appropriate slide
bulletClassstring'swiper-pagination-bullet'CSS class name of single pagination bullet
bulletActiveClassstring'swiper-pagination-bullet-active'CSS class name of currently active pagination bullet
Edit this page
- + diff --git a/docs/docs/0.1.x/changelog/index.html b/docs/docs/0.1.x/changelog/index.html index 0709fd1..b618556 100644 --- a/docs/docs/0.1.x/changelog/index.html +++ b/docs/docs/0.1.x/changelog/index.html @@ -9,7 +9,7 @@ Changelog | Tiny-Swiper | Ingenious JavaScript Carousel powered by wonderful plugins - + @@ -25,7 +25,7 @@
Version: 0.1.x

Changelog

v0.1.0 - Released on 2019/10/28

  • Changes: pause scrolling on touch
  • Fix: click action stop scrolling while Swiper is scrolling

v0.0.6 - Released on 2019/10/17

  • Fix: removeClassName and addClassName

v0.0.5 - Released on 2019/10/17

  • Add Swiper parameter touchAngle
  • Add Swiper parameter touchMoveStopPropagation

v0.0.4 - Released on 2019/10/16

  • Add: simulate touch on desktop device

v0.0.3 - Released on 2019/10/16

v0.0.2 - Released on 2019/10/15

  • Add Swiper parameters longSwipesMs
  • Add Swiper parameters touchRatio
  • Add Swiper parameters passiveListeners
  • Add Swiper parameters resistance
  • Add Swiper parameters resistanceRatio
Edit this page
- + diff --git a/docs/docs/0.1.x/demo/index.html b/docs/docs/0.1.x/demo/index.html index 62a4d09..788490c 100644 --- a/docs/docs/0.1.x/demo/index.html +++ b/docs/docs/0.1.x/demo/index.html @@ -9,7 +9,7 @@ Demo | Tiny-Swiper | Ingenious JavaScript Carousel powered by wonderful plugins - + @@ -25,7 +25,7 @@
Version: 0.1.x

Demo

Default Setup

Pagination

You need to implement CSS code yourself.

Vertical Slider

Space Between Slides

Mousewheel Control

Speed Control

Intermittent Control

Only for mousewheel mode.

Resistance Control

With less resistanceRatio comes bigger resistance.

Edit this page
- + diff --git a/docs/docs/0.1.x/index.html b/docs/docs/0.1.x/index.html index 1150b82..92381a3 100644 --- a/docs/docs/0.1.x/index.html +++ b/docs/docs/0.1.x/index.html @@ -9,7 +9,7 @@ Get Started | Tiny-Swiper | Ingenious JavaScript Carousel powered by wonderful plugins - + @@ -27,7 +27,7 @@
Swiper.use([ SwiperPluginLazyload, SwiperPluginPagination ])
const swiper = new Swiper(swiperContainer: HTMLElement | string, parameters?: TinySwiperParameters)
  • new Swiper() - initialize swiper with options.
  • Swiper.use() - Register plugin.
  • swiperContainer - HTMLElement or string (with CSS Selector) of swiper container HTML element. Required.
  • parameters - object with Swiper parameters. Optional.

You also can load full-featured Tiny-Swiper:

import Swiper from 'tiny-swiper/lib/index.full.js'
<script src="https://unpkg.com/tiny-swiper@latest/lib/index.full.js"></script>
Edit this page
- + diff --git a/docs/docs/1.x/api/index.html b/docs/docs/1.x/api/index.html index 10adadd..ba0a4ee 100644 --- a/docs/docs/1.x/api/index.html +++ b/docs/docs/1.x/api/index.html @@ -9,7 +9,7 @@ APIs | Tiny-Swiper | Ingenious JavaScript Carousel powered by wonderful plugins - + @@ -36,7 +36,7 @@
var mySwiper = new Swiper('#swiper', {
lazyload: {
loadPrevNext: false,
loadPrevNextAmount: 1,
loadOnTransitionStart: false,
elementClass: 'swiper-lazy',
loadingClass: 'swiper-lazy-loading',
loadedClass: 'swiper-lazy-loaded',
preloaderClass: 'swiper-lazy-preloader'
}
})
ParameterTypedefaultDescription
lazyloadobject/booleanundefinedObject with parameters.
ParameterTypedefaultDescription
loadPrevNextbooleanfalseSet to "true" to enable lazy loading for the closest slides images (for previous and next slide images)
loadPrevNextAmountnumber1Amount of next/prev slides to preload lazy images in. Can't be less than slidesPerView
loadOnTransitionStartbooleanfalseLoading image on before-slide event. loading on after-slide if set to false.
elementClassstring'swiper-lazy'CSS class name of lazy element
loadingClassstring'swiper-lazy-loading'CSS class name of lazy loading element
loadedClassstring'swiper-lazy-loaded'CSS class name of lazy loaded element
preloaderClassstring'swiper-lazy-preloader'CSS class name of lazy preloader

Keyboard Control

Control Tiny-Swiper with directional arrow keys on keyboard.

  • Global name on window: SwiperPluginKeyboardControl.
  • Configuration name: keyboard.
Usage
Swiper.use([ SwiperPluginKeyboardControl ])
var mySwiper = new Swiper('#swiper', {
keyboard: {
enabled: true,
onlyInViewport: true
}
})
ParameterTypedefaultDescription
keyboardobject/booleanundefinedObject with parameters.
ParameterTypedefaultDescription
enabledbooleantrueSet to "true" to enable keyboard control function.
onlyInViewportbooleantrueKeyboard control will be enabled only if container element is displayed in viewport integrally.
Edit this page
- + diff --git a/docs/docs/1.x/changelog/index.html b/docs/docs/1.x/changelog/index.html index a2017e3..96fc0c9 100644 --- a/docs/docs/1.x/changelog/index.html +++ b/docs/docs/1.x/changelog/index.html @@ -9,7 +9,7 @@ Changelog | Tiny-Swiper | Ingenious JavaScript Carousel powered by wonderful plugins - + @@ -25,7 +25,7 @@
Version: 1.x

Changelog

v1.3.3 - Released on 2020/12/9

  • Fix: #36 SwiperPluginKeyboardControl exported incorrectly

v1.3.2 - Released on 2020/12/1

  • Fix: #29 Invert mousewheel.

v1.3.1 - Released on 2020/10/30

  • Fix: #27 Calculating the total of pagination bullet with slidesPerView.

v1.3.0 - Released on 2019/12/30

  • Add: slidesPerView parameter
  • Add: centeredSlides parameter
  • Add: SwiperPluginKeyboardControl
  • Fix: Unexpected slide width (#14)
  • Fix: transform boundary

v1.2.0 - Released on 2019/12/16

  • Add: export ESM and full-featured file

v1.1.0 - Released on 2019/12/9

  • Add: SwiperPluginLazyload plugin
  • Add: use method

v1.0.2 - Released on 2019/11/18

  • Add: excludeElements configuration
  • Changes: update resistance calculate
  • Changes: optimize package size

v1.0.1 - Released on 2019/11/12

  • Fix: SwiperPluginPagination plugin name

v1.0.0 - Released on 2019/11/11

  • Breaking Change: extract pagination plugin
  • Add: destory method
  • Add: life hooks

v0.1.0 - Released on 2019/10/28

  • Changes: pause scrolling on touch
  • Fix: click action stop scrolling while Swiper is scrolling

v0.0.6 - Released on 2019/10/17

  • Fix: removeClassName and addClassName

v0.0.5 - Released on 2019/10/17

  • Add Swiper parameter touchAngle
  • Add Swiper parameter touchMoveStopPropagation

v0.0.4 - Released on 2019/10/16

  • Add: simulate touch on desktop device

v0.0.3 - Released on 2019/10/16

v0.0.2 - Released on 2019/10/15

  • Add Swiper parameters longSwipesMs
  • Add Swiper parameters touchRatio
  • Add Swiper parameters passiveListeners
  • Add Swiper parameters resistance
  • Add Swiper parameters resistanceRatio
Edit this page
- + diff --git a/docs/docs/1.x/demo/index.html b/docs/docs/1.x/demo/index.html index 9fce74d..53162c1 100644 --- a/docs/docs/1.x/demo/index.html +++ b/docs/docs/1.x/demo/index.html @@ -9,7 +9,7 @@ Demo | Tiny-Swiper | Ingenious JavaScript Carousel powered by wonderful plugins - + @@ -25,7 +25,7 @@
Version: 1.x

Demo

Config parameters

Default Setup

Vertical Slider

Space Between Slides

Mousewheel Control

Speed Control

Intermittent Control

Only for mousewheel mode.

Resistance Control

With less resistanceRatio comes bigger resistance.

Plugins

Pagination

You need to implement CSS code yourself.

Lazyload

You need to implement CSS code yourself.

Keyboard Control

Using uprightdownleft keys to control swiper instance.

Keys up and down work only when direction: vertical, so do rightleft.

Edit this page
- + diff --git a/docs/docs/1.x/index.html b/docs/docs/1.x/index.html index e7b33dd..9d5b7ce 100644 --- a/docs/docs/1.x/index.html +++ b/docs/docs/1.x/index.html @@ -9,7 +9,7 @@ Get Started | Tiny-Swiper | Ingenious JavaScript Carousel powered by wonderful plugins - + @@ -27,7 +27,7 @@
Swiper.use([ SwiperPluginLazyload, SwiperPluginPagination ])
const swiper = new Swiper(swiperContainer: HTMLElement | string, parameters?: TinySwiperParameters)
  • new Swiper() - initialize swiper with options.
  • Swiper.use() - Register plugin.
  • swiperContainer - HTMLElement or string (with CSS Selector) of swiper container HTML element. Required.
  • parameters - object with Swiper parameters. Optional.

You also can load full-featured Tiny-Swiper:

import Swiper from 'tiny-swiper/lib/index.full.js'
<script src="https://unpkg.com/tiny-swiper@latest/lib/index.full.js"></script>
Edit this page
- + diff --git a/docs/docs/api/index.html b/docs/docs/api/index.html index a3179dd..5385030 100644 --- a/docs/docs/api/index.html +++ b/docs/docs/api/index.html @@ -9,7 +9,7 @@ APIs | Tiny-Swiper | Ingenious JavaScript Carousel powered by wonderful plugins - + @@ -38,7 +38,7 @@
const swiper = new Swiper(
swiperContainerElement,
{
// SwiperPluginMousewheel configuration.
mousewheel: {
interval: 1000
},
// Add SwiperPluginMousewheel plugin.
plugins: [ SwiperPluginMousewheel ]
}
)

Notice: SwiperPluginMousewheel was completely stripped from core module since v2.x.

Mousewheel Parameters

ParameterTypedefaultDescription
mousewheelobject/booleanundefinedObject with mousewheel parameters.
ParameterTypedefaultDescription
invertbooleanfalseInvert the direction of scroll wheel on the mouse
sensitivitynumber1The threshold value of scroll distance
intervalnumber400Time to suspend slide between two swip actions
Edit this page
- + diff --git a/docs/docs/changelog/index.html b/docs/docs/changelog/index.html index 9f2c03e..94a0c8b 100644 --- a/docs/docs/changelog/index.html +++ b/docs/docs/changelog/index.html @@ -9,7 +9,7 @@ Changelog | Tiny-Swiper | Ingenious JavaScript Carousel powered by wonderful plugins - + @@ -25,7 +25,7 @@
Version: 2.0.0-alpha

Changelog

v2.0.0-alpha

  • Add: loop parameter
  • Add: freeMode parameter
  • Update: Remove Mousewheel from core module as an external plugin SwiperPluginMousewheel.
Edit this page
- + diff --git a/docs/docs/demo/index.html b/docs/docs/demo/index.html index 3464d7a..01e43e7 100644 --- a/docs/docs/demo/index.html +++ b/docs/docs/demo/index.html @@ -10,7 +10,7 @@ - + @@ -20,13 +20,13 @@ - +
Version: 2.0.0-alpha

Demos

Basic

Default Setup

Edit in Stackblitz

Loop mode

Edit in Stackblitz

FreeMode

Edit in Stackblitz

Vertical Slider

Edit in Stackblitz

Space Between Slides

Edit in Stackblitz

Speed Control

Edit in Stackblitz

Resistance Control

With less resistanceRatio comes bigger resistance.

Edit in Stackblitz

Plugins

Pagination

You need to implement CSS code yourself.

Edit in Stackblitz

Lazyload

Edit in Stackblitz

Keyboard Control

Using up right down left keys to control swiper instance.

Keys up and down work only when direction: vertical, so do right and left.

Edit in Stackblitz

Mousewheel

Edit in Stackblitz
Edit this page
- + @@ -36,6 +36,6 @@ - + \ No newline at end of file diff --git a/docs/docs/index.html b/docs/docs/index.html index 48ca62f..03ed689 100644 --- a/docs/docs/index.html +++ b/docs/docs/index.html @@ -9,7 +9,7 @@ Get Started | Tiny-Swiper | Ingenious JavaScript Carousel powered by wonderful plugins - + @@ -27,7 +27,7 @@
Swiper.use([ SwiperPluginLazyload, SwiperPluginPagination ])
const swiper = new Swiper(swiperContainer: HTMLElement | string, parameters?: TinySwiperParameters)
  • new Swiper() - initialize swiper with options.
  • Swiper.use() - Register plugin.
  • swiperContainer - HTMLElement or string (with CSS Selector) of swiper container HTML element. Required.
  • parameters - object with Swiper parameters. Optional.

You also can load full-featured Tiny-Swiper:

import Swiper from 'tiny-swiper/lib/index.full.js'
<script src="https://unpkg.com/tiny-swiper@latest/lib/index.full.js"></script>
Edit this page
- + diff --git a/docs/docs/next/api/index.html b/docs/docs/next/api/index.html index e59baec..66765f2 100644 --- a/docs/docs/next/api/index.html +++ b/docs/docs/next/api/index.html @@ -9,7 +9,7 @@ APIs | Tiny-Swiper | Ingenious JavaScript Carousel powered by wonderful plugins - + @@ -38,7 +38,7 @@
const swiper = new Swiper(
swiperContainerElement,
{
// SwiperPluginMousewheel configuration.
mousewheel: {
interval: 1000
},
// Add SwiperPluginMousewheel plugin.
plugins: [ SwiperPluginMousewheel ]
}
)

Notice: SwiperPluginMousewheel was completely stripped from core module since v2.x.

Mousewheel Parameters

ParameterTypedefaultDescription
mousewheelobject/booleanundefinedObject with mousewheel parameters.
ParameterTypedefaultDescription
invertbooleanfalseInvert the direction of scroll wheel on the mouse
sensitivitynumber1The threshold value of scroll distance
intervalnumber400Time to suspend slide between two swip actions
Edit this page
- + diff --git a/docs/docs/next/changelog/index.html b/docs/docs/next/changelog/index.html index 558b468..3e1ef8d 100644 --- a/docs/docs/next/changelog/index.html +++ b/docs/docs/next/changelog/index.html @@ -9,7 +9,7 @@ Changelog | Tiny-Swiper | Ingenious JavaScript Carousel powered by wonderful plugins - + @@ -25,7 +25,7 @@
Version: Next

Changelog

v2.0.0

  • Add: loop parameter
  • Add: freeMode parameter
Edit this page
- + diff --git a/docs/docs/next/index.html b/docs/docs/next/index.html index 1b99a62..9ca316e 100644 --- a/docs/docs/next/index.html +++ b/docs/docs/next/index.html @@ -9,7 +9,7 @@ Get Started | Tiny-Swiper | Ingenious JavaScript Carousel powered by wonderful plugins - + @@ -27,7 +27,7 @@
Swiper.use([ SwiperPluginLazyload, SwiperPluginPagination ])
const swiper = new Swiper(swiperContainer: HTMLElement | string, parameters?: TinySwiperParameters)
  • new Swiper() - initialize swiper with options.
  • Swiper.use() - Register plugin.
  • swiperContainer - HTMLElement or string (with CSS Selector) of swiper container HTML element. Required.
  • parameters - object with Swiper parameters. Optional.

You also can load full-featured Tiny-Swiper:

import Swiper from 'tiny-swiper/lib/index.full.js'
<script src="https://unpkg.com/tiny-swiper@latest/lib/index.full.js"></script>
Edit this page
- + diff --git a/docs/index.html b/docs/index.html index 599fef6..661242e 100644 --- a/docs/index.html +++ b/docs/index.html @@ -9,7 +9,7 @@ Tiny-Swiper | Ingenious JavaScript Carousel powered by wonderful plugins - + @@ -23,7 +23,7 @@
Swiper.use([ SwiperPluginLazyload, SwiperPluginPagination ])
const swiper = new Swiper(swiperContainer: HTMLElement | string, parameters?: TinySwiperParameters)

And the basic HTML code:

<!-- Slider main container -->
<div class="swiper-container">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
...
</div>
<!-- If we need pagination -->
<div class="swiper-pagination"></div>
</div>
- + diff --git a/docs/runtime~main.b4464eb1.js b/docs/runtime~main.58a53189.js similarity index 97% rename from docs/runtime~main.b4464eb1.js rename to docs/runtime~main.58a53189.js index f813fec..3eebc00 100644 --- a/docs/runtime~main.b4464eb1.js +++ b/docs/runtime~main.58a53189.js @@ -1 +1 @@ -!function(e){function t(t){for(var f,c,o=t[0],d=t[1],u=t[2],i=0,b=[];i -1 && hub[evtName].splice(index, 1); - } - } - - function emit(evtName) { - for (var _len = arguments.length, data = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) { - data[_key - 1] = arguments[_key]; - } - - if (hub[evtName]) { - hub[evtName].forEach(function (cb) { - return cb.apply(void 0, data); - }); - } - } - - function clear() { - hub = {}; - } - - return { - on: on, - off: off, - emit: emit, - clear: clear - }; - } - - var delta = 180 / Math.PI; - function Vector(logs, index) { - var trace = logs[index]; - var formerTrace = logs[index - 1] || trace; // In case click action, there will be only one log data - - var diff = { - x: trace.x - formerTrace.x, - y: trace.y - formerTrace.y - }; - var duration = trace.time - formerTrace.time; - var velocityX = diff.x / duration || 0; - var velocityY = diff.y / duration || 0; - var angle = Math.atan2(Math.abs(diff.y), Math.abs(diff.x)) * delta; - return _extends({}, diff, { - angle: angle, - velocityX: velocityX, - velocityY: velocityY - }); - } - function Tracker() { - var logs = []; - - function push(position) { - logs.push(_extends({ - time: Date.now() - }, position)); - } - - function vector() { - return Vector(logs, logs.length - 1); - } - - function clear() { - logs = []; - } - - function getLogs() { - return logs; - } - - function getDuration() { - var first = logs[0]; - var last = logs[logs.length - 1]; - return first ? last.time - first.time : 0; - } - - function getOffset() { - var first = logs[0]; - var last = logs[logs.length - 1]; - return first ? { - x: last.x - first.x, - y: last.y - first.y - } : { - x: 0, - y: 0 - }; - } - - return { - getDuration: getDuration, - getOffset: getOffset, - getLogs: getLogs, - vector: vector, - clear: clear, - push: push - }; - } - - function State() { - var state = { - tracker: Tracker(), - index: 0, - startTransform: 0, - isStart: false, - isScrolling: false, - isTouching: false, - transforms: 0, - progress: 0 - }; - return state; - } - - function now() { - return performance ? performance.now() : Date.now(); - } - - function Tick() { - var nextFrame = requestAnimationFrame || webkitRequestAnimationFrame || setTimeout; - var cancelNextFrame = cancelAnimationFrame || webkitCancelAnimationFrame || clearTimeout; - var startTime; - var id; - - function run(cb) { - // eslint-disable-next-line no-void - startTime = startTime === void 0 ? now() : startTime; // Why do not use callback argument: - // https://stackoverflow.com/questions/50895206/exact-time-of-display-requestanimationframe-usage-and-timeline - - id = nextFrame(function () { - var timeStamp = now(); - var interval = timeStamp - startTime; - startTime = timeStamp; - cb(interval); - }); - } - - function stop() { - startTime = undefined; - cancelNextFrame(id); - } - - return { - run: run, - stop: stop - }; - } - - function Animation() { - var tick = Tick(); - - function run(task) { - tick.run(function (interval) { - run(task); - task(interval); - }); - } - - function stop() { - tick.stop(); - } - - return { - run: run, - stop: stop - }; - } - - function resetState(state, operations) { - var tracker = state.tracker; - var initStatus = operations.initStatus; - tracker.clear(); - initStatus(); - } - - function Actions(options, env, state, operations) { - var initLayout = operations.initLayout, - initStatus = operations.initStatus, - render = operations.render, - scrollPixel = operations.scrollPixel, - slideTo = operations.slideTo, - getOffsetSteps = operations.getOffsetSteps; - var animation = Animation(); - - function preheat(originPosition, originTransform) { - var tracker = state.tracker; - animation.stop(); - tracker.clear(); - tracker.push(originPosition); - initLayout(originTransform); - initStatus(originTransform); - state.isStart = true; - render(); - } - - function move(position) { - var tracker = state.tracker; - var touchRatio = options.touchRatio, - touchAngle = options.touchAngle, - isHorizontal = options.isHorizontal; - if (!state.isStart || state.isScrolling) return; - tracker.push(position); - var vector = tracker.vector(); - var displacement = tracker.getOffset(); // Ignore this move action if there is no displacement of screen touch point. - // In case of minimal mouse move event. (Moving mouse extreme slowly will get the zero offset.) - - if (!displacement.x && !displacement.y) return; - - if (isHorizontal && vector.angle < touchAngle || !isHorizontal && 90 - vector.angle < touchAngle || state.isTouching) { - var offset = vector[isHorizontal ? 'x' : 'y'] * touchRatio; - state.isTouching = true; - scrollPixel(offset); - render(); - } else { - state.isScrolling = true; - tracker.clear(); - } - } - - function stop() { - var index = state.index, - tracker = state.tracker; - var measure = env.measure; - if (!state.isStart) return; - state.isStart = false; - - if (!options.freeMode) { - var duration = tracker.getDuration(); - var trans = tracker.getOffset()[options.isHorizontal ? 'x' : 'y']; - var jump = Math.ceil(Math.abs(trans) / measure.boxSize); - var longSwipeIndex = getOffsetSteps(trans); - - if (duration > options.longSwipesMs) { - // long swipe action - slideTo(index + longSwipeIndex * (trans > 0 ? -1 : 1)); - } else { - // short swipe action - slideTo(trans > 0 ? index - jump : index + jump); - } - - resetState(state, operations); - } else { - var vector = tracker.vector(); - var velocity = vector[options.isHorizontal ? 'velocityX' : 'velocityY']; - animation.run(function (duration) { - var offset = velocity * duration; - velocity *= 0.98; - - if (Math.abs(offset) < 0.01) { - animation.stop(); - resetState(state, operations); - } else { - scrollPixel(offset); - render(0); - } - }); - } - } - - return { - preheat: preheat, - move: move, - stop: stop - }; - } - - function Sensor(env, state, options, operations) { - var touchable = env.touchable; - var formEls = ['INPUT', 'SELECT', 'OPTION', 'TEXTAREA', 'BUTTON', 'VIDEO']; - var actions = Actions(options, env, state, operations); - var preheat = actions.preheat, - move = actions.move, - stop = actions.stop; - - function getPosition(e) { - var touch = touchable ? e.changedTouches[0] : e; - return { - x: touch.pageX, - y: touch.pageY - }; - } - - function onTouchStart(e) { - for (var i = 0; i < options.excludeElements.length; i++) { - if (options.excludeElements[i].contains(e.target)) return; - } - - var $wrapper = env.element.$wrapper; - var shouldPreventDefault = options.touchStartPreventDefault && formEls.indexOf(e.target.nodeName) === -1 || options.touchStartForcePreventDefault; - if (shouldPreventDefault && !options.passiveListeners) e.preventDefault(); - preheat(getPosition(e), getTranslate($wrapper, options.isHorizontal)); - } - - function onTouchMove(e) { - if (options.touchMoveStopPropagation) e.stopPropagation(); - move(getPosition(e)); - state.isTouching && e.preventDefault(); - } - - function onTouchEnd() { - stop(); - } - - function attach() { - var $el = env.element.$el; - - if (touchable) { - attachListener($el, 'touchstart', onTouchStart, { - passive: options.passiveListeners, - capture: false - }); - attachListener($el, 'touchmove', onTouchMove); - attachListener($el, 'touchend', onTouchEnd); - attachListener($el, 'touchcancel', onTouchEnd); - } else { - attachListener($el, 'mousedown', onTouchStart); - attachListener(document, 'mousemove', onTouchMove); - attachListener(document, 'mouseup', onTouchEnd); - } - } - - function detach() { - var $el = env.element.$el; - detachListener($el, 'touchstart', onTouchStart); - detachListener($el, 'touchmove', onTouchMove); - detachListener($el, 'touchend', onTouchEnd); - detachListener($el, 'touchcancel', onTouchEnd); - detachListener($el, 'mousedown', onTouchStart); - detachListener(document, 'mousemove', onTouchMove); - detachListener(document, 'mouseup', onTouchEnd); - } - - return { - attach: attach, - detach: detach - }; - } - - function Measure(options, element) { - var $el = element.$el; - var viewSize = options.isHorizontal ? $el.offsetWidth : $el.offsetHeight; - var slideSize = (viewSize - Math.ceil(options.slidesPerView - 1) * options.spaceBetween) / options.slidesPerView; - var boxSize = slideSize + options.spaceBetween; - return { - boxSize: boxSize, - viewSize: viewSize, - slideSize: slideSize - }; - } - - function getExpand(options) { - if (options.loop) { - // return options.slidesPerView >= element.$list.length - // ? options.slidesPerView - element.$list.length + 1 - // : 1 - return Math.ceil(options.slidesPerView); - } - - return 0; - } - function Limitation(element, measure, options) { - var $list = element.$list; - var viewSize = measure.viewSize, - slideSize = measure.slideSize, - boxSize = measure.boxSize; - var expand = getExpand(options); - var buffer = expand * boxSize; - var base = -buffer + (options.centeredSlides ? (viewSize - slideSize) / 2 : 0); // [min, max] usually equal to [-x, 0] - - var max = base; - var min = options.spaceBetween + (options.loop ? slideSize : viewSize) + base - boxSize * $list.length; - var minIndex = 0; - var maxIndex = $list.length - (options.centeredSlides || options.loop ? 1 : Math.ceil(options.slidesPerView)); - var limitation = { - max: max, - min: min, - base: base, - expand: expand, - buffer: buffer, - minIndex: minIndex, - maxIndex: maxIndex - }; - return limitation; - } - - function Env(elem, options) { - var env = {}; - - function update(element) { - var measure = Measure(options, element); - var limitation = Limitation(element, measure, options); - var touchable = Boolean('ontouchstart' in window || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0 || window.DocumentTouch && document instanceof DocumentTouch); - Object.assign(env, { - touchable: touchable, - element: element, - measure: measure, - limitation: limitation - }); - } - - env.update = update; - update(elem); - return env; - } - - var shallowTag = 'data-shallow-slider'; - var sliderTag = 'data-slider'; - function Renderer(env, options) { - function updateItem(state) { - var $wrapper = env.element.$wrapper; - var index = state.index; - $wrapper.querySelectorAll("[" + sliderTag + "]").forEach(function ($slide) { - // eslint-disable-next-line no-bitwise - var tagNumber = ~~$slide.getAttribute(sliderTag); - removeClass($slide, [options.slidePrevClass, options.slideNextClass, options.slideActiveClass]); - - if (tagNumber === index) { - addClass($slide, options.slideActiveClass); - } - - if (tagNumber === index - 1) { - addClass($slide, options.slidePrevClass); - } - - if (tagNumber === index + 1) { - addClass($slide, options.slideNextClass); - } - }); - } - - function render(state, duration, cb, force) { - var $wrapper = env.element.$wrapper; - var timing = duration === undefined ? options.speed : duration; - options.injections.translate(state, env, options, timing); // Update slide style only if scroll action is end. - - if (!state.isStart) updateItem(state); - force && getComputedStyle($wrapper).transform; - cb && setTimeout(cb, timing); - } - - function appendExpandList() { - if (!options.loop) return; - var element = env.element, - limitation = env.limitation; - var $list = element.$list, - $wrapper = element.$wrapper; - var expand = limitation.expand; - var $leftExpandList = $list.slice(-expand).map(function ($slide) { - return $slide.cloneNode(true); - }); - var $rightExpandList = $list.slice(0, expand).map(function ($slide) { - return $slide.cloneNode(true); - }); - $leftExpandList.forEach(function ($shadowSlide, index) { - $wrapper.appendChild(setAttr($rightExpandList[index], shallowTag)); - $wrapper.insertBefore(setAttr($leftExpandList[index], shallowTag), $list[0]); - }); - } - - function destroyExpandList() { - env.element.$wrapper.querySelectorAll("[" + shallowTag + "]").forEach(function (item) { - return env.element.$wrapper.removeChild(item); - }); - } - - function updateDom() { - env.element.$list.forEach(function (el, index) { - return setAttr(el, sliderTag, index); - }); - destroyExpandList(); - appendExpandList(); - } - - function updateSize() { - var _itemStyle; - - var element = env.element, - measure = env.measure; - var $wrapper = element.$wrapper; - var wrapperStyle = { - display: 'flex', - willChange: 'transform', - flexDirection: options.isHorizontal ? 'row' : 'column' - }; - var itemStyle = (_itemStyle = {}, _itemStyle[options.isHorizontal ? 'width' : 'height'] = measure.slideSize + "px", _itemStyle[options.isHorizontal ? 'margin-right' : 'margin-bottom'] = options.spaceBetween + "px", _itemStyle); - setStyle($wrapper, wrapperStyle); - $wrapper.querySelectorAll("[" + sliderTag + "]").forEach(function ($slide) { - return setStyle($slide, itemStyle); - }); - } - - function init() { - updateDom(); - updateSize(); - } - - function destroy() { - var _env$element = env.element, - $list = _env$element.$list, - $wrapper = _env$element.$wrapper; - var arr = ['display', 'will-change', 'flex-direction']; - var itemProp = options.isHorizontal ? 'margin-right' : 'margin-bottom'; - arr.forEach(function (propertyName) { - $wrapper.style.removeProperty(propertyName); - }); - $list.forEach(function ($slide) { - return $slide.style.removeProperty(itemProp); - }); - destroyExpandList(); - } - - return { - init: init, - render: render, - destroy: destroy, - updateSize: updateSize - }; - } - - /** - * Detect whether slides is rush out boundary. - * @param velocity - Velocity larger than zero means that slides move to the right direction - * @param transform - * @param limitation - */ - - function isExceedingLimits(velocity, transform, limitation) { - return velocity > 0 && transform > limitation.max || velocity < 0 && transform < limitation.min; - } - /** - * Return the shortest way to target Index. - * Negative number indicate the left direction, Index's value is decreasing. - * Positive number means index should increase. - * @param currentIndex - * @param targetIndex - * @param limitation - * @param defaultWay - */ - - function getShortestWay(currentIndex, targetIndex, limitation, defaultWay) { - var maxIndex = limitation.maxIndex, - minIndex = limitation.minIndex; // Source expression show below: - // const shortcut = defaultWay > 0 - // ? minIndex - currentIndex + (targetIndex - maxIndex) - 1 - // : maxIndex - currentIndex + (targetIndex - minIndex) + 1 - - var shortcut = (defaultWay > 0 ? 1 : -1) * (minIndex - maxIndex - 1) + targetIndex - currentIndex; - return Math.abs(defaultWay) > Math.abs(shortcut) ? shortcut : defaultWay; - } - /** - * Get transform exceed value - * Return zero if is not reached border. - * - * @param transform - * @param limitation - */ - - function getExcess(transform, limitation) { - var exceedLeft = transform - limitation.max; - var exceedRight = transform - limitation.min; - return exceedLeft > 0 ? exceedLeft : exceedRight < 0 ? exceedRight : 0; - } - /** - * The Set of state operations. - * Every external Render/Sensor/DomHandler are called by this Internal state machine. - * That gives us the possibility to run Tiny-Swiper in different platform. - * - * @param env - * @param state - * @param options - * @param renderer - * @param eventHub - * @constructor - */ - - function Operations(env, state, options, renderer, eventHub) { - /** - * Calculate the steps amount (boxSize) of offset. - * eg: offset = 100, boxSize: 50, steps may equal to 2. - * @param offset - */ - function getOffsetSteps(offset) { - var measure = env.measure; - return Math.ceil(Math.abs(offset) / measure.boxSize - options.longSwipesRatio); - } - /** - * Call renderer's render function with default params. - * @param duration - * @param cb - * @param force - */ - - - function render(duration, cb, force) { - renderer.render(state, duration, cb, force); - } - /** - * Update Swiper transform attr. - * @param trans - */ - - - function transform(trans) { - var _env$limitation = env.limitation, - min = _env$limitation.min, - max = _env$limitation.max; - var transRange = max - min + (options.loop ? env.measure.boxSize : 0); - var len = transRange + 1; - var progress; - state.transforms = trans; - - if (options.loop) { - progress = (max - trans) % len / transRange; - state.progress = progress < 0 ? 1 + progress : progress > 1 ? progress - 1 : progress; - } else { - progress = (max - trans) / transRange; - state.progress = progress < 0 ? 0 : progress > 1 ? 1 : progress; - } - - eventHub.emit(LIFE_CYCLES.SCROLL, _extends({}, state)); - } - /** - * Update Swiper transform state with certain Index. - * @param targetIndex - * @param duration - */ - - - function slideTo(targetIndex, duration) { - var measure = env.measure, - limitation = env.limitation; - var len = limitation.maxIndex - limitation.minIndex + 1; - var computedIndex = options.loop ? (targetIndex % len + len) % len : targetIndex > limitation.maxIndex ? limitation.maxIndex : targetIndex < limitation.minIndex ? limitation.minIndex : targetIndex; - var newTransform = -computedIndex * measure.boxSize + limitation.base; // Slide to wrapper's boundary while touch end. - // Math.abs(excess) ≥ 0 - // Old condition: state.index === computedIndex - - if (getOffsetSteps(newTransform - state.transforms) !== 0 && options.loop) { - var excess = getExcess(state.transforms, limitation); - var defaultWay = computedIndex - state.index; - var shortcut = getShortestWay(state.index, computedIndex, limitation, defaultWay); - - if (shortcut !== defaultWay && !excess) { - transform(shortcut < 0 ? limitation.min - measure.boxSize : limitation.max + measure.boxSize); - } else if (state.index === computedIndex) { - transform(excess > 0 ? limitation.min - measure.boxSize + excess : limitation.max + measure.boxSize + excess); - } // Set initial offset for rebounding animation. - - - render(0, undefined, true); - } - - eventHub.emit(LIFE_CYCLES.BEFORE_SLIDE, state.index, state, computedIndex); - state.index = computedIndex; - transform(newTransform); - render(duration, function () { - eventHub.emit(LIFE_CYCLES.AFTER_SLIDE, computedIndex, state); - }); - } - /** - * Scroll pixel by pixel while user dragging. - * @param px - */ - - - function scrollPixel(px) { - var transforms = state.transforms; - var measure = env.measure, - limitation = env.limitation; - var ratio = Number(px.toExponential().split('e')[1]); - var expand = ratio <= 0 ? Math.pow(10, -(ratio - 1)) : 1; - var newTransform = transforms; // For optimizing, do not calculate `px` if options.loop === true - - if (options.resistance && !options.loop) { - if (px > 0 && transforms >= limitation.max) { - px -= Math.pow(px * expand, options.resistanceRatio) / expand; - } else if (px < 0 && transforms <= limitation.min) { - px += Math.pow(-px * expand, options.resistanceRatio) / expand; - } - } - - newTransform += px; - - if (options.loop) { - var vector = state.tracker.vector(); - var velocity = options.isHorizontal ? vector.velocityX : vector.velocityY; - var excess = getExcess(transforms, limitation); - - if (excess && isExceedingLimits(velocity, transforms, limitation)) { - newTransform = excess > 0 ? limitation.min - measure.boxSize + excess : limitation.max + measure.boxSize + excess; - } - } - - transform(newTransform); - } - - function initStatus(startTransform) { - if (startTransform === void 0) { - startTransform = 0; - } - - state.startTransform = startTransform; - state.isStart = false; - state.isScrolling = false; - state.isTouching = false; - } - - function initLayout(originTransform) { - transform(originTransform); - } - - function update() { - slideTo(state.index, 0); - renderer.updateSize(); - } - - return { - update: update, - render: render, - transform: transform, - slideTo: slideTo, - scrollPixel: scrollPixel, - initStatus: initStatus, - initLayout: initLayout, - getOffsetSteps: getOffsetSteps - }; - } - - function Element(el, options) { - var $el = typeof el === 'string' ? document.body.querySelector(el) : el; - var $wrapper = $el.querySelector("." + options.wrapperClass); - var $list = [].slice.call($el.getElementsByClassName(options.slideClass)); - return { - $el: $el, - $wrapper: $wrapper, - $list: $list - }; - } - - var Swiper = function Swiper(el, userOptions) { - var options = optionFormatter(userOptions); - var eventHub = EventHub(); - var element = Element(el, options); - var env = Env(element, options); - var state = State(); - var on = eventHub.on, - off = eventHub.off, - emit = eventHub.emit; - var instance = { - on: on, - off: off, - env: env, - state: state, - options: options - }; - (options.plugins || Swiper.plugins || []).forEach(function (plugin) { - return plugin(instance, options); - }); - emit(LIFE_CYCLES.BEFORE_INIT, instance); // Initialize internal module - - var renderer = Renderer(env, options); - var operations = Operations(env, state, options, renderer, eventHub); - var sensor = Sensor(env, state, options, operations); - - function destroy() { - emit(LIFE_CYCLES.BEFORE_DESTROY, instance); - sensor.detach(); - renderer.destroy(); - emit(LIFE_CYCLES.AFTER_DESTROY, instance); - eventHub.clear(); - } - - function updateSize() { - env.update(Element(el, options)); - operations.update(); - } - - function update() { - renderer.destroy(); - env.update(Element(el, options)); - renderer.init(); - operations.update(); - } - - var slideTo = operations.slideTo; - Object.assign(instance, { - update: update, - destroy: destroy, - slideTo: slideTo, - updateSize: updateSize - }); - renderer.init(); - sensor.attach(); - slideTo(options.initialSlide, 0); - emit(LIFE_CYCLES.AFTER_INIT, instance); - return instance; - }; - - Swiper.use = function (plugins) { - Swiper.plugins = plugins; - }; - - /** - * TinySwiper plugin for image lazy loading. - * - * @param {SwiperInstance} instance - * @param {Options} - */ - - function SwiperPluginLazyload(instance, options) { - if (!options.lazyload) return; - var lazyloadOptions = options.lazyload; - var lazyload = { - load: function load(index) { - var $slide = instance.env.element.$list[index]; - if (!$slide) return; - var $imgs = [].slice.call($slide.getElementsByClassName(lazyloadOptions.elementClass)); - var $preloaders = [].slice.call($slide.getElementsByClassName(lazyloadOptions.preloaderClass)); - - function handleLoaded($img) { - $img.removeAttribute('data-src'); - addClass($img, [lazyloadOptions.loadedClass]); - removeClass($img, [lazyloadOptions.loadingClass]); - $img.onload = null; - $img.onerror = null; - $img.isLoaded = true; - - if ($imgs.every(function (item) { - return item.isLoaded; - })) { - $preloaders.forEach(function ($preloader) { - $preloader.parentElement.removeChild($preloader); - }); - } - } - - $imgs.forEach(function ($img) { - if (!$img.hasAttribute('data-src')) return; - var src = $img.getAttribute('data-src'); - addClass($img, [lazyloadOptions.loadingClass]); - removeClass($img, [lazyloadOptions.loadedClass]); - $img.src = src; - - $img.onload = function () { - return handleLoaded($img); - }; - - $img.onerror = function () { - return handleLoaded($img); - }; - }); - }, - loadRange: function loadRange(index, range) { - lazyload.load(index); - - if (lazyloadOptions.loadPrevNext && range >= 1) { - for (var i = 1; i <= range; i++) { - lazyload.load(index + i); - lazyload.load(index - i); - } - } - } - }; - instance.on('before-init', function () { - options.lazyload = _extends({ - loadPrevNext: false, - loadPrevNextAmount: 1, - loadOnTransitionStart: false, - elementClass: 'swiper-lazy', - loadingClass: 'swiper-lazy-loading', - loadedClass: 'swiper-lazy-loaded', - preloaderClass: 'swiper-lazy-preloader' - }, options.lazyload); - }); - - if (lazyloadOptions.loadOnTransitionStart) { - instance.on('before-slide', function (oldIndex, state, newIndex) { - lazyload.loadRange(newIndex, lazyloadOptions.loadPrevNextAmount); - }); - } else { - instance.on('after-slide', function (index) { - lazyload.loadRange(index, lazyloadOptions.loadPrevNextAmount); - }); - } - - instance.on('after-destroy', function () { - if (!instance.lazyload) return; - delete instance.lazyload; - }); - } - - function SwiperPluginPagination(instance, options) { - var pagination = { - $pageList: [], - $pagination: null - }; - instance.on('before-init', function () { - if (options.pagination) { - options.pagination = Object.assign({ - clickable: false, - bulletClass: 'swiper-pagination-bullet', - bulletActiveClass: 'swiper-pagination-bullet-active' - }, options.pagination); - } - }); - instance.on('after-init', function () { - if (!options.pagination) return; - var _options$pagination = options.pagination, - bulletClass = _options$pagination.bulletClass, - bulletActiveClass = _options$pagination.bulletActiveClass; - var element = instance.env.element; - var $list = element.$list; - var $pagination = typeof options.pagination.el === 'string' ? document.body.querySelector(options.pagination.el) : options.pagination.el; - var $pageList = []; - var $group = document.createDocumentFragment(); - var dotCount = $list.length - Math.ceil(options.slidesPerView) + 1; - options.excludeElements.push($pagination); - pagination.$pagination = $pagination; - pagination.$pageList = $pageList; - - for (var index = 0; index < dotCount; index++) { - var $page = document.createElement('div'); - addClass($page, index === instance.state.index ? [bulletClass, bulletActiveClass] : bulletClass); - $pageList.push($page); - $group.appendChild($page); - } - - $pagination.appendChild($group); - - if (options.pagination.clickable) { - $pagination.addEventListener('click', function (e) { - instance.slideTo($pageList.indexOf(e.target)); - e.stopPropagation(); - }); - } - }); - instance.on('after-destroy', function () { - if (!options.pagination) return; - pagination.$pagination.innerHTML = ''; - pagination.$pageList = []; - pagination.$pagination = null; - }); - instance.on('after-slide', function (currentIndex) { - var bulletActiveClass = options.pagination.bulletActiveClass; - pagination.$pageList && pagination.$pageList.forEach(function ($page, index) { - if (index === currentIndex) { - addClass($page, bulletActiveClass); - } else { - removeClass($page, bulletActiveClass); - } - }); - }); - } - - var DIRECTION = { - up: 'ArrowUp', - right: 'ArrowRight', - down: 'ArrowDown', - left: 'ArrowLeft' - }; - - function isVisible(el) { - if (!el) return false; - var style = getComputedStyle(el); - var visible = style.visibility !== 'hidden' && style.display !== 'none'; - if (!visible) return false; - return el.parentElement && el.parentElement.nodeType === 1 ? isVisible(el.parentElement) : true; - } - - function isElementInView(el) { - var visibility = isVisible(el); - var boundary = el.getBoundingClientRect(); - var isInView = boundary.top >= 0 && boundary.bottom <= window.innerHeight && boundary.left >= 0 && boundary.right <= window.innerWidth; - return isInView && visibility; - } - /** - * TinySwiper plugin for keyboard control. - * - * @param {SwiperInstance} instance - * @param {Options} - */ - - - function SwiperPluginKeyboardControl(instance, options) { - if (!options.keyboard) return; - var keyboardOptions = options.keyboard; - var keyboard = { - enable: function enable() { - keyboardOptions.enabled = true; - }, - disable: function disable() { - keyboardOptions.enabled = false; - }, - onKeyDown: function onKeyDown(e) { - var key = e.key; - if (keyboardOptions.onlyInViewport && !isElementInView(instance.env.element.$el) || !keyboardOptions.enabled) return; - - if (options.isHorizontal) { - if (key === DIRECTION.left) { - instance.slideTo(instance.state.index - 1); - } else if (key === DIRECTION.right) { - instance.slideTo(instance.state.index + 1); - } - } else { - if (key === DIRECTION.down) { - instance.slideTo(instance.state.index - 1); - } else if (key === DIRECTION.up) { - instance.slideTo(instance.state.index + 1); - } - } - } - }; - instance.on('before-init', function () { - options.keyboard = _extends({ - enabled: true, - onlyInViewport: true - }, options.keyboard); - instance.keyboard = keyboard; - attachListener(window, 'keydown', keyboard.onKeyDown); - }); - instance.on('after-destroy', function () { - if (!keyboard) return; - detachListener(window, 'keydown', keyboard.onKeyDown); - delete instance.keyboard; - }); - } - - function SwiperPluginMousewheel(instance, options) { - var mousewheel = { - $el: null - }; - var wheelStatus = { - wheeling: false, - wheelDelta: 0, - wheelingTimer: 0 - }; - - var handler = function handler(e) { - var delta = Math.abs(e.deltaX) > Math.abs(e.deltaY) ? e.deltaX : e.deltaY; - var index = instance.state.index; - - if (Math.abs(delta) - Math.abs(wheelStatus.wheelDelta) > 0 && !wheelStatus.wheeling && Math.abs(delta) >= options.mousewheel.sensitivity) { - var step = options.mousewheel.invert ? -1 : 1; - instance.slideTo(delta > 0 ? index - step : index + step); - wheelStatus.wheeling = true; - wheelStatus.wheelingTimer = setTimeout(function () { - wheelStatus.wheeling = false; - }, options.mousewheel.interval); - } - - wheelStatus.wheelDelta = delta; - e.preventDefault(); - e.stopPropagation(); - }; - - instance.on('before-init', function () { - if (options.mousewheel) { - options.mousewheel = Object.assign({ - invert: false, - sensitivity: 1, - interval: 400 - }, options.mousewheel); - } - }); - instance.on('after-init', function () { - if (!options.mousewheel) return; - var element = instance.env.element; - var $el = element.$el; - mousewheel.$el = $el; - attachListener($el, 'wheel', handler); - }); - instance.on('after-destroy', function () { - if (!options.mousewheel) return; - detachListener(mousewheel.$el, 'wheel', handler); - delete mousewheel.$el; - }); - } - - // eslint-disable-next-line import/no-named-default - var plugins = [SwiperPluginLazyload, SwiperPluginPagination, SwiperPluginKeyboardControl, SwiperPluginMousewheel]; - Swiper.use(plugins); - - return Swiper; - -}))); -//# sourceMappingURL=index.full.js.map +!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e="undefined"!=typeof globalThis?globalThis:e||self).Swiper=t()}(this,function(){"use strict";function y(){return(y=Object.assign||function(e){for(var t=1;tr.longSwipesMs?f(i+a*(0l.maxIndex?l.maxIndex:eMath.abs(o)?o:r)===i||n?p.index===c&&w(0=o.max?e-=Math.pow(e*a,m.resistanceRatio)/a:e<0&&n<=o.min&&(e+=Math.pow(-e*a,m.resistanceRatio)/a)),r+=e,m.loop&&(t=p.tracker.vector(),a=m.isHorizontal?t.velocityX:t.velocityY,(e=D(n,o))&&(t=n,n=o,0<(a=a)&&t>n.max||a<0&&tMath.abs(e.deltaY)?e.deltaX:e.deltaY,i=o.state.index;0=a.mousewheel.sensitivity&&(t=a.mousewheel.invert?-1:1,o.slideTo(0a.longSwipesMs?d(i+r*(0c.maxIndex?c.maxIndex:eMath.abs(l)?l:a)===i||n?p.index===u&&g(0=o.max?e-=Math.pow(e*r,m.resistanceRatio)/r:e<0&&n<=o.min&&(e+=Math.pow(-e*r,m.resistanceRatio)/r)),a+=e,m.loop&&(t=p.tracker.vector(),r=m.isHorizontal?t.velocityX:t.velocityY,(e=O(n,0,o))&&(t=n,n=o,0<(r=r)&&t>n.max||r<0&&ta.longSwipesMs?d(i+r*(0c.maxIndex?c.maxIndex:eMath.abs(o)?o:a)===i||n?p.index===u&&g(0=o.max?e-=Math.pow(e*r,m.resistanceRatio)/r:e<0&&n<=o.min&&(e+=Math.pow(-e*r,m.resistanceRatio)/r)),a+=e,m.loop&&(t=p.tracker.vector(),r=m.isHorizontal?t.velocityX:t.velocityY,(e=O(n,o))&&(t=n,n=o,0<(r=r)&&t>n.max||r<0&&t