From 7b0086fbc4a94b1b00e101fb1ba74e65177ab38e Mon Sep 17 00:00:00 2001
From: Intizar Ahmad <intizarahmad@gmail.com>
Date: Mon, 29 Nov 2021 20:16:50 +0530
Subject: [PATCH 1/7] show previous and next slide partially

---
 build/swipe.min.js |   2 +-
 docs/index.html    |   5 +-
 docs/style.css     |   2 +-
 swipe.js           | 127 +++++++++++++++++++++++++++++++++++++--------
 4 files changed, 109 insertions(+), 27 deletions(-)

diff --git a/build/swipe.min.js b/build/swipe.min.js
index a51b134..c946556 100644
--- a/build/swipe.min.js
+++ b/build/swipe.min.js
@@ -1 +1 @@
-!function(t,e){t=t||{},"function"==typeof define&&define.amd?define([],function(){return t.Swipe=e(),t.Swipe}):"object"==typeof module&&module.exports?module.exports=e():t.Swipe=e()}(this,function(){var e,Q="object"==typeof self&&self.self===self&&self||"object"==typeof global&&global.global===global&&global||this,W=Q.document;function Swipe(r,a){"use strict";function e(){}function n(t){return!!t&&("boolean"!=typeof t.cancelable||t.cancelable)}var o,t,s={},u={},l=(a=a||{}).auto||0,i=!1,c=function(t){setTimeout(t||e,0)};Element.prototype.matches||(Element.prototype.matches=Element.prototype.matchesSelector||Element.prototype.mozMatchesSelector||Element.prototype.msMatchesSelector||Element.prototype.oMatchesSelector||Element.prototype.webkitMatchesSelector||function(t){for(var e=(this.document||this.ownerDocument).querySelectorAll(t),n=e.length;0<=--n&&e.item(n)!==this;);return-1<n});var d={addEventListener:!!Q.addEventListener,passiveEvents:function(){var e=!1;try{var t=Object.defineProperty({},"passive",{get:function(){e=!0}});Q.addEventListener("testEvent",null,t),Q.removeEventListener("testEvent",null,t)}catch(t){e=!1}return e}(),touch:"ontouchstart"in Q||Q.DocumentTouch&&W instanceof DocumentTouch,transitions:function(t){var e,n=["transitionProperty","WebkitTransition","MozTransition","OTransition","msTransition"];for(e in n)if(void 0!==t.style[n[e]])return!0;return!1}(W.createElement("swipe"))};if(r){var v,f,m,h,p=r.children[0],E=parseInt(a.startSlide,10)||0,y=a.speed||300;a.continuous=void 0===a.continuous||a.continuous;var g,b,T=(g="direction",r.currentStyle?b=r.currentStyle[g]:Q.getComputedStyle&&(b=Q.getComputedStyle(r,null).getPropertyValue(g)),"rtl"===b?"right":"left");a.autoRestart=void 0!==a.autoRestart&&a.autoRestart;var x=function(n,i){i=i||100;var o=null;function s(){o&&clearTimeout(o)}function t(){var t=this,e=arguments;s(),o=setTimeout(function(){o=null,n.apply(t,e)},i)}return t.cancel=s,t}(S),L={handleEvent:function(t){if(!i||"resize"===t.type){switch(t.type){case"mousedown":case"touchstart":this.start(t);break;case"mousemove":case"touchmove":this.move(t);break;case"mouseup":case"mouseleave":case"touchend":this.end(t);break;case"webkitTransitionEnd":case"msTransitionEnd":case"oTransitionEnd":case"otransitionend":case"transitionend":this.transitionEnd(t);break;case"resize":x()}a.stopPropagation&&t.stopPropagation()}},start:function(t){var e=X(t)?t:t.touches[0];a.ignore&&e.target.matches(a.ignore)||(X(t)&&t.preventDefault(),s={x:e.pageX,y:e.pageY,time:+new Date},o=void 0,u={},X(t)?(p.addEventListener("mousemove",this,!1),p.addEventListener("mouseup",this,!1),p.addEventListener("mouseleave",this,!1)):(p.addEventListener("touchmove",this,!!d.passiveEvents&&{passive:!1}),p.addEventListener("touchend",this,!1)),e=j(),t=v[E],a.dragStart&&a.dragStart(e,t))},move:function(t){var e;if(X(t))e=t;else{if(1<t.touches.length||t.scale&&1!==t.scale)return;a.disableScroll&&n(t)&&t.preventDefault(),e=t.touches[0]}u={x:e.pageX-s.x,y:e.pageY-s.y},void 0===o&&(o=!!(o||Math.abs(u.x)<Math.abs(u.y))),o||(n(t)&&t.preventDefault(),I(),a.continuous?(R(A(E-1),u.x+f[A(E-1)],0),R(E,u.x+f[E],0),R(A(E+1),u.x+f[A(E+1)],0)):(u.x=u.x/(!E&&0<u.x||E===v.length-1&&u.x<0?Math.abs(u.x)/m+1:1),R(E-1,u.x+f[E-1],0),R(E,u.x+f[E],0),R(E+1,u.x+f[E+1],0)))},end:function(t){var e=+new Date-s.time,n=Number(e)<250&&20<Math.abs(u.x)||Math.abs(u.x)>m/2,i=!E&&0<u.x||E===v.length-1&&u.x<0;a.continuous&&(i=!1);e=Math.abs(u.x)/u.x;o||(n&&!i?(E=e<0?(a.continuous?(P(A(E-1),-m,0),P(A(E+2),m,0)):P(E-1,-m,0),P(E,f[E]-m,y),P(A(E+1),f[A(E+1)]-m,y),A(E+1)):(a.continuous?(P(A(E+1),m,0),P(A(E-2),-m,0)):P(E+1,m,0),P(E,f[E]+m,y),P(A(E-1),f[A(E-1)]+m,y),A(E-1)),k(j(),v[E],e)):a.continuous?(P(A(E-1),-m,y),P(E,0,y),P(A(E+1),m,y)):(P(E-1,-m,y),P(E,0,y),P(E+1,m,y))),X(t)?(p.removeEventListener("mousemove",L,!1),p.removeEventListener("mouseup",L,!1),p.removeEventListener("mouseleave",L,!1)):(p.removeEventListener("touchmove",L,!!d.passiveEvents&&{passive:!1}),p.removeEventListener("touchend",L,!1)),e=j(),t=v[E],a.dragEnd&&a.dragEnd(e,t)},transitionEnd:function(t){parseInt(t.target.getAttribute("data-index"),10)===E&&((l||a.autoRestart)&&N(),z(j(),v[E]))}};return S(),C(),{setup:S,slide:function(t,e){I(),O(t,e)},prev:function(){I(),i||(a.continuous||E)&&O(E-1)},next:function(){I(),M()},restart:N,stop:I,getPos:j,disable:function(){I(),i=!0},enable:function(){i=!1,N()},getNumSlides:function(){return h},kill:function(){I(),r.style.visibility="",p.style.width="",p.style[T]="";var t=v.length;for(;t--;){d.transitions&&R(t,0,0);var e=v[t];e.getAttribute("data-cloned")&&e.parentElement.removeChild(e),e.style.width="",e.style[T]="",e.style.webkitTransitionDuration=e.style.MozTransitionDuration=e.style.msTransitionDuration=e.style.OTransitionDuration=e.style.transitionDuration="",e.style.webkitTransform=e.style.msTransform=e.style.MozTransform=e.style.OTransform=""}w(),x.cancel()}}}function w(){d.addEventListener?(p.removeEventListener("touchstart",L,!!d.passiveEvents&&{passive:!0}),p.removeEventListener("mousedown",L,!1),p.removeEventListener("webkitTransitionEnd",L,!1),p.removeEventListener("msTransitionEnd",L,!1),p.removeEventListener("oTransitionEnd",L,!1),p.removeEventListener("otransitionend",L,!1),p.removeEventListener("transitionend",L,!1),Q.removeEventListener("resize",L,!1)):Q.onresize=null}function D(t){t=t.cloneNode(!0);p.appendChild(t),t.setAttribute("data-cloned",!0),t.removeAttribute("id")}function S(t){if(null!=t)for(var e in t)a[e]=t[e];v=p.children,h=v.length;for(var n=0;n<v.length;n++)v[n].getAttribute("data-cloned")&&h--;if(v.length<2&&(a.continuous=!1),d.transitions&&a.continuous&&v.length<3&&(D(v[0]),D(v[1]),v=p.children),"right"===T)for(var i=0;i<v.length;i++)v[i].style.float="right";f=new Array(v.length),m=r.getBoundingClientRect().width||r.offsetWidth,p.style.width=v.length*m*2+"px";for(var o=v.length;o--;){var s=v[o];s.style.width=m+"px",s.setAttribute("data-index",o),d.transitions&&(s.style[T]=o*-m+"px",P(o,o<E?-m:E<o?m:0,0))}a.continuous&&d.transitions&&(P(A(E-1),-m,0),P(A(E+1),m,0)),d.transitions||(p.style[T]=E*-m+"px"),r.style.visibility="visible",w(),d.addEventListener?(d.touch&&p.addEventListener("touchstart",L,!!d.passiveEvents&&{passive:!0}),a.draggable&&p.addEventListener("mousedown",L,!1),d.transitions&&(p.addEventListener("webkitTransitionEnd",L,!1),p.addEventListener("msTransitionEnd",L,!1),p.addEventListener("oTransitionEnd",L,!1),p.addEventListener("otransitionend",L,!1),p.addEventListener("transitionend",L,!1)),Q.addEventListener("resize",L,!1)):Q.onresize=x}function M(){i||(a.continuous||E<v.length-1)&&O(E+1)}function k(t,e,n){a.callback&&a.callback(t,e,n)}function z(t,e){a.transitionEnd&&a.transitionEnd(t,e)}function A(t){return(v.length+t%v.length)%v.length}function j(){var t=E;return h<=t&&(t-=h),t}function O(t,e){if(t="number"!=typeof t?parseInt(t,10):t,E!==t){if(d.transitions){var n,i=Math.abs(E-t)/(E-t);a.continuous&&(n=i,(i=-f[A(t)]/m)!==n&&(t=-i*v.length+t));for(var o=Math.abs(E-t)-1;o--;)P(A((E<t?t:E)-o-1),m*i,0);t=A(t),P(E,m*i,e||y),P(t,0,e||y),a.continuous&&P(A(t-i),-m*i,0)}else t=A(t),function(e,n,i){if(!i)return p.style[T]=n+"px";var o=+new Date,s=setInterval(function(){var t=+new Date-o;if(i<t)return p.style[T]=n+"px",(l||a.autoRestart)&&N(),z(j(),v[E]),void clearInterval(s);p.style[T]=(n-e)*(Math.floor(t/i*100)/100)+e+"px"},4)}(E*-m,t*-m,e||y);E=t,c(function(){k(j(),v[E],i)})}}function P(t,e,n){R(t,e,n),f[t]=e}function R(t,e,n){t=v[t],t=t&&t.style;t&&(t.webkitTransitionDuration=t.MozTransitionDuration=t.msTransitionDuration=t.OTransitionDuration=t.transitionDuration=n+"ms",t.webkitTransform=t.msTransform=t.MozTransform=t.OTransform=t.transform="translateX("+e+"px)")}function C(){(l=a.auto||0)&&(t=setTimeout(M,l))}function I(){l=0,clearTimeout(t)}function N(){I(),C()}function X(t){return/^mouse/.test(t.type)}}return(Q.jQuery||Q.Zepto)&&((e=Q.jQuery||Q.Zepto).fn.Swipe=function(t){return this.each(function(){e(this).data("Swipe",new Swipe(e(this)[0],t))})}),Swipe});
\ No newline at end of file
+!function(t,e){t=t||{},"function"==typeof define&&define.amd?define([],function(){return t.Swipe=e(),t.Swipe}):"object"==typeof module&&module.exports?module.exports=e():t.Swipe=e()}(this,function(){var e,Y="object"==typeof self&&self.self===self&&self||"object"==typeof global&&global.global===global&&global||this,Z=Y.document;function Swipe(s,a){"use strict";function e(){}function n(t){return!!t&&("boolean"!=typeof t.cancelable||t.cancelable)}var o,t,r={},u={},l=(a=a||{}).auto||0,i=!1,d=function(t){setTimeout(t||e,0)};Element.prototype.matches||(Element.prototype.matches=Element.prototype.matchesSelector||Element.prototype.mozMatchesSelector||Element.prototype.msMatchesSelector||Element.prototype.oMatchesSelector||Element.prototype.webkitMatchesSelector||function(t){for(var e=(this.document||this.ownerDocument).querySelectorAll(t),n=e.length;0<=--n&&e.item(n)!==this;);return-1<n});var c={addEventListener:!!Y.addEventListener,passiveEvents:function(){var e=!1;try{var t=Object.defineProperty({},"passive",{get:function(){e=!0}});Y.addEventListener("testEvent",null,t),Y.removeEventListener("testEvent",null,t)}catch(t){e=!1}return e}(),touch:"ontouchstart"in Y||Y.DocumentTouch&&Z instanceof DocumentTouch,transitions:function(t){var e,n=["transitionProperty","WebkitTransition","MozTransition","OTransition","msTransition"];for(e in n)if(void 0!==t.style[n[e]])return!0;return!1}(Z.createElement("swipe"))};if(s){var v,h,p,f,m,E,g=s.children[0],y=parseInt(a.startSlide,10)||0,b=a.speed||300;a.continuous=void 0===a.continuous||a.continuous;var x,T,L=(x="direction",s.currentStyle?T=s.currentStyle[x]:Y.getComputedStyle&&(T=Y.getComputedStyle(s,null).getPropertyValue(x)),"rtl"===T?"right":"left");a.autoRestart=void 0!==a.autoRestart&&a.autoRestart,a.partial=void 0!==a.partial&&a.partial;var w=function(n,i){i=i||100;var o=null;function r(){o&&clearTimeout(o)}function t(){var t=this,e=arguments;r(),o=setTimeout(function(){o=null,n.apply(t,e)},i)}return t.cancel=r,t}(k),D={handleEvent:function(t){if(!i||"resize"===t.type){switch(t.type){case"mousedown":case"touchstart":this.start(t);break;case"mousemove":case"touchmove":this.move(t);break;case"mouseup":case"mouseleave":case"touchend":this.end(t);break;case"webkitTransitionEnd":case"msTransitionEnd":case"oTransitionEnd":case"otransitionend":case"transitionend":this.transitionEnd(t);break;case"resize":w()}a.stopPropagation&&t.stopPropagation()}},start:function(t){var e=W(t)?t:t.touches[0];a.ignore&&e.target.matches(a.ignore)||(W(t)&&t.preventDefault(),r={x:e.pageX,y:e.pageY,time:+new Date},o=void 0,u={},W(t)?(g.addEventListener("mousemove",this,!1),g.addEventListener("mouseup",this,!1),g.addEventListener("mouseleave",this,!1)):(g.addEventListener("touchmove",this,!!c.passiveEvents&&{passive:!1}),g.addEventListener("touchend",this,!1)),e=P(),t=v[y],a.dragStart&&a.dragStart(e,t))},move:function(t){var e;if(W(t))e=t;else{if(1<t.touches.length||t.scale&&1!==t.scale)return;a.disableScroll&&n(t)&&t.preventDefault(),e=t.touches[0]}u={x:e.pageX-r.x,y:e.pageY-r.y},void 0===o&&(o=!!(o||Math.abs(u.x)<Math.abs(u.y))),o||(n(t)&&t.preventDefault(),X(),a.continuous?(I(O(y-1),u.x+h[O(y-1)],0),I(y,u.x+h[y],0),I(O(y+1),u.x+h[O(y+1)],0)):(u.x=u.x/(!y&&0<u.x||y===v.length-1&&u.x<0?Math.abs(u.x)/p+1:1),I(y-1,u.x+h[y-1],0),I(y,u.x+h[y],0),I(y+1,u.x+h[y+1],0)))},end:function(t){var e=+new Date-r.time,n=Number(e)<250&&20<Math.abs(u.x)||Math.abs(u.x)>p/2,i=!y&&0<u.x||y===v.length-1&&u.x<0;a.continuous&&(i=!1);e=Math.abs(u.x)/u.x;o||(n&&!i?(y=e<0?(a.continuous?(C(O(y-1),-p,0),C(O(y+2),p,0)):C(y-1,-p,0),a.partial?(C(O(y-1),4<v.length?-m.hidden:m.hidden,0),C(O(y-2),m.hidden,0),C(O(y+2),3<v.length?m.hidden:-m.hidden,0),C(y,m.prev,b),C(O(y+1),m.middle,b),(y<f-2||a.continuous)&&C(O(y+2),m.next,3<v.length?b:0)):(C(y,h[y]-p,b),C(O(y+1),h[O(y+1)]-p,b)),O(y+1)):(a.continuous?(C(O(y+1),p,0),C(O(y-2),-p,0)):C(y+1,p,0),a.partial?(C(O(y+1),4<v.length?m.hidden:-m.hidden,0),C(O(y-2),3<v.length?-m.hidden:m.hidden,0),C(O(y-3),-m.hidden,0),C(y,m.next,b),(1<y||a.continuous)&&C(O(y-2),m.prev,3<v.length?b:0),C(O(y-1),m.middle,b)):(C(y,h[y]+p,b),C(O(y-1),h[O(y-1)]+p,b)),O(y-1)),A(P(),v[y],e)):a.continuous&&!a.partial?(C(O(y-1),-p,b),C(y,0,b),C(O(y+1),p,b)):a.partial?((0<y||a.continuous)&&C(O(y-1),m.prev,b),C(y,m.middle,b),(y<f-1||a.continuous)&&C(O(y+1),m.next,b)):(C(y-1,-p,b),C(y,0,b),C(y+1,p,b))),W(t)?(g.removeEventListener("mousemove",D,!1),g.removeEventListener("mouseup",D,!1),g.removeEventListener("mouseleave",D,!1)):(g.removeEventListener("touchmove",D,!!c.passiveEvents&&{passive:!1}),g.removeEventListener("touchend",D,!1)),e=P(),t=v[y],a.dragEnd&&a.dragEnd(e,t)},transitionEnd:function(t){parseInt(t.target.getAttribute("data-index"),10)===y&&((l||a.autoRestart)&&Q(),j(P(),v[y]))}};return k(),N(),{setup:k,slide:function(t,e){X(),R(t,e)},prev:function(){X(),i||(a.continuous||y)&&R(y-1)},next:function(){X(),z()},restart:Q,stop:X,getPos:P,disable:function(){X(),i=!0},enable:function(){i=!1,Q()},getNumSlides:function(){return f},kill:function(){X(),s.style.visibility="",g.style.width="",g.style[L]="";var t=v.length;for(;t--;){c.transitions&&I(t,0,0);var e=v[t];e.getAttribute("data-cloned")&&e.parentElement.removeChild(e),e.style.width="",e.style[L]="",e.style.webkitTransitionDuration=e.style.MozTransitionDuration=e.style.msTransitionDuration=e.style.OTransitionDuration=e.style.transitionDuration="",e.style.webkitTransform=e.style.msTransform=e.style.MozTransform=e.style.OTransform=""}S(),w.cancel()}}}function S(){c.addEventListener?(g.removeEventListener("touchstart",D,!!c.passiveEvents&&{passive:!0}),g.removeEventListener("mousedown",D,!1),g.removeEventListener("webkitTransitionEnd",D,!1),g.removeEventListener("msTransitionEnd",D,!1),g.removeEventListener("oTransitionEnd",D,!1),g.removeEventListener("otransitionend",D,!1),g.removeEventListener("transitionend",D,!1),Y.removeEventListener("resize",D,!1)):Y.onresize=null}function M(t){t=t.cloneNode(!0);g.appendChild(t),t.setAttribute("data-cloned",!0),t.removeAttribute("id")}function k(t){if(null!=t)for(var e in t)a[e]=t[e];v=g.children,f=v.length;for(var n=0;n<v.length;n++)v[n].getAttribute("data-cloned")&&f--;if(v.length<2&&(a.continuous=!1,a.partial=!1),c.transitions&&a.continuous&&v.length<3&&(M(v[0]),M(v[1]),v=g.children),"right"===L)for(var i=0;i<v.length;i++)v[i].style.float="right";h=new Array(v.length),E=s.getBoundingClientRect().width||s.offsetWidth,p=a.partial?.9*E:E,g.style.width=v.length*p*2+"px",m={hidden:E,prev:.9*-p,middle:.05*p,next:p};for(var o=v.length;o--;){var r=v[o];r.style.width=p+"px",r.setAttribute("data-index",o),c.transitions&&(r.style[L]=o*-p+"px",a.partial?C(o,m.hidden,0):C(o,o<y?-p:y<o?p:0,0))}a.continuous&&c.transitions&&(C(O(y-1),-p,0),C(O(y+1),p,0)),a.partial&&(C(O(y-2),4<f?-m.hidden:m.hidden,0),a.continuous&&C(O(y-1),m.prev,0),C(y,m.middle,0),C(O(y+1),m.next,0)),c.transitions||(g.style[L]=y*-p+"px"),s.style.visibility="visible",S(),c.addEventListener?(c.touch&&g.addEventListener("touchstart",D,!!c.passiveEvents&&{passive:!0}),a.draggable&&g.addEventListener("mousedown",D,!1),c.transitions&&(g.addEventListener("webkitTransitionEnd",D,!1),g.addEventListener("msTransitionEnd",D,!1),g.addEventListener("oTransitionEnd",D,!1),g.addEventListener("otransitionend",D,!1),g.addEventListener("transitionend",D,!1)),Y.addEventListener("resize",D,!1)):Y.onresize=w}function z(){i||(a.continuous||y<v.length-1)&&R(y+1)}function A(t,e,n){a.callback&&a.callback(t,e,n)}function j(t,e){a.transitionEnd&&a.transitionEnd(t,e)}function O(t){return(v.length+t%v.length)%v.length}function P(){var t=y;return f<=t&&(t-=f),t}function R(t,e){if(t="number"!=typeof t?parseInt(t,10):t,y!==t){if(c.transitions){var n,i=Math.abs(y-t)/(y-t);if(a.continuous&&(n=i,(i=-h[O(t)]/p)===n||a.partial||(t=-i*v.length+t)),!a.partial)for(var o=Math.abs(y-t)-1;o--;)C(O((y<t?t:y)-o-1),p*i,0);t=O(t),a.partial?-1===i?(C(O(y-1),4<v.length?-m.hidden:m.hidden,0),3<f&&(C(O(y-2),m.hidden,0),C(O(y+2),m.hidden,0)),C(y,m.prev,e||b),C(t,m.middle,e||b),(t<f-1||a.continuous)&&C(O(y+2),m.next,4<f?e||b:0)):(C(O(y+1),4<v.length?m.hidden:-m.hidden,0),3<f&&(C(O(y-2),-m.hidden,0),C(O(y-3),-m.hidden,0)),C(y,m.next,e||b),C(t,m.middle,e||b),(0<t||a.continuous)&&C(O(t-1),m.prev,4<f?e||b:0)):(C(y,p*i,e||b),C(t,0,e||b),a.continuous&&C(O(t-i),-p*i,0),C(y,p*i,e||b),C(t,0,e||b))}else t=O(t),function(e,n,i){if(!i)return g.style[L]=n+"px";var o=+new Date,r=setInterval(function(){var t=+new Date-o;if(i<t)return g.style[L]=n+"px",(l||a.autoRestart)&&Q(),j(P(),v[y]),void clearInterval(r);g.style[L]=(n-e)*(Math.floor(t/i*100)/100)+e+"px"},4)}(y*-p,t*-p,e||b);y=t,d(function(){A(P(),v[y],i)})}}function C(t,e,n){I(t,e,n),h[t]=e}function I(t,e,n){t=v[t],t=t&&t.style;t&&(t.webkitTransitionDuration=t.MozTransitionDuration=t.msTransitionDuration=t.OTransitionDuration=t.transitionDuration=n+"ms",t.webkitTransform=t.msTransform=t.MozTransform=t.OTransform=t.transform="translateX("+e+"px)")}function N(){(l=a.auto||0)&&(t=setTimeout(z,l))}function X(){l=0,clearTimeout(t)}function Q(){X(),N()}function W(t){return/^mouse/.test(t.type)}}return(Y.jQuery||Y.Zepto)&&((e=Y.jQuery||Y.Zepto).fn.Swipe=function(t){return this.each(function(){e(this).data("Swipe",new Swipe(e(this)[0],t))})}),Swipe});
\ No newline at end of file
diff --git a/docs/index.html b/docs/index.html
index a926626..308849d 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -163,7 +163,7 @@ <h2>License</h2>
     </footer>
 
     <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
-    <script src="//cdn.jsdelivr.net/gh/lyfeyaj/swipe/swipe.js"></script>
+    <script src="../swipe.js"></script>
     <script>
 
       // pure JS
@@ -176,7 +176,8 @@ <h2>License</h2>
         auto: 3000,
         draggable: true,
         autoRestart: false,
-        continuous: true,
+        continuous: false,
+        partial: true,
         disableScroll: true,
         stopPropagation: true,
         callback: function(index, element) {},
diff --git a/docs/style.css b/docs/style.css
index 0e15a56..f1a9e76 100644
--- a/docs/style.css
+++ b/docs/style.css
@@ -86,7 +86,7 @@ header, footer {
   margin: 0; }
   .swipe-wrap > div b {
     display: block;
-    margin: 0 1.5em;
+    margin: 0 .8em;
     padding: 4em 1em;
     font-size: 2em;
     text-align: center; }
diff --git a/swipe.js b/swipe.js
index e4e8602..81fa0ba 100644
--- a/swipe.js
+++ b/swipe.js
@@ -146,7 +146,7 @@
     if (!container) return;
 
     var element = container.children[0];
-    var slides, slidePos, width, length;
+    var slides, slidePos, width, length, partialPos, containerWidth;
     var index = parseInt(options.startSlide, 10) || 0;
     var speed = options.speed || 300;
     options.continuous = options.continuous !== undefined ? options.continuous : true;
@@ -163,6 +163,9 @@
 
     // AutoRestart option: auto restart slideshow after user's touch event
     options.autoRestart = options.autoRestart !== undefined ? options.autoRestart : false;
+    
+    // Partial option: show partially prev and next slides
+    options.partial = options.partial !== undefined ? options.partial : false;
 
     // throttled setup
     var throttledSetup = throttle(setup);
@@ -352,8 +355,21 @@
                 move(index-1, -width, 0);
               }
 
-              move(index, slidePos[index]-width, speed);
-              move(circle(index+1), slidePos[circle(index+1)]-width, speed);
+              if (options.partial) {
+                move(circle(index-1), slides.length > 4 ? -partialPos.hidden : partialPos.hidden, 0);
+                move(circle(index-2), partialPos.hidden, 0);
+                move(circle(index+2), slides.length > 3 ? partialPos.hidden : -partialPos.hidden, 0);
+
+                move(index, partialPos.prev, speed);
+                move(circle(index+1), partialPos.middle, speed);
+                if(index < length - 2 || options.continuous){
+                  move(circle(index+2), partialPos.next, slides.length > 3 ? speed : 0);
+                }
+              } else {
+                move(index, slidePos[index]-width, speed);
+                move(circle(index+1), slidePos[circle(index+1)]-width, speed);
+              }
+              
               index = circle(index+1);
 
             } else {
@@ -366,8 +382,19 @@
                 move(index+1, width, 0);
               }
 
-              move(index, slidePos[index]+width, speed);
-              move(circle(index-1), slidePos[circle(index-1)]+width, speed);
+              if (options.partial) {
+                move(circle(index+1), slides.length > 4 ? partialPos.hidden : -partialPos.hidden, 0);
+                move(circle(index-2), slides.length > 3 ? -partialPos.hidden : partialPos.hidden, 0);
+                move(circle(index-3), -partialPos.hidden, 0);
+                move(index, partialPos.next, speed);
+                if(index > 1 || options.continuous){
+                  move(circle(index-2),  partialPos.prev, slides.length > 3 ? speed : 0 );
+                }
+                move(circle(index-1), partialPos.middle, speed);
+              } else {
+                move(index, slidePos[index]+width, speed);
+                move(circle(index-1), slidePos[circle(index-1)]+width, speed);
+              }
               index = circle(index-1);
             }
 
@@ -375,14 +402,19 @@
 
           } else {
 
-            if (options.continuous) {
-
+            if (options.continuous && !options.partial) {
               move(circle(index-1), -width, speed);
               move(index, 0, speed);
               move(circle(index+1), width, speed);
-
+            } else if (options.partial) {
+              if(index > 0 || options.continuous){
+                move(circle(index-1), partialPos.prev, speed);
+              }
+              move(index, partialPos.middle, speed);
+              if(index < length - 1 || options.continuous){
+                move(circle(index+1), partialPos.next, speed);
+              }
             } else {
-
               move(index-1, -width, speed);
               move(index, 0, speed);
               move(index+1, width, speed);
@@ -541,6 +573,7 @@
       // set continuous to false if only one slide
       if (slides.length < 2) {
         options.continuous = false;
+        options.partial = false;
       }
 
       // special case if two slides
@@ -562,10 +595,16 @@
       slidePos = new Array(slides.length);
 
       // determine width of each slide
-      width = container.getBoundingClientRect().width || container.offsetWidth;
+      containerWidth = container.getBoundingClientRect().width || container.offsetWidth;
+      width = options.partial ? containerWidth*0.9 : containerWidth;
 
       element.style.width = (slides.length * width * 2) + 'px';
-
+      partialPos = {
+        hidden: containerWidth,
+        prev: -width*0.9,
+        middle: width*0.05,
+        next: width
+      };
       // stack elements
       var pos = slides.length;
       while(pos--) {
@@ -576,7 +615,11 @@
 
         if (browser.transitions) {
           slide.style[slideDir] = (pos * -width) + 'px';
-          move(pos, index > pos ? -width : (index < pos ? width : 0), 0);
+          if (options.partial) {
+            move(pos, partialPos.hidden, 0);
+          } else {
+            move(pos, index > pos ? -width : (index < pos ? width : 0), 0);
+          }
         }
       }
 
@@ -586,6 +629,15 @@
         move(circle(index+1), width, 0);
       }
 
+      if (options.partial) {
+        move(circle(index-2), length > 4 ? -partialPos.hidden : partialPos.hidden, 0);
+        if(options.continuous){
+          move(circle(index-1), partialPos.prev, 0);
+        }
+        move(index, partialPos.middle, 0);
+        move(circle(index+1), partialPos.next, 0);
+      }
+
       if (!browser.transitions) {
         element.style[slideDir] = (index * -width) + 'px';
       }
@@ -669,7 +721,7 @@
       if (browser.transitions) {
 
         var direction = Math.abs(index-to) / (index-to); // 1: backward, -1: forward
-
+        
         // get the actual position of the slide
         if (options.continuous) {
           var natural_direction = direction;
@@ -677,26 +729,55 @@
 
           // if going forward but to < index, use to = slides.length + to
           // if going backward but to > index, use to = -slides.length + to
-          if (direction !== natural_direction) {
+          if (direction !== natural_direction && !options.partial) {
             to = -direction * slides.length + to;
           }
 
         }
 
-        var diff = Math.abs(index-to) - 1;
+        if(!options.partial) {
+          var diff = Math.abs(index-to) - 1;
 
-        // move all the slides between index and to in the right direction
-        while (diff--) {
-          move( circle((to > index ? to : index) - diff - 1), width * direction, 0);
+          // move all the slides between index and to in the right direction
+          while (diff--) {
+            move( circle((to > index ? to : index) - diff - 1), width * direction, 0);
+          }
         }
 
         to = circle(to);
 
-        move(index, width * direction, slideSpeed || speed);
-        move(to, 0, slideSpeed || speed);
-
-        if (options.continuous) { // we need to get the next in place
-          move(circle(to - direction), -(width * direction), 0);
+        if (options.partial) {
+          if (direction === -1) {
+            move(circle(index-1), slides.length > 4 ? -partialPos.hidden : partialPos.hidden, 0);
+            if(length>3) {
+              move(circle(index-2), partialPos.hidden, 0);
+              move(circle(index+2), partialPos.hidden, 0);
+            }
+            move(index, partialPos.prev, slideSpeed || speed);
+            move(to, partialPos.middle, slideSpeed || speed);
+            if(to < length - 1 || options.continuous ){
+              move(circle(index+2), partialPos.next, length > 4 ? slideSpeed || speed : 0);
+            }
+          } else {
+            move(circle(index+1), slides.length > 4 ? partialPos.hidden : -partialPos.hidden, 0);
+            if(length>3) {
+              move(circle(index-2), -partialPos.hidden, 0);
+              move(circle(index-3), -partialPos.hidden, 0);
+            }
+            move(index, partialPos.next, slideSpeed || speed);
+            move(to, partialPos.middle, slideSpeed || speed);
+            if(to > 0 || options.continuous){
+              move(circle(to-1), partialPos.prev, length > 4 ? slideSpeed || speed : 0);
+            }
+          }
+        } else {
+          move(index, width * direction, slideSpeed || speed);
+          move(to, 0, slideSpeed || speed);
+          if (options.continuous) { // we need to get the next in place
+            move(circle(to - direction), -(width * direction), 0);
+          }
+          move(index, width * direction, slideSpeed || speed);
+          move(to, 0, slideSpeed || speed);
         }
 
       } else {

From dcaeaf231c68026af992eaa01841c5eb04713bef Mon Sep 17 00:00:00 2001
From: Intizar Ahmad <intizarahmad@gmail.com>
Date: Mon, 29 Nov 2021 20:24:10 +0530
Subject: [PATCH 2/7] Update README.md

Add the documentation support for partial option
---
 README.md | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index bc130fd..e87a92f 100644
--- a/README.md
+++ b/README.md
@@ -108,7 +108,9 @@ Swipe can take an optional second parameter – an object of key/value settings:
 | **startSlide**      | Integer  | 0       | index position at which Swipe should start.                                                                                                                                                                      |
 | **speed**           | Integer  | 300     | speed of prev and next transitions in milliseconds.                                                                                                                                                              |
 | **auto**            | Integer  | 0       | when specified, start an auto-playing slideshow (time in milliseconds between slide change).                                                                                                                     |
-| **continuous**      | Boolean  | true    | create an infinite feel with no endpoints.                                                                                                                                                                       |
+| **continuous**      | Boolean  | true    | create an infinite feel with no endpoints.                                                                                           
+| **partial**     | Boolean  | false   | to show the previous and next slides partially.  
+
 | **autoRestart**     | Boolean  | false   | auto restart slideshow after user's touch event or next/prev calls.                                                                                                                                              |
 | **disableScroll**   | Boolean  | false   | prevent any touch events on this container from scrolling the page.                                                                                                                                              |
 | **stopPropagation** | Boolean  | false   | stop event propagation.                                                                                                                                                                                          |

From 1ea0fd78cc42490a0bd260e47ae6f7a832ba5839 Mon Sep 17 00:00:00 2001
From: Intizar Ahmad <intizarahmad@gmail.com>
Date: Mon, 29 Nov 2021 20:30:01 +0530
Subject: [PATCH 3/7] Update README.md

fix documentation
---
 README.md | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/README.md b/README.md
index e87a92f..66283a1 100644
--- a/README.md
+++ b/README.md
@@ -108,9 +108,8 @@ Swipe can take an optional second parameter – an object of key/value settings:
 | **startSlide**      | Integer  | 0       | index position at which Swipe should start.                                                                                                                                                                      |
 | **speed**           | Integer  | 300     | speed of prev and next transitions in milliseconds.                                                                                                                                                              |
 | **auto**            | Integer  | 0       | when specified, start an auto-playing slideshow (time in milliseconds between slide change).                                                                                                                     |
-| **continuous**      | Boolean  | true    | create an infinite feel with no endpoints.                                                                                           
-| **partial**     | Boolean  | false   | to show the previous and next slides partially.  
-
+| **continuous**      | Boolean  | true    | create an infinite feel with no endpoints.                                                                                                                                                                       |
+| **partial**      | Boolean  | false    | to show the previous and next slides partially.                                                                                                                                                                       |
 | **autoRestart**     | Boolean  | false   | auto restart slideshow after user's touch event or next/prev calls.                                                                                                                                              |
 | **disableScroll**   | Boolean  | false   | prevent any touch events on this container from scrolling the page.                                                                                                                                              |
 | **stopPropagation** | Boolean  | false   | stop event propagation.                                                                                                                                                                                          |

From a91da6059741eaffb7b1dbc054359a29f48bec20 Mon Sep 17 00:00:00 2001
From: Intizar Ahmad <intizarahmad@gmail.com>
Date: Mon, 29 Nov 2021 21:33:41 +0530
Subject: [PATCH 4/7] fix: show pre and next slide if index is between 0 and
 total slides

---
 swipe.js | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/swipe.js b/swipe.js
index 81fa0ba..34801d6 100644
--- a/swipe.js
+++ b/swipe.js
@@ -631,11 +631,13 @@
 
       if (options.partial) {
         move(circle(index-2), length > 4 ? -partialPos.hidden : partialPos.hidden, 0);
-        if(options.continuous){
+        if(index > 0 || options.continuous){
           move(circle(index-1), partialPos.prev, 0);
         }
         move(index, partialPos.middle, 0);
-        move(circle(index+1), partialPos.next, 0);
+        if(index < length-1 || options.continuous){
+          move(circle(index+1), partialPos.next, 0);
+        }
       }
 
       if (!browser.transitions) {

From d0ddbaaf392c482bba0691f9be68dc39f142a2b8 Mon Sep 17 00:00:00 2001
From: Intizar Ahmad <intizarahmad@gmail.com>
Date: Wed, 15 Dec 2021 06:37:06 +0530
Subject: [PATCH 5/7] added: take the partial information from the user in
 partial options

---
 README.md |  2 +-
 swipe.js  | 51 +++++++++++++++++++++++++++++++++++----------------
 2 files changed, 36 insertions(+), 17 deletions(-)

diff --git a/README.md b/README.md
index 66283a1..703fd09 100644
--- a/README.md
+++ b/README.md
@@ -109,7 +109,7 @@ Swipe can take an optional second parameter – an object of key/value settings:
 | **speed**           | Integer  | 300     | speed of prev and next transitions in milliseconds.                                                                                                                                                              |
 | **auto**            | Integer  | 0       | when specified, start an auto-playing slideshow (time in milliseconds between slide change).                                                                                                                     |
 | **continuous**      | Boolean  | true    | create an infinite feel with no endpoints.                                                                                                                                                                       |
-| **partial**      | Boolean  | false    | to show the previous and next slides partially.                                                                                                                                                                       |
+| **partial**      | Boolean | Number  | false    | to show the previous and next slides partially. Either you can pass as true or any number in the range between .1 to .19                                                                                                                                                                     |
 | **autoRestart**     | Boolean  | false   | auto restart slideshow after user's touch event or next/prev calls.                                                                                                                                              |
 | **disableScroll**   | Boolean  | false   | prevent any touch events on this container from scrolling the page.                                                                                                                                              |
 | **stopPropagation** | Boolean  | false   | stop event propagation.                                                                                                                                                                                          |
diff --git a/swipe.js b/swipe.js
index 34801d6..f5592a0 100644
--- a/swipe.js
+++ b/swipe.js
@@ -165,8 +165,8 @@
     options.autoRestart = options.autoRestart !== undefined ? options.autoRestart : false;
     
     // Partial option: show partially prev and next slides
-    options.partial = options.partial !== undefined ? options.partial : false;
-
+    options.partial = options.partial !== undefined || options.partial > 0 ? options.partial : false;
+    
     // throttled setup
     var throttledSetup = throttle(setup);
 
@@ -352,14 +352,15 @@
                 move(circle(index+2), width, 0);
 
               } else {
-                move(index-1, -width, 0);
+                move(circle(index-1), -width, 0);
               }
 
               if (options.partial) {
                 move(circle(index-1), slides.length > 4 ? -partialPos.hidden : partialPos.hidden, 0);
-                move(circle(index-2), partialPos.hidden, 0);
-                move(circle(index+2), slides.length > 3 ? partialPos.hidden : -partialPos.hidden, 0);
-
+                if(length>3) {
+                  move(circle(index-2), partialPos.hidden, 0);
+                  move(circle(index+2), partialPos.hidden, 0);
+                }
                 move(index, partialPos.prev, speed);
                 move(circle(index+1), partialPos.middle, speed);
                 if(index < length - 2 || options.continuous){
@@ -432,6 +433,7 @@
           element.removeEventListener('touchend', events, false);
         }
         runDragEnd(getPos(), slides[index]);
+        console.log('slidePos', slidePos)
       },
 
       transitionEnd: function(event) {
@@ -552,7 +554,29 @@
       // Remove id from element
       clone.removeAttribute('id');
     }
-
+    function setUpPartials(containerWidth){
+      const { partial } = options
+      let partialWidthPercetage;
+      
+      /** 
+       * Setting up defaul partial Width if partial defined but erither its boolean
+       * of the partial does not seems to be in range of .01 to .20
+       */
+      if(partial && (typeof partial === 'boolean' || partial >= .20 || partial <= 0) ){
+        partialWidthPercetage = .10 
+      }else{
+        partialWidthPercetage = partial
+      }
+      let containerWidhtPercentage = 1-partialWidthPercetage;
+      width = partial ? containerWidth*containerWidhtPercentage : containerWidth;
+      partialPos = {
+        hidden: containerWidth,
+        prev: -width*containerWidhtPercentage,
+        middle: width*partialWidthPercetage/2,
+        next: width
+      };
+      return width
+    }
     function setup(opts) {
       // Overwrite options if necessary
       if (opts != null) {
@@ -596,15 +620,9 @@
 
       // determine width of each slide
       containerWidth = container.getBoundingClientRect().width || container.offsetWidth;
-      width = options.partial ? containerWidth*0.9 : containerWidth;
-
+      width = setUpPartials(containerWidth);
       element.style.width = (slides.length * width * 2) + 'px';
-      partialPos = {
-        hidden: containerWidth,
-        prev: -width*0.9,
-        middle: width*0.05,
-        next: width
-      };
+     
       // stack elements
       var pos = slides.length;
       while(pos--) {
@@ -645,7 +663,7 @@
       }
 
       container.style.visibility = 'visible';
-
+      console.log('slidePos', slidePos)
       // reinitialize events
       detachEvents();
       attachEvents();
@@ -796,6 +814,7 @@
     }
 
     function move(index, dist, speed) {
+      console.log({index, dist, speed})
       translate(index, dist, speed);
       slidePos[index] = dist;
     }

From 6744ecc1a98f1ff375b7efdcbee5b6e6d775573d Mon Sep 17 00:00:00 2001
From: Intizar Ahmad <intizarahmad@gmail.com>
Date: Wed, 15 Dec 2021 06:45:53 +0530
Subject: [PATCH 6/7] Update README.md

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 703fd09..d91801e 100644
--- a/README.md
+++ b/README.md
@@ -109,7 +109,7 @@ Swipe can take an optional second parameter – an object of key/value settings:
 | **speed**           | Integer  | 300     | speed of prev and next transitions in milliseconds.                                                                                                                                                              |
 | **auto**            | Integer  | 0       | when specified, start an auto-playing slideshow (time in milliseconds between slide change).                                                                                                                     |
 | **continuous**      | Boolean  | true    | create an infinite feel with no endpoints.                                                                                                                                                                       |
-| **partial**      | Boolean | Number  | false    | to show the previous and next slides partially. Either you can pass as true or any number in the range between .1 to .19                                                                                                                                                                     |
+| **partial**      | Boolean or Number | false | to show the previous and next slides partially. Either you can pass as `true` or any number in the between `.01` to `.19`                                                                                                                                                                     |
 | **autoRestart**     | Boolean  | false   | auto restart slideshow after user's touch event or next/prev calls.                                                                                                                                              |
 | **disableScroll**   | Boolean  | false   | prevent any touch events on this container from scrolling the page.                                                                                                                                              |
 | **stopPropagation** | Boolean  | false   | stop event propagation.                                                                                                                                                                                          |

From e0ae089d171e6e4efb1db171fe9682e42550a507 Mon Sep 17 00:00:00 2001
From: Intizar Ahmad <intizarahmad@gmail.com>
Date: Fri, 11 Feb 2022 13:41:08 +0530
Subject: [PATCH 7/7] PR review comments- remove console.log and typos

---
 swipe.js | 17 ++++++++---------
 1 file changed, 8 insertions(+), 9 deletions(-)

diff --git a/swipe.js b/swipe.js
index f5592a0..5b18399 100644
--- a/swipe.js
+++ b/swipe.js
@@ -433,7 +433,6 @@
           element.removeEventListener('touchend', events, false);
         }
         runDragEnd(getPos(), slides[index]);
-        console.log('slidePos', slidePos)
       },
 
       transitionEnd: function(event) {
@@ -556,23 +555,24 @@
     }
     function setUpPartials(containerWidth){
       const { partial } = options
-      let partialWidthPercetage;
+      let partialWidthPercentage;
       
       /** 
-       * Setting up defaul partial Width if partial defined but erither its boolean
-       * of the partial does not seems to be in range of .01 to .20
+       * Setting up default `partialWidthPercentage` width to .10 
+       * if `partial` property is defined but either its boolean or
+       * if the `partial`seems to be out of range (partial >= .20 || partial <= 0 )
        */
       if(partial && (typeof partial === 'boolean' || partial >= .20 || partial <= 0) ){
-        partialWidthPercetage = .10 
+        partialWidthPercentage = .10 
       }else{
-        partialWidthPercetage = partial
+        partialWidthPercentage = partial
       }
-      let containerWidhtPercentage = 1-partialWidthPercetage;
+      let containerWidhtPercentage = 1-partialWidthPercentage;
       width = partial ? containerWidth*containerWidhtPercentage : containerWidth;
       partialPos = {
         hidden: containerWidth,
         prev: -width*containerWidhtPercentage,
-        middle: width*partialWidthPercetage/2,
+        middle: width*partialWidthPercentage/2,
         next: width
       };
       return width
@@ -814,7 +814,6 @@
     }
 
     function move(index, dist, speed) {
-      console.log({index, dist, speed})
       translate(index, dist, speed);
       slidePos[index] = dist;
     }