How to delay opening link when navigation arrow gets disabled!?

[Voodoopupp]

Hi,

is there any way to avoid the behaviour that a link on the last slide is directly working after the navigation arrows get disabled and if the user tries to use the arrow again? Actually this leads to a lot of unwanted forwardings to a site the customer would not really like to visit...

Actual behaviour can be seen here:
https://codepen.io/voodoopupp/pen/QWzVbqG

If you here just click on the arrow to slide to the next slide and reach the last slide, the navigation arrow gets disabled immediately. And the link on the image behind the navigation gets working on the same time.

So if a customer is trying to click once again on the (disabled) arrow to reach next slide, because he doesn't recognize he is already on the last slide, he directly is forwarded to the link of the image....

Is there any way to disable the button but still the area around it is not using the link of the image behind the navigation arrow? Or to delay this function, so that the image link is just useable after 1 second or so?

best regards
Voodoopupp

[james0r]

@Voodoopupp You can do this with simple CSS.

By default, when a navigation arrow is in disabled state, the element receives the swiper-button-disabled class which includes the CSS property value

pointer-events: none;

This is a problem for you because it allows the click to be received by the link below it.

Add

.swiper-button-disabled {
pointer-events: all !important;
}

to once again receive click by the navigation arrow.

Demo

[Voodoopupp]

@james0r

Thanks for that - was not familiar with this css Property - exactly what I was searching for :)