-
AuthorPosts
-
September 26, 2019 at 12:29 pm #1142244
Hello to all !
Pending a resolution of a precedent post, I am looking for a temporary solution for my website.
Is it possible to resize “full width slider” so that it fills the same space as “full screen slider”.
“Full width slider” height are too important comparing to “Full screen slider”
I would like exactly the same rendering as full screen slider.I create a page (see the link in private) with the two slider in order to compare and show you the difference.
Hope you can help,
Thanks in advance,
Regards,
IcemanSeptember 30, 2019 at 4:15 pm #1143404Hey ICEMAN,
We apologize for the delayed response.
Can you try adding this css code in Quick CSS, located in Enfold > General Styling:#top .avia-fullwidth-slider { height: 100vh !important; }
Let us know if this helps.
Best regards,
NikkoOctober 1, 2019 at 9:41 am #1143605Hi Nikko ,
I added it but it doesn’t work.
See the result in the link in private. I would like the same result i have with my home.
Thanks for helping NikkoOctober 1, 2019 at 3:52 pm #1143796Hi ICEMAN,
I could not see the code I gave when I inspected the page.
Did you already remove it from Quick CSS? if you have a caching plugin, can you try to flush out the cache.Best regards,
NikkoOctober 1, 2019 at 4:09 pm #1143802Hey Nikko,
See in private the screen capture. I just flushed out the cache
Regards,
IcemanOctober 3, 2019 at 5:31 am #1144337Hi ICEMAN,
Please replace the code I gave with:
#top .avia-fullwidth-slider { height: 100vh !important; overflow: hidden; }
Best regards,
NikkoOctober 3, 2019 at 10:34 am #1144425Hi Nikko, it’s works well now but do you have a solution to better frame the image ?
Look in private my test page in comparison to my home. As you can see, the images on test page are lower than home’s photos.
Cheers !
IcemanOctober 7, 2019 at 1:42 am #1145573Hi ICEMAN,
We apologize for the late response, however that’s the limit of tweaking it with css.
The only way to adjust it is via tweaking the js file for fullwidth slider which will take some time to do and outside the scope of our support :(Best regards,
NikkoOctober 7, 2019 at 5:48 am #1145616From my point of view the other way would be easier to go. To make a full-screen slider look like a full-width slider.
Only the following problem is: Your pictures are not all in the same aspect ratio, that they do not have the same size (meant are the dimensions) is not relevant.If you were to use the 1500px x 630px aspect ratio, for example, you could specify the following with this aspect ratio:
630/1500 = 42% – if we now take the screenwidth as basis we had 42vw as heightSo make yourself a copy of your homepage which has only the fullscreen slider and shows it on all screen widths.
It would be nice if the images would have the same aspect ratio. So test the 1500px x 630px variant in the slider.
Then we convert the code only for this Page-id:
So e.g:@media only screen and (max-width:767px) { .page-id-xyz .avia-slideshow.av_fullscreen { width: 100vw !important; height: 42vw !important; } }
on a 16:9 aspect ratio it is 54vw height
on 801:1200 = 67vw
etc.October 7, 2019 at 8:18 am #1145674then you should remove the script: …
(function($){ $('html.avia_mobile #fullscreen_slider_1').remove(); $('html.avia_desktop #full_slider_1').remove(); })(jQuery);
we had to find a way now for your slider that it is only inserted before header on screenwidth dependency.October 7, 2019 at 10:27 am #1145702Hi Guenni007,
Thanks for helping again !
I will try this and I come back to you.
Thanks a lot,
IcemanNota:Could you hide the website adress on your post ;-)
- This reply was modified 5 years, 1 month ago by ICEMAN.
October 7, 2019 at 10:50 am #1145710you can see here my trial. https://webers-testseite.de/slider-depending-on-screenwidth/
But i try to insert a debounce function now because the resize function is always firering during resize. Performance-friendly way to handle this is debouncing.See here a demo what is the difference – resize the window: https://www.paulirish.com/demo/resize
October 7, 2019 at 12:20 pm #1145738this is my function for him sofar- maybe a mod could tell me how to use the included debounce resize function on enfold for it:
( the selector has to be more specific – maybe an ID or Custom Class – but that could be done later)function slider_move(){ ?> <script> (function($){ var fullscreenSlider = $(".avia-fullscreen-slider"); fullscreenSlider.clone().detach(); $(window).on('load resize', function () { var winWidth = $(window).width(); if (winWidth < 990) { $("#main").prepend(fullscreenSlider); } else { $("#wrap_all").prepend(fullscreenSlider); } }); })(jQuery); </script> <?php } add_action('wp_footer', 'slider_move');
October 7, 2019 at 2:23 pm #1145780Thanks Guenni007, I can’t test today because of great maintenance work at web host today.
I come back to you as soon as possible !We are looking for a lot of solutions to optimize the resources mobilized by these sliders.
In a general and objective way, do you think that the slider is a bad solution for a home page?October 7, 2019 at 3:54 pm #1145831If you don’t make yourself a slave to Performance Test Tools, then I think a little movement on the start page is good.
On my site I even have a small self-hosted movie running, which also works on the mobile phone!October 7, 2019 at 4:29 pm #1145841I agree with you but I should be able to save more time on my home page because if you try you will see that it is still too long to load (test after clear your cache)
October 7, 2019 at 6:42 pm #1145874Yes – but your biggest problem is the image optimization.
You can see on the F-Result for a lot of images that an optimized version is sometimes more than 40% reduction.
By the way – alot of beginners – download this presented optimized Version and upload them instead of the original.
One of the images is nearly 600kb big. thats immense for a web graphicAll you need to test is described on that page: https://webers-testseite.de/slider-depending-on-screenwidth/
-
AuthorPosts
- You must be logged in to reply to this topic.