Archived topic
Parallax fullscreen Slider
7 replies · Started by Yannick on December 27, 2017
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
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 :)
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
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.
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... :D ) 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:
https://www.screencast.com/t/tmoNvu5Q
https://www.screencast.com/t/wiPPAA8l
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.
Thank you Tom!!! I can't thank you enough and I'm always impressed by your knowledge and your patience :)
No problem! :)
