jsor / jcarousel

Riding carousels with jQuery.
https://sorgalla.com/jcarousel/
MIT License
1.99k stars 736 forks source link

Scrolling does not work on Chrome iOS #775

Closed estockwellalpert closed 8 years ago

estockwellalpert commented 9 years ago

The carousel does not scroll on Chrome on my iPhone. It works on Safari and on all desktop browsers, but on Chrome, the left/right arrows do nothing; the image does not move.

estockwellalpert commented 9 years ago

Has anybody been made aware of this issue?

jsor commented 9 years ago

I'm not aware of this and can't reproduce this. I tested the carousel on http://sorgalla.com/jcarousel/ and it works as expected.

estockwellalpert commented 9 years ago

Could you please look at it on my site http://qa.msdonline.com then and let me know what's wrong with it? The left/right arrows are hidden but it has pagination buttons and I added swipe functionality. It works on Safari but not Chrome on the iPhone.

estockwellalpert commented 9 years ago

Actually, this page http://54.144.148.151/ is the most recent version of my site. I was using custom pagination but I replaced it with jcarousel's pagination, but it still does not work.

jsor commented 9 years ago

Yes, indeed, i checked it in Chrome on iOS and something seems to be wrong. Unfortunately i wasn't able to debug it. So, unfortunatly i can't help much here, sorry.

Blainegunn commented 9 years ago

I just patched it like so:

    if(window.chrome){
      var carouselBox = $('.jcarousel-box');
      var leftRight = 0;
      document.getElementsByClassName('jcarousel-next')[0].onclick = function(){
        if(leftRight < -550){
          return;
        }else{
          leftRight = leftRight - 110.2;
          carouselBox.animate({
            left: leftRight
          }, 500);
        }
      };
      document.getElementsByClassName('jcarousel-prev')[0].onclick = function(){
        console.log(leftRight);
        if(leftRight > -110.2){
          return;
        }else{
          leftRight = leftRight + 110.2;
          carouselBox.animate({
            left: leftRight
          }, 500);
        }
      };
    };