Question

Hi great people of stackoverflow,

I have a problem with my input box where I am unable to click on it meaning that I cannot type anything into it.

FMSSB.COM

The input box is in the 8th slide. Use your mouse to navigate to the 8th slide.

I used 2 jquery plugins which are as shown below.
iDangero.us Mobile Touch Slider
Malibu Custom Scrollbar

I’ve also set the z-index to 1000 which should place it above the rest but it still does not work.

However, when you keep pressing tab repetitively, you can reach the input box and enter value in it.

I hope I got my message across.

Thanks.

P.S. Do note it looks weird on a large screen because I don’t have the proper styling for bigger window screens. So far it works on a 1280px width screen.

Answer 1

It is because of Swiper

The Swiper 1.3 - Mobile Touch Slider would make everything to be untouched / unclickable. So, you need to set the property, simulateTouch to false. This will allow the Swiper to ignore mouse events.

In all your .swipe() functions, give this parameter.

simulateTouch: false

When you initiate Swiper, use something like this:

var mySwiper = new Swiper('.swiper-container', { 
    speed:750, 
    mode:'vertical',
    simulateTouch: false
});