Can't swipe in product image slider between arrows on mobile

[igbizz]

Hey,

I'm having an issue with my product image slider on mobile.

You can swipe between images with your finger, but only if you swipe above or below arrows. If you try to swipe between the arrows (marked as red), nothing happens.

I suspect the issue might be related to this CSS I’m using for the slider buttons:
.slider-buttons {
justify-content: space-between;
}

My guess is that justify-content: space-between; is causing the arrows to block swipe gestures in that area.

My store: https://glimzprev.myshopify.com/products/sunglasses 

password: man

Thanks in advance for the help!

[Moeed]

Hey @igbizz 

Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.

Best Regards,
Moeed

[igbizz]

My store: https://glimzprev.myshopify.com/products/sunglasses 

password: man

[tim]

Not exactly, but you're right -- the .slider-buttons element "floats" above the slides and prevents your swipes from reaching the slider.

It is fixable, you can add this to the "Custom CSS" setting of the section:

.product .slider-buttons {
  z-index: initial;
  transform: none;
  top: calc(50% - 22px);
}

.product .slider-buttons button {
  z-index: 10;
}

[igbizz]

Thanks!

I'ts weird though because it works in devtools on computer, but on mobile it still has the same problem?

I have even tried putting important; on all of them.

[igbizz]

I managed to fix it.