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.
Unfortunately this code will not work with the slider. However you could use a different approach to achieve this.
You could build two separate sliders with different sizes, layouts or even content for dekstop and mobile/tablet view. Include them both to the site, and only display them (using the Hide over and Hide under options in the Slider Settings) on the required device.
Also, please note that LayerSlider handles every layout mode by itself. So your sliders will appear correctly in portrait mode as well, and the end-users can rotate the device if they would like to see it in larger size. It works the same as a photo for example.
I already tried your method, it partially works, but there are two main problems I encounter:
1. the slider behaves weird to the end user which uses the phone both orientations (unlocked orientation) - there are basically two open sliders on the screen (of which one is visible), so changing the orientation of the device shows the 'other' slider which may show different slide (since slide changes only on the visible one. Also, when using the overlay, one stays open, so the user in all cases needs to close the slider twice. These are not the worst problems of the kind, but they give an unprofessional touch, which is quite the opposite effect of my intention for using LayerSlider.
2. the slider will be used for playing the semi-complex slideshow animations. I guess these animations would appear in wrong orientation if not fixed one by one (there is no way to orient the whole slider, but every layer and animation needs to be oriented manually, right)? Also, all the later slideshow manipulations/corrections would need to be done twice, so it would become quite a hassle with the material that needs regular updating..
Basically, I need to play a slideshow which looks good only in 16:9 ratio and the slide full screen pop-up should always be opened in landscape, like YT videos when clicked the full screen button, since it gives user the proper experience. Is there any other achievable way to do that? Is it possible to customize the plugin by hiring 3rd party programmers or you guys to make the necessary changes? Or add some code somewhere? All the other functionalities of the plugin are more than satisfying for my needs!
At the moment these are the options provided by the plugin that you can use for this purpose.
However it should be possible to achieve what you're looking for with custom coding. But unfortunately creating such code requires web development experience and CSS knowledge. So it's only recommended for more experienced users.
Hi,
I would need to force the landscape view for the layerslider for small screen devices. How can I do that?
I tried pasting this code into the Custom CSS but it affects the page generally (and the LayerSlider doesn't show layers):
@media screen and (min-width: 320px) and (max-width: 767px) and (orientation: landscape) {
html {
transform: rotate(-90deg);
transform-origin: left top;
width: 100vh;
overflow-x: hidden;
position: absolute;
top: 100%;
left: 0;
}
}
I would like it to be landscape only while playing the slides.
Thanks!
Hello the_soundtouchables,
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.
Unfortunately this code will not work with the slider. However you could use a different approach to achieve this.
You could build two separate sliders with different sizes, layouts or even content for dekstop and mobile/tablet view. Include them both to the site, and only display them (using the Hide over and Hide under options in the Slider Settings) on the required device.
Also, please note that LayerSlider handles every layout mode by itself. So your sliders will appear correctly in portrait mode as well, and the end-users can rotate the device if they would like to see it in larger size. It works the same as a photo for example.
Hi Attila,
thank you for your answer!
I already tried your method, it partially works, but there are two main problems I encounter:
1. the slider behaves weird to the end user which uses the phone both orientations (unlocked orientation) - there are basically two open sliders on the screen (of which one is visible), so changing the orientation of the device shows the 'other' slider which may show different slide (since slide changes only on the visible one. Also, when using the overlay, one stays open, so the user in all cases needs to close the slider twice. These are not the worst problems of the kind, but they give an unprofessional touch, which is quite the opposite effect of my intention for using LayerSlider.
2. the slider will be used for playing the semi-complex slideshow animations. I guess these animations would appear in wrong orientation if not fixed one by one (there is no way to orient the whole slider, but every layer and animation needs to be oriented manually, right)? Also, all the later slideshow manipulations/corrections would need to be done twice, so it would become quite a hassle with the material that needs regular updating..
Basically, I need to play a slideshow which looks good only in 16:9 ratio and the slide full screen pop-up should always be opened in landscape, like YT videos when clicked the full screen button, since it gives user the proper experience. Is there any other achievable way to do that? Is it possible to customize the plugin by hiring 3rd party programmers or you guys to make the necessary changes? Or add some code somewhere? All the other functionalities of the plugin are more than satisfying for my needs!
Thank you,
Dražen
At the moment these are the options provided by the plugin that you can use for this purpose.
However it should be possible to achieve what you're looking for with custom coding. But unfortunately creating such code requires web development experience and CSS knowledge. So it's only recommended for more experienced users.