adambatso
commented
5 years ago someone checked it ?
Open adambatso opened 5 years ago
adambatso
commented
5 years ago someone checked it ?
ShaneRosse
commented
5 years ago @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
5 years ago @Cyberlane I noticed you created the original PR maybe you have some advice for us.
wanCheng7
commented
5 years ago I have the same issue,. Has someone solved?
Cyberlane
commented
5 years ago 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
5 years ago @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
5 years ago I'm facing the same issue. Has anyone found the solution?
Cyberlane
commented
5 years ago @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
5 years ago @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>
@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.
Cyberlane
commented
5 years ago I have created a PR which should solve this issue here => #33
If somebody is willing to test it to confirm, I would be happy to merge it into master.
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...