Black Friday Sale! Get up to $40 off GP Premium!Learn more

[Resolved] Parallax fullscreen Slider

Home Forums Support Parallax fullscreen Slider

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #457728
    Yannick

    Hi,
    with the page header add-on it is easy to set a fullscreen background image with parallax effect.
    I’m trying to achieve the same with a slider instead of the image but till now I was not able to find a solution. Maybe someone can help me.

    1) I tried things like this:
    in Page Header:
    <div class="slide">[smartslider3 slider=7]</div>

    and in SimpleCSS:

    .slide {
      position: relative;
      transform: translateZ(-1px) scale(1);
      z-index: -1;
    }

    Best wishes
    Yannick

    GeneratePress 2.0.1
    GP Premium 1.5.6
    #457966
    Tom
    Lead Developer
    Lead Developer

    Hi Yannick,

    Typically you would have to use a setting within the slider to force it to be full screen. I believe Smart Slider has that option, although it may be in the pro version.

    Let me know 🙂

    #457982
    Yannick

    Hi Tom,
    thank you. I will get the Smart Slider Pro version and the fullscreen issue should be solved.

    The code I posted in my first post was for trying to create the parallax effect for a slider in page header content, like it is possible in your page header plugin for the background image. I would like to have the slider in the page header content in a layer behind my actual page content, and when I scroll down it scrolls slower then the page content. Is this somehow possible?

    Like this page: http://tortus-copenhagen.com

    #458192
    Tom
    Lead Developer
    Lead Developer

    That looks like a javascript parallax feature built into those background images. It may be a feature within the plugin, but you’ll definitely want to confirm that.

    There’s tons of slider plugins out there, so it may be worth looking around a bit for one with good reviews and all of the specific features you’re looking for.

    #458244
    Yannick

    Sorry Tom for asking again and again but I don’t really understand right now.

    For the fullscreen I understand it is a Slider Plugin needed which allows a fullscreen option unless I would find (which I can’t… 😀 ) a Slider Plugin with a less “strong” coding so I could change it simply via CSS. Is this right?

    The parallax effect for a slider is also not possible, only with a javascript feature?
    For images it seems to be “quite” easy with CSS and your page header plugin makes it even easier https://generatepress.com/downloads/generate-page-header/

    So I was hoping that it is somehow possible to do something like this:
    Bildschirmfoto 2017-12-28 um 08.32.40.png
    Bildschirmfoto 2017-12-28 um 08.34.20.png

    #458995
    Tom
    Lead Developer
    Lead Developer

    That’s correct – you could force any slider to be full screen, but exactly how depends on the markup and styling of the slider itself.

    The Page Header module uses specific javascript for the parallax feature – it wouldn’t work on the individual slides within a third party slider plugin. You would need javascript specific to the slider elements – most pro versions should have that feature as well.

    #459357
    Yannick

    Thank you Tom!!! I can’t thank you enough and I’m always impressed by your knowledge and your patience 🙂

    #459740
    Tom
    Lead Developer
    Lead Developer
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.