I’m running into a problem that’s apparently pretty common: I’m using a slider to have a series of images fade into each other, and I’ve deleted the nav arrows & buttons so that it just autoplays. It’s all well and good on desktop, but if you tap the images on mobile, it stops the sequence from playing. There’s a very good chance of someone inadvertently tapping an image as they scroll, so I need some way of stopping that.
It looks like this question was answered already, problem is I can’t figure out how make the solution work. Most people looking to cover a slider with a div are using sliders in the background (covering the whole body), but my sliders are inside div boxes. So if I try to create a “cover” div and change the position to “fixed” or “absolute,” it shoots up to the top of the page and no longer covers the slider.
So two questions: one, is there a way to make a “cover” div that fits the boundaries of the slider? The slider is responsive, so I’d need the div to be responsive as well. Or two, is there a better way to go about making an image fade into another besides a slider?
Thanks!
Update: still plugging away at this with no success. I’ve tried all sorts of iterations using relative positioning, negative margins, etc.
The issue I keep running into is that the slider has responsive height (the image width scales to the screen resolution, which impacts the image height), and without the height being responsive, I could have a lot of dead space below the slider; not a clean solution. But I can’t find a way to make the height of my overlay/cover div responsive in turn (setting height to 100% just makes it a horizontal line).
Is there any way to make a div that can just cleanly cover the slider 100%, and respond to changes in height and width accordingly?
I tried going the animations route but there doesn’t seem to be any way to make images that fade into one another - without, of course, overlaying images on top of each other, which then brings us back to the same problem I’m having now (responsive overlays).
