Same issue. Set touchEnabled: false for desktop clients as temp solution.

Update: check this #1240 (comment)

Same issue.

Replace this:

if (slider.settings.touchEnabled && !slider.settings.ticker) { initTouch(); }

With this:

if (navigator.maxTouchPoints > 0) { initTouch(); }

This should detect if the device viewing the slideshow has a touch screen before loading support for touch.

Note: setting touchEnabled to false didn't work for me and it also turns off all touch support.

Replace this:

if (slider.settings.touchEnabled && !slider.settings.ticker) { initTouch(); }

With this:

if (navigator.maxTouchPoints > 0) { initTouch(); }

This should detect if the device viewing the slideshow has a touch screen before loading support for touch.

Note: setting touchEnabled to false didn't work for me and it also turns off all touch support.

But now you can't swipe images by mouse. It seems we have to choose now - clicking or swiping in newest Chrome. Not both 😕

Accorrding to information written above, a have added to initial options of all my sliders next code:

touchEnabled : (navigator.maxTouchPoints > 0) - that enable swipe functions on mobile devices and prevent using mouse swipe for desctop browser

Accorrding to information written above, a have added to initial options of all my sliders next code:

touchEnabled : (navigator.maxTouchPoints > 0) - that enable swipe functions on mobile devices and prevent using mouse swipe for desctop browser

Still can't click on chrome mobile...

Same here with Chrome 73.0.3683.86 (Official Build) (64 bits)

Same here. touchEnabled: false seems to fix this on desktop though.

Getting the following 'Violation' from the console...

[Violation] Added non-passive event listener to a scroll-blocking 'touchmove' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952

But if you try adding { passive: true } , like the message suggests, to any of the touch events the links will work but it'll break the slider since all of the functions used in touch events use preventDefault().

For more info

I have created a code pen with a link in the first slider that shows this problem (link can't be clicked in latest Chrome):

https://codepen.io/smohadjer/pen/VROdJE

Accorrding to information written above, a have added to initial options of all my sliders next code:

touchEnabled : (navigator.maxTouchPoints > 0) - that enable swipe functions on mobile devices and prevent using mouse swipe for desctop browser

Adding this disables touch support in iPhone too!

What I have found is that if you put the link as a first child inside the slide and you have only one link there, then it works just fine with the original setting. Sometimes you have to click twice but both on desktop and phone the link works in the latest Chrome - see http://newhow.archi/ :-)

@vsindylek That's not going to help me, we have dynamic content inside slides coming from CMS.

The problem in Chrome seems to be related to use of setPointerCapture() in bxslider. When I comment out the following snippet in jquery.bxslider.js links start working in Chrome and touch capabilities are also preserved both on desktop and mobile.

if (slider.viewport.get(0).setPointerCapture) {
	slider.pointerId = orig.pointerId;
	slider.viewport.get(0).setPointerCapture(slider.pointerId);
}

But this is not a perfect solution since if you drag slides with mouse on desktop Chrome and your mouse moves outside slider boundary you may end up seeing parts of two slides at the same time.

Replace this:

if (slider.settings.touchEnabled && !slider.settings.ticker) { initTouch(); }

With this:

if (navigator.maxTouchPoints > 0) { initTouch(); }

This should detect if the device viewing the slideshow has a touch screen before loading support for touch.

Note: setting touchEnabled to false didn't work for me and it also turns off all touch support.

For me this seems to fix the issue.
Checkout thefastpark.com

@haseebtirur Be careful with that, you will loose touch functionality on iPhone since Safari doesn't support maxTouchPoints. See browser support for it here: https://developer.mozilla.org/en-US/docs/Web/API/Navigator/maxTouchPoints

I might have found a reliable fix for this. The problem happens in Chrome because it doesn't fire a click event after pointerup unlike other browsers such as Firefox. This is because bxslider in onTouchStart function sets slider viewport as target of all succeeding pointer events. Now if you have a link inside a slide when you click the link the target of pointerdown is not slider viewport, but the link content and since this target is different from pointerup target (which is slider viewport), then Chrome doesn't fire a click. The solution is to make sure pointerup fires on the same element as pointerdown so that Chrome fires a click. So we need to refactor this snippet:

        if (slider.viewport.get(0).setPointerCapture) {
          slider.pointerId = orig.pointerId;
          slider.viewport.get(0).setPointerCapture(slider.pointerId);
        }

to this:

        if (e.target.setPointerCapture) {
          slider.pointerId = orig.pointerId;
          e.target.setPointerCapture(slider.pointerId);
        }

This solved the problem for me in Chrome without loss of any functionality in any browser or mobile device.

I might have found a reliable fix for this. The problem happens in Chrome because it doesn't fire a click event after pointerup unlike other browsers such as Firefox. This is because bxslider in onTouchStart function sets slider viewport as target of all succeeding pointer events. Now if you have a link inside a slide when you click the link the target of pointerdown is not slider viewport, but the link content and since this target is different from pointerup target (which is slider viewport), then Chrome doesn't fire a click. The solution is to make sure pointerup fires on the same element as pointerdown so that Chrome fires a click. So we need to refactor this snippet:

        if (slider.viewport.get(0).setPointerCapture) {
          slider.pointerId = orig.pointerId;
          slider.viewport.get(0).setPointerCapture(slider.pointerId);
        }

to this:

        if (e.target.setPointerCapture) {
          slider.pointerId = orig.pointerId;
          e.target.setPointerCapture(slider.pointerId);
        }

This solved the problem for me in Chrome without loss of any functionality in any browser or mobile device.

I tried this solution and tested on mobile (iphone X with chrome) and I cannot slide left or right. On Desktop, when I slide right or left, the click event is fired automatically.

@lorguzman I just installed Google Chrome on iOS 12.1.2 and sliding works, but I have noticed issues in Edge/IE11, so this solution is still not good enough.

Just tested this on Chrome 74.0.3729.28 with the patch applied from above.
Mobile is draggable now but links are fired as soon as you attempt to drag on desktop.

@smohadjer 's possible solution above didn't cover all the bases for me. Links were not clickable in Safari on iPhone X, iPad Pro, iPad Air... so on. Tested in BrowserStack. Although I appreciate his work so thank you for that suggestion.

Outside of doing a bunch of conditional checking for user agents which still isn't super reliable or checking for like modernizr.touch which also isn't great. I have decided to just disable touch for right now and try to buy some time to keep poking at this or hopefully someone smarter than me finds the solution.

@SpatialAnomaly I wouldn't rely on BrowserStack, I tested on actual devices (both iOS and Android phones) and links worked there, but as I said IE11/Edge have problem with this, so we need a better solution. For now I'm going to use my very first suggestion and simply comment out the line with setPointerCapture(). Did you try that or have any problem with it?

#1240 (comment)

Hi Guys,

Here is the workaround I found:

First of all you need to move the "slider.hasMove = true;" to different location, so your code in the onTouchMove function needs to be something like this:

  // Remove this as we don't want to mark it a movement if it's not within the minimum range
  //slider.hasMove = true;

  // x axis swipe
  if ((xMovement * 3) > yMovement && slider.settings.preventDefaultSwipeX) {
    e.preventDefault();
    slider.hasMove = true;
  // y axis swipe
  } else if ((yMovement * 3) > xMovement && slider.settings.preventDefaultSwipeY) {
    e.preventDefault();
    slider.hasMove = true;
  }

And now the code is already there for the click to work just for some reason Chrome doesn't trigger the click element trough jQuery (didn't dig any further just for this) but it does work with the vanila click method in the onTouchEnd like this:

    try {
      slider.originalClickTarget.click();
    } catch(error) {
      $(slider.originalClickTarget).trigger({
        type: 'click',
        button: slider.originalClickButton,
        buttons: slider.originalClickButtons
      });
    }

I used try and catch as they say this click method is not that supported on android so in that case we fall back to the original jquery method.

I tested this on Chrome, Firefox, Android and seems to be working just fine without breaking anything.

Regards,
Julius

Tried the fix as suggested Julius and now swiping on firefox desktop opens the link on swipe.

I know it's not a good solution, but BxSlider 4.2.1 works fine with the latest version of Chrome as far as I tested.

@keiichi-takio Did you test this on any mobile platforms as well?

@keiichi-takio Did you test this on any mobile platforms as well?

Actually I rolled back to v4.1.2 and it seems to be working for the most part. Not the greatest, and also not 100% sure why that would be ok versus a later version.

Also had to roll back to 4.1.2. Sadly, I hope soon we will find a better solution

In some cases, for example, when using a system like Wordpress or any plugin that does not have direct access to its code, the following code can be added as a temporary solution.
The code takes the address from the link and directs it directly parallel to the problem resulting from the touch event.

(function($){
  $(document).ready(function(){
	if(navigator.maxTouchPoints === 0) {
            $('.bx-viewport a').on("mousedown", function(e){
                var linkUrl = $(this).prop('href');
                window.location.href = linkUrl;
            });
        }
  });
})(jQuery);

I've been used "onclick" instead of href and It has worked for now.

For the navigation I did something like that:

$('#infoPrev').click(function(event) {
slideHome.goToPrevSlide();
event.preventDefault();
});
$('#infoNext').click(function(event) {
slideHome.goToNextSlide();
event.preventDefault();
});

I've hated to do this, but for the sake of usability, for now, I've abandoned BXslider and have switched to Swiper.

Easy Solution (bxSlider v4.2.12)

PROBLEM:
'setPointerCapture' on 'Element': No active pointer with the given id is found.

SOLUTION
ADD: if (slider.pointerId === undefined){ return; }
at line 1095 in the "onTouchStart" FUNCTION in jquery.bxslider.js

DONE

I might have found a reliable fix for this. The problem happens in Chrome because it doesn't fire a click event after pointerup unlike other browsers such as Firefox. This is because bxslider in onTouchStart function sets slider viewport as target of all succeeding pointer events. Now if you have a link inside a slide when you click the link the target of pointerdown is not slider viewport, but the link content and since this target is different from pointerup target (which is slider viewport), then Chrome doesn't fire a click. The solution is to make sure pointerup fires on the same element as pointerdown so that Chrome fires a click. So we need to refactor this snippet:

        if (slider.viewport.get(0).setPointerCapture) {
          slider.pointerId = orig.pointerId;
          slider.viewport.get(0).setPointerCapture(slider.pointerId);
        }

to this:

        if (e.target.setPointerCapture) {
          slider.pointerId = orig.pointerId;
          e.target.setPointerCapture(slider.pointerId);
        }

This solved the problem for me in Chrome without loss of any functionality in any browser or mobile device.

Omg, thank you. Couldn't for the life of me figure out what was going on and tried different solutions proposed all over the internet. This one seems to be working both on mobile and in chrome. Thanks a ton

Another go at a fix – works for me:

Replace e.preventDefault(); in the function onTouchStart() with

if( ! e.target.href ) {
    e.preventDefault();
}

This enables tapping on links while keepint the touch behaviour.

mcnolsen is very good answer, make it correct answer for this

@philsav that solution - originally provided by @smohadjer - was later confirmed as not working in certain cases so I'd be careful with this. I've since abandoned bxSlider in favour of Slick in case anyone is looking for alternatives.

Slick is nice, but I think swiper provides the robustness that bx had in the past. a little more bulk, but I foujnd that robustness has helped.

I started with Swiper (at least in part due to your recommendation back in October) but had problems getting the carousel to work so I switched to Slick. But.... since you posted again (and Slick's touch support seemed a little flaky) I've switched back to Swiper and all is now working. So thanks for making me reconsider!

Another go at a fix – works for me:

Replace e.preventDefault(); in the function onTouchStart() with

if( ! e.target.href ) {
    e.preventDefault();
}

This enables tapping on links while keepint the touch behaviour.

This worked for me. Thanks.

Can someone share a JS file that works? With all the fixes? I don't want to edit the code myself.

Can someone share a JS file that works? With all the fixes? I don't want to edit the code myself.

Try this version, we modded it last Oct and have had no complaints yet, thats about 1M users of our WP plugin.
https://gist.github.com/Pross/0b3acb59ce3e27ce71fcbbaa29a6cc76

Can someone share a JS file that works? With all the fixes? I don't want to edit the code myself.

Try this version, we modded it last Oct and have had no complaints yet, thats about 1M users of our WP plugin.
https://gist.github.com/Pross/0b3acb59ce3e27ce71fcbbaa29a6cc76

I dont think that has the function for onSliderLoad or onAutoChange... two essential functions for me.

Can someone share a JS file that works? With all the fixes? I don't want to edit the code myself.

This is the version that is working for me. Thanks.
https://gist.github.com/sdomox/7dffa10c3ee9fb745b40acd33295f657

Another go at a fix – works for me:

Replace e.preventDefault(); in the function onTouchStart() with

if( ! e.target.href ) {
    e.preventDefault();
}

This enables tapping on links while keepint the touch behaviour.

Since my last solution stopped working in Chrome 80, I need to expand it a little:

if( ! e.target.href ) {
    e.preventDefault();
} else {
    e.target.trigger( 'click' );
}

This is the version that is working for me. Thanks.
https://gist.github.com/sdomox/7dffa10c3ee9fb745b40acd33295f657

can confirm that this has solved my problem (for now anyway)

Links in Chrome featured slider posts not working although ok with other browsers.
Not sure where this fix goes - in the theme I am using I have
jquery.bxslider.min.js
or where do I find the place to change it?

@charr88 We'd need to know more about your environment to answer that. Sounds like it's probably a CMS of some kind, Wordpress, Concrete5, Joomla... etc. Which theme package?

I am using Wordpress 5.4.2 with Theme Junkie's Postboard - and have check that the Chrome version (on Windows 10) is the latest.

I wrap my link text minimum with an <span> element. <a href="">link</a> is prevented or something else. <a href=""><span>link</span></a> or also <a href=""><img src=""></a> works well for me.

But not on touche devices. Additional I add touchEnabled: 'ontouchstart' in window || navigator.msMaxTouchPoints ? false : true,

If someone also has a problem that the slider on the last slide jumps sharply from the first to the last, then please use this example to fix this problem, and this also solves the problem of non-clickability.

if( ! e.target.href ) {
e.preventDefault();
}

if (e.type !== 'touchstart' && e.button !== 0) {
return;
}

Just wanted to leave a note that in Dec 2020 we had this problem come back despite applying other fixes that worked in the past. The symptoms were on desktop as follows:

You can swipe the carousel left or right with a mouse, but clicking on any carousel item would ignore the click.

We applied the fix here:

https://github.com/stevenwanderski/bxslider-4/pull/1255/files

And can confirm it restored the ability to left click on carousel items.

I tested the fix on Chrome Version 87.0.4280.88.

It also works fine in Edge Version 87.0.664.66 and Firefox 84.0, although in Desktop Firefox the swipe functionality does not work.

All tests were done in Desktop.

I hope the same fix helps others.

Just replace following line:
if (e.type !== 'touchstart' && e.button !== 0) {

With this code:
if ((e.type !== 'touchstart' && e.button !== 0) || e.target.nodeName === 'A') {

Another solution I've found is to change line 1096 - 1100 from this:

if (slider.working) { etc

to this:

if (slider.working || e.target.localName == 'a') { if (e.target.localName != 'a') { e.preventDefault(); slider.controls.el.removeClass('disabled'); } }

Hello,
I'm facing the same issue. I done an update from 4.2.12 to 4-4.2.15, and loose all the slider :) . But the point is, do this update fix the issue or do I need to apply a patch after ?

Thanks

예를 들어 Wordpress와 같은 시스템이나 해당 코드에 직접 액세스할 수 없는 플러그인을 사용하는 일시적인 경우에는 다음 코드를 추가할 수 있습니다. 이 코드는 링크에서 주소를 긴급한 사건으로 인해 발생하는 문제와 직접적으로 통화로 연결합니다.

(function($){
  $(document).ready(function(){
	if(navigator.maxTouchPoints === 0) {
            $('.bx-viewport a').on("mousedown", function(e){
                var linkUrl = $(this).prop('href');
                window.location.href = linkUrl;
            });
        }
  });
})(jQuery);

thanks

For version v4.2.1d just add this in your jquery.bxslider.js:
if (slider.viewport.get(0).setPointerCapture) {
slider.pointerId = orig.pointerId;
slider.viewport.get(0).setPointerCapture(slider.pointerId);
}
after (line 1130-1133)
if (e.target.setPointerCapture) {
slider.pointerId = orig.pointerId;
e.target.setPointerCapture(slider.pointerId);
}
And this is crossbrowser solution. Works fine in Chrome, Opera, Firefox, Edge.
Thanks men who commented there earlier. This solution is based on their variant.

This works for me, is force the link event after touch.

$('.bxslider').on('touchend', function(event) {
var targetElement = event.target;
if (targetElement.tagName.toLowerCase() === 'a') {
window.location.href = targetElement.href;
}
});