Thank you for getting in touch with us. My name is Attila and I'm happy to assist you today. I appreciate your patience while we've been working towards your ticket.
Judging from the errors on your site we believe that the problem is going to be related to an image preloader/optimizer/lazy loader on your installation, that is interfering with the slider. We'd recommend to temporary disable other plugins and switch to a default WP theme to see if that solves the issue. If it does, you can turn them back one by one to see which one is interfering. If you are using Jetpack, we'd recommend to start with that. We had several issues with it in the past, as its lazy load option interferes with the slider's content, preventing it from loading.
Yes, you can create a slider like that. You will simply need to select the fullsized layout with hero scene mode, and apply a bottom to top slide transition.
Now I have a nice Slider but it doesn´t fit to the Mobile screen. Where can I find settings just for the mobile devices? Or do i need to write a custom CSS for each slide? I am not an expert in CSS... Is there any code which I can use to fit the Images and Fontsize for the mobile devices?
Since version 6 of LayerSlider you have the option to display layers only on certain devices (desktop, mobile, tablet). This feature gives you the option to create separate layers and layouts for mobile, tablet and desktop view in the same slide, and only show them on the required device. Furthermore, you also have the option to set a minimum font size for texts on mobiles.
Additionally to the device specific layers, you could also build two sliders with different sizes or with different content for desktop and mobile, include them both to the site, and only display them (using the Hide over and Hide under options) on the required device. This gives you more control, but requires more work.
I tried the first soultion and for now it works for me. But I struggle with the size of the layers on the mobile version.
The space between the different layer is to big. I canged the background size to auto but it didn´t help. I can´t find another option to change the size or the space between the different layers?
Now I see that the heading of the second slide is not above the image anymore. It is in the middle of the Image. Although the margin to the top is different for the Image and the header. When I use the Preview for mobile device in the Customizer it looks ok. But on my Iphone it doesn´t show up this way?
You can set the space between the layers by repositioning them in the editor. With the device specific layers you can use different positions for the mobile layers, that are closer to each other, and leave the desktop layers intact.
If you want your background image to fill the slider completely you can use Size -> Cover/Stretch. Or if it's a layer, you can just simply enter 100% to the Width and Height fields. The layers will always be on top of the slide background image.
I'd recommend importing and checking on the Interactive demo slider. It showcases the device specific layers feature.
I think I didn’t describe my problem correctly. If you see the start page of my homepage on the mobile phone there is a big space between the different sliders (not layers 🙈). How can I change the space in between? On my notebook it looks fine. There is no space between the sliders.
And still the second slider looks fine in the preview but on my mobile phone the text is not beside the image, but in front of the image...
The sliders are also sitting next to (or rather on top of) each other on mobiles too. There is no gap between them.
The reason why it looks like that is because the content is getting smaller and more centered on small screens, due to the sliders' layout, so there is more empty space inside the sliders.
You can remedy this with the mentioned device specific layers feature. Basically, you create two sets of layers, and position the mobile layers more spread out closer to the sides of the slider, or simply make them larger.
For me the text are beside the image and not on top of it, both on mobile and desktop. But you can also adjust this a little with the mentioned method.
Hello,
I downloaded a Layer Slider Theme and adjusted it. But my Images are not shown. Just the Text and the Background of the Slider.
I have another question, is it possible to design a fullscreen vertical Slider like this one on the follwoing homepage: https://www.madymorrison.com/
Thanks in advance for solving the problem.
Hello Rieke,
Thank you for getting in touch with us. My name is Attila and I'm happy to assist you today. I appreciate your patience while we've been working towards your ticket.
Judging from the errors on your site we believe that the problem is going to be related to an image preloader/optimizer/lazy loader on your installation, that is interfering with the slider. We'd recommend to temporary disable other plugins and switch to a default WP theme to see if that solves the issue. If it does, you can turn them back one by one to see which one is interfering. If you are using Jetpack, we'd recommend to start with that. We had several issues with it in the past, as its lazy load option interferes with the slider's content, preventing it from loading.
Yes, you can create a slider like that. You will simply need to select the fullsized layout with hero scene mode, and apply a bottom to top slide transition.
Thank Attila,
Jetpack was the problem.
Now I have a nice Slider but it doesn´t fit to the Mobile screen. Where can I find settings just for the mobile devices? Or do i need to write a custom CSS for each slide? I am not an expert in CSS... Is there any code which I can use to fit the Images and Fontsize for the mobile devices?
Thanks a lot for helping me!
Rieke
Thank you for the feedback.
Since version 6 of LayerSlider you have the option to display layers only on certain devices (desktop, mobile, tablet). This feature gives you the option to create separate layers and layouts for mobile, tablet and desktop view in the same slide, and only show them on the required device. Furthermore, you also have the option to set a minimum font size for texts on mobiles.
Additionally to the device specific layers, you could also build two sliders with different sizes or with different content for desktop and mobile, include them both to the site, and only display them (using the Hide over and Hide under options) on the required device. This gives you more control, but requires more work.
Thanks a lot!
I tried the first soultion and for now it works for me. But I struggle with the size of the layers on the mobile version.
The space between the different layer is to big. I canged the background size to auto but it didn´t help. I can´t find another option to change the size or the space between the different layers?
Thanks you!!
Now I see that the heading of the second slide is not above the image anymore. It is in the middle of the Image. Although the margin to the top is different for the Image and the header. When I use the Preview for mobile device in the Customizer it looks ok. But on my Iphone it doesn´t show up this way?
Thank you for helping me.
You can set the space between the layers by repositioning them in the editor. With the device specific layers you can use different positions for the mobile layers, that are closer to each other, and leave the desktop layers intact.
If you want your background image to fill the slider completely you can use Size -> Cover/Stretch. Or if it's a layer, you can just simply enter 100% to the Width and Height fields. The layers will always be on top of the slide background image.
I'd recommend importing and checking on the Interactive demo slider. It showcases the device specific layers feature.
hey Attila,
Thanks for your answer.
I think I didn’t describe my problem correctly. If you see the start page of my homepage on the mobile phone there is a big space between the different sliders (not layers 🙈). How can I change the space in between? On my notebook it looks fine. There is no space between the sliders.
And still the second slider looks fine in the preview but on my mobile phone the text is not beside the image, but in front of the image...
do you have a solution for this?
Thanks again!
Thank you for the feedback.
The sliders are also sitting next to (or rather on top of) each other on mobiles too. There is no gap between them.
The reason why it looks like that is because the content is getting smaller and more centered on small screens, due to the sliders' layout, so there is more empty space inside the sliders.
You can remedy this with the mentioned device specific layers feature. Basically, you create two sets of layers, and position the mobile layers more spread out closer to the sides of the slider, or simply make them larger.
For me the text are beside the image and not on top of it, both on mobile and desktop. But you can also adjust this a little with the mentioned method.