[Resolved] Adding Slider in Element or Home Hero

[kadek]

Dear Team,

I Would like to add slider in my website using the peak site library.
I follow tutorial https://generatepress.com/forums/topic/insert-background-images-slider-effect-in-page-hero-element-without-plugin/ but no luck. The text i put below the image, not in front of it.

Please Advise,

Best Regards,

[David]

Hi there,

so as your site is now.
In the Header Element > Element Classes field remove the hero-title class and add hero-overlay. Leave your HTML as is and then add this CSS:

.hero-overlay .inside-page-hero {
    position: relative;
}

.hero-overlay .hero-title {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
}

You may want to consider making sure all your slider images are the same size to stop the vertical movement of the content.

[kadek]

Hi David,

Thanks. It Works!
Now how to remove the image title from the slide?

This is GP related issue or the slider plugin issue?

Best Regards,

Kadek

[Tom]

Hi there,

If you’re not able to turn it off via the plugin settings, you can use this CSS:

.msacwl-gallery-caption {
    display: none;
}

[kadek]

Dear Tom,

Thanks, it’s works!

Best Regards,

Kadek

[Tom]

You’re welcome 🙂

[Author]

Posts