using widthOfSiblingSlidePreview property not work properly #24

adambatso · 2019-01-13T08:58:25Z

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 · 2019-01-21T12:46:55Z

someone checked it ?

ShaneRosse · 2019-02-06T22:35:04Z

@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 · 2019-02-06T22:35:51Z

@Cyberlane I noticed you created the original PR maybe you have some advice for us.

wanCheng7 · 2019-04-26T01:20:44Z

I have the same issue,. Has someone solved?

Cyberlane · 2019-05-01T14:58:19Z

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 · 2019-05-01T17:30:29Z

@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 · 2019-07-08T09:47:32Z

I'm facing the same issue. Has anyone found the solution?

Cyberlane · 2019-07-08T21:55:24Z

@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 · 2019-07-09T06:50:59Z

@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 · 2019-07-10T20:25:25Z

@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 · 2019-07-10T21:03:49Z

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.

Cyberlane mentioned this issue Jul 10, 2019

Fixes for widthOfSiblingSlidePreview #33

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

using widthOfSiblingSlidePreview property not work properly #24

using widthOfSiblingSlidePreview property not work properly #24

adambatso commented Jan 13, 2019 •

edited

Loading

adambatso commented Jan 21, 2019

ShaneRosse commented Feb 6, 2019

ShaneRosse commented Feb 6, 2019

wanCheng7 commented Apr 26, 2019

Cyberlane commented May 1, 2019

Cyberlane commented May 1, 2019

gauravAtProptiger commented Jul 8, 2019

Cyberlane commented Jul 8, 2019

gauravAtProptiger commented Jul 9, 2019 •

edited

Loading

Cyberlane commented Jul 10, 2019

Cyberlane commented Jul 10, 2019

using widthOfSiblingSlidePreview property not work properly #24

using widthOfSiblingSlidePreview property not work properly #24

Comments

adambatso commented Jan 13, 2019 • edited Loading

adambatso commented Jan 21, 2019

ShaneRosse commented Feb 6, 2019

ShaneRosse commented Feb 6, 2019

wanCheng7 commented Apr 26, 2019

Cyberlane commented May 1, 2019

Cyberlane commented May 1, 2019

gauravAtProptiger commented Jul 8, 2019

Cyberlane commented Jul 8, 2019

gauravAtProptiger commented Jul 9, 2019 • edited Loading

Cyberlane commented Jul 10, 2019

Cyberlane commented Jul 10, 2019

adambatso commented Jan 13, 2019 •

edited

Loading

gauravAtProptiger commented Jul 9, 2019 •

edited

Loading