[Resolved] Home Element Slider Smartslider 3

[Brad]

Hi – I’ve tried following similar threads and have had some success. The obvious issue is getting the background overlay to match the depth of the slide on any given screen size. Although this maybe a difficult fix as the depth of hero is depth of the hero background is decided by the % amount of padding. Creating custom darker slides might be the answer or just better slider height consistency.

Thanks!

Markup I’m using is as follows:

[smartslider3 slider=2]

<h1 class=”page-header”>THE HOME OF COMOX VALLEY BOYS BASKETBALL</h1>
<h2>COURENTAY – COMOX – CUMBERLAND</h2>
SEE SCHEDULE

and CSS..

/* HomePage Slider v1 */
.slider-hero {
position: relative;
}
.background-slider {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -1;
}

[David]

Hi there,

it is quite complicated – but instead of absolutely positioning the slider you leave that in situ and absolutely position your content over it, that way the header element takes the size of the slider. This topic here will give you some guidance:

https://generatepress.com/forums/topic/add-an-slider-to-home-page-header-aspire/

[Brad]

Thanks. I ended up absolute positioning the text on the side, used the sliders overlay and a bunch of sloppy conditional media queries to keep the height of the slide and text from overlapping. Works for the most part!

Maybe Generate Press simple slider in the near future 🙂

[David]

Looks good 🙂 Glad you got it resolved.

[Author]

Posts