How do you cover a slider with a div?

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?

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).

I also tried using the custom code from this post to prevent a tap on mobile from stopping autoplay, but unfortunately it didn’t work.

Why not use javascript or jquery to fade the images, without using the slider? Might be easier and would give you more control.

I’m not familiar with either, is it simple enough to figure out? Or could I find some premade code to accomplish this?

Hey @lifescansdarkly , have you tried this structure to have the div overlap?

Screen Shot 2021-11-08 at 4.26.32 PM

Parent Slider Container is set to position: relative and Overlapping Div is set to position: absolute-full with z-index: 3

1 Like

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.