using widthOfSiblingSlidePreview property not work properly
adambatso opened this issue · 11 comments
adambatso commented
version 2.15.0
Hi i have an issue when i using widthOfSiblingSlidePreview, the expect behaviour is that i will see the next slide (element) but instead of it i see the last slide.
i attached image of the issue
The arrow in the image is point to the last image in the container the issue is that all image get the same translate3d x parameter...
adambatso commented
someone checked it ?
ShaneRosse commented
@voronianski I'm having the same issue. the widthOfSiblingSlidePreview config option does not work as advertised. I'll open a PR if I can come up with the solution.
ShaneRosse commented
@Cyberlane I noticed you created the original PR maybe you have some advice for us.
wanCheng7 commented
I have the same issue,. Has someone solved?
Cyberlane commented
I created the original functionality for the widthOfSiblingSlidePreview, and it was to attempt at quickly add a feature I wanted/needed at the time. It worked initially, but I quickly found a number of edge cases which caused further problems, much like the ones mentioned in this issue.
Ultimately I wrote something new from scratch for what I originally needed.
I can take a look and see if there's a quick fix for this specific problem.
Cyberlane commented
@adambatso could you please provide an example of how to achieve your problem?
Currently I am trying this, and it works:
<div id="mySwipe" style="max-width:500px;margin:0 auto" class="swipe">
<div class="swipe-wrap">
<div><img src="https://placeimg.com/640/480/any?1" /></div>
<div><img src="https://placeimg.com/640/480/any?2" /></div>
<div><img src="https://placeimg.com/640/480/any?3" /></div>
</div>
</div> var elem = document.getElementById('mySwipe');
window.mySwipe = Swipe(elem, {
widthOfSiblingSlidePreview: '50px',
continuous: false,
});I am however aware that if you remove continuous or set it to true, that everything looks awful. Is that perhaps the bug you have right now?
gauravAtProptiger commented
I'm facing the same issue. Has anyone found the solution?
Cyberlane commented
@gauravAtProptiger see my previous comment. Is that the same problem you face? If not, could you please provide an reproducible example of the issue, and I would be happy to look into it for you. :)
gauravAtProptiger commented
@Cyberlane Yes, I am facing the same issue.
Setting the above mentioned configuration, the preview for the next slide is shown as the last slide that exist in list.
<!DOCTYPE html>
<html>
<head>
<title>Swipe 2</title>
<meta http-equiv="X-UA-Compatible" content="IE=8"/>
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0"
/>
<style type="text/css">
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, del, dfn, em, img, ins, kbd, q, samp, small, strong, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, table, tbody, tfoot, thead, tr, th, td, article, aside, footer, header, nav, section {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
-webkit-text-size-adjust: none;
font-family: sans-serif;
min-height: 416px;
}
h1 {
font-size: 33px;
margin: 50px 0 15px;
text-align: center;
color: #212121;
}
h2 {
font-size: 14px;
font-weight: bold;
color: #3c3c3c;
margin: 20px 10px 10px;
}
small {
margin: 0 10px 30px;
display: block;
font-size: 12px;
}
a {
margin: 0 0 0 10px;
font-size: 12px;
color: #3c3c3c;
}
html, body {
background: #f3f3f3;
}
#console {
font-size: 12px;
font-family: "Inconsolata", "Monaco", "Consolas", "Andale Mono", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace;
color: #999;
line-height: 18px;
margin-top: 20px;
max-height: 150px;
overflow: auto;
}
#mySwipe div b {
display: block;
font-weight: bold;
color: #14ADE5;
font-size: 20px;
text-align: center;
margin: 10px;
padding: 100px 10px;
box-shadow: 0 1px #EBEBEB;
background: #fff;
border-radius: 3px;
border: 1px solid;
border-color: #E5E5E5 #D3D3D3 #B9C1C6;
}
</style>
<style>
/* Swipe 2 required styles */
.swipe {
overflow: hidden;
visibility: hidden;
position: relative;
}
.swipe-wrap {
overflow: hidden;
position: relative;
}
.swipe-wrap > div {
float: left;
width: 100%;
position: relative;
}
/* END required styles */
</style>
</head>
<body>
<h1>Swipe 2</h1>
<div id="mySwipe" style="max-width:500px;margin:0 auto" class="swipe">
<div class="swipe-wrap">
<div><b>0</b></div>
<div><b>1</b></div>
<div><b>2</b></div>
<div><b>3</b></div>
<div><b>4</b></div>
<div><b>5</b></div>
<div><b>6</b></div>
<div><b>7</b></div>
<div><b>8</b></div>
<div><b>9</b></div>
<div><b>10</b></div>
<div><b>11</b></div>
<div><b>12</b></div>
<div><b>13</b></div>
<div><b>14</b></div>
<div><b>15</b></div>
<div><b>16</b></div>
<div><b>17</b></div>
<div><b>18</b></div>
<div><b>19</b></div>
<div><b>20</b></div>
</div>
</div>
<div style="text-align:center;padding-top:20px;">
<button onclick="mySwipe.prev()">prev</button>
<button onclick="mySwipe.next()">next</button>
</div>
<script type="text/javascript">
(function(e,t){if(typeof module!=="undefined"&&module.exports){module.exports=t()}else{e.Swipe=t()}})(this,function(){"use strict";return function Swipe(n,r){var t=function(){};var s=function(e){setTimeout(e||t,0)};var o={addEventListener:!!window.addEventListener,touch:"ontouchstart"in window||window.DocumentTouch&&document instanceof window.DocumentTouch,transitions:function(e){var t=["transitionProperty","WebkitTransition","MozTransition","OTransition","msTransition"];for(var n in t)if(e.style[t[n]]!==undefined)return true;return false}(document.createElement("swipe"))};if(!n)return;var f=n.children[0];var l,u,d,i;r=r||{};var c=parseInt(r.startSlide,10)||0;var v=r.speed||300;var a=parseInt(r.widthOfSiblingSlidePreview,10)||0;var h=r.continuous=r.continuous!==undefined?r.continuous:true;function m(){l=f.children;i=l.length;h=l.length<2?false:r.continuous;u=new Array(l.length);d=Math.round(n.getBoundingClientRect().width||n.offsetWidth)-a*2;f.style.width=l.length*d+"px";var e=l.length;while(e--){var t=l[e];t.style.width=d+"px";t.setAttribute("data-index",e);if(o.transitions){t.style.left=e*-d+a+"px";x(e,c>e?-d:c<e?d:0,0)}}if(h&&o.transitions){x(E(c-1),-d,0);x(E(c+1),d,0)}if(!o.transitions)f.style.left=c*-d+a+"px";n.style.visibility="visible"}function e(){if(h)p(c-1);else if(c)p(c-1)}function w(){if(h)p(c+1);else if(c<l.length-1)p(c+1)}function E(e){return(l.length+e%l.length)%l.length}function p(e,t){if(c==e)return;if(o.transitions){var n=Math.abs(c-e)/(c-e);if(h){var i=n;n=-u[E(e)]/d;if(n!==i)e=-n*l.length+e}var a=Math.abs(c-e)-1;while(a--)x(E((e>c?e:c)-a-1),d*n,0);e=E(e);x(c,d*n,t||v);x(e,0,t||v);if(h)x(E(e-n),-(d*n),0)}else{e=E(e);b(c*-d,e*-d,t||v)}c=e;s(r.callback&&r.callback(c,l[c]))}function x(e,t,n){g(e,t,n);u[e]=t}function g(e,t,n){var i=l[e];var a=i&&i.style;if(!a)return;a.webkitTransitionDuration=a.MozTransitionDuration=a.msTransitionDuration=a.OTransitionDuration=a.transitionDuration=n+"ms";a.webkitTransform="translate("+t+"px,0)"+"translateZ(0)";a.msTransform=a.MozTransform=a.OTransform="translateX("+t+"px)"}function b(t,n,i){if(!i){f.style.left=n+"px";return}var a=+new Date;var s=setInterval(function(){var e=+new Date-a;if(e>i){f.style.left=n+"px";if(T)L();r.transitionEnd&&r.transitionEnd.call(event,c,l[c]);clearInterval(s);return}f.style.left=(n-t)*(Math.floor(e/i*100)/100)+t+"px"},4)}var T=r.auto||0;var y;function L(){clearTimeout(y);y=setTimeout(w,T)}function k(){T=0;clearTimeout(y)}var D={};var M={};var z;var S={handleEvent:function(e){switch(e.type){case"touchstart":this.start(e);break;case"touchmove":this.move(e);break;case"touchend":s(this.end(e));break;case"webkitTransitionEnd":case"msTransitionEnd":case"oTransitionEnd":case"otransitionend":case"transitionend":s(this.transitionEnd(e));break;case"resize":s(m);break}if(r.stopPropagation)e.stopPropagation()},start:function(e){var t=e.touches[0];D={x:t.pageX,y:t.pageY,time:+new Date};z=undefined;M={};f.addEventListener("touchmove",this,false);f.addEventListener("touchend",this,false)},move:function(e){if(e.touches.length>1||e.scale&&e.scale!==1)return;if(r.disableScroll)return;var t=e.touches[0];M={x:t.pageX-D.x,y:t.pageY-D.y};if(typeof z=="undefined"){z=!!(z||Math.abs(M.x)<Math.abs(M.y))}if(!z){e.preventDefault();k();if(h){g(E(c-1),M.x+u[E(c-1)],0);g(c,M.x+u[c],0);g(E(c+1),M.x+u[E(c+1)],0)}else{M.x=M.x/(!c&&M.x>0||c==l.length-1&&M.x<0?Math.abs(M.x)/d+1:1);g(c-1,M.x+u[c-1],0);g(c,M.x+u[c],0);g(c+1,M.x+u[c+1],0)}r.swiping&&r.swiping(-M.x/d)}},end:function(e){var t=+new Date-D.time;var n=Number(t)<250&&Math.abs(M.x)>20||Math.abs(M.x)>d/2;var i=!c&&M.x>0||c==l.length-1&&M.x<0;if(h)i=false;var a=M.x<0;if(!z){if(n&&!i){if(a){if(h){x(E(c-1),-d,0);x(E(c+2),d,0)}else{x(c-1,-d,0)}x(c,u[c]-d,v);x(E(c+1),u[E(c+1)]-d,v);c=E(c+1)}else{if(h){x(E(c+1),d,0);x(E(c-2),-d,0)}else{x(c+1,d,0)}x(c,u[c]+d,v);x(E(c-1),u[E(c-1)]+d,v);c=E(c-1)}r.callback&&r.callback(c,l[c])}else{if(h){x(E(c-1),-d,v);x(c,0,v);x(E(c+1),d,v)}else{x(c-1,-d,v);x(c,0,v);x(c+1,d,v)}}}f.removeEventListener("touchmove",S,false);f.removeEventListener("touchend",S,false);f.removeEventListener("touchforcechange",function(){},false)},transitionEnd:function(e){if(parseInt(e.target.getAttribute("data-index"),10)==c){if(T)L();r.transitionEnd&&r.transitionEnd.call(e,c,l[c])}}};m();if(T)L();if(o.addEventListener){if(o.touch){f.addEventListener("touchstart",S,false);f.addEventListener("touchforcechange",function(){},false)}if(o.transitions){f.addEventListener("webkitTransitionEnd",S,false);f.addEventListener("msTransitionEnd",S,false);f.addEventListener("oTransitionEnd",S,false);f.addEventListener("otransitionend",S,false);f.addEventListener("transitionend",S,false)}window.addEventListener("resize",S,false)}else{window.onresize=function(){m()}}return{setup:function(){m()},slide:function(e,t){k();p(e,t)},prev:function(){k();e()},next:function(){k();w()},stop:function(){k()},getPos:function(){return c},getNumSlides:function(){return i},kill:function(){k();f.style.width="";f.style.left="";var e=l.length;while(e--){var t=l[e];t.style.width="";t.style.left="";if(o.transitions)g(e,0,0)}if(o.addEventListener){f.removeEventListener("touchstart",S,false);f.removeEventListener("webkitTransitionEnd",S,false);f.removeEventListener("msTransitionEnd",S,false);f.removeEventListener("oTransitionEnd",S,false);f.removeEventListener("otransitionend",S,false);f.removeEventListener("transitionend",S,false);window.removeEventListener("resize",S,false)}else{window.onresize=null}}}}});
</script>
<script>
var elem = document.getElementById("mySwipe");
window.mySwipe = Swipe(elem, {
widthOfSiblingSlidePreview: "50px",
continuous: false
// startSlide: 4,
// auto: 3000,
// continuous: true,
// disableScroll: true,
// stopPropagation: true,
// callback: function(index, element) {},
// transitionEnd: function(index, element) {}
});
</script>
</body>
</html>
Cyberlane commented
@gauravAtProptiger I am working on a fix, if I pushed it to another branch, would you be willing to test it? There are a number of things I would ultimately like to change in the code for this library, but since I am not the owner, I will just do some small patches for now.