Viewing 17 posts - 1 through 17 (of 17 total)
  • Author
    Posts
  • #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,
    Iceman

    #1143404

    Hey 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,
    Nikko

    #1143605

    Hi 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 Nikko

    #1143796

    Hi 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,
    Nikko

    #1143802

    Hey Nikko,

    See in private the screen capture. I just flushed out the cache

    Regards,
    Iceman

    #1144337

    Hi ICEMAN,

    Please replace the code I gave with:

    #top .avia-fullwidth-slider {
        height: 100vh !important;
        overflow: hidden;
    }

    Best regards,
    Nikko

    #1144425

    Hi 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 !
    Iceman

    #1145573

    Hi 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,
    Nikko

    #1145616

    From 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 height

    So 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.

    #1145674

    then 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.

    #1145702

    Hi Guenni007,
    Thanks for helping again !
    I will try this and I come back to you.
    Thanks a lot,
    Iceman

    Nota:Could you hide the website adress on your post ;-)

    • This reply was modified 5 years, 2 months ago by ICEMAN.
    #1145710

    you 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

    #1145738

    this 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');
    #1145780

    Thanks 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?

    #1145831

    If 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!

    #1145841

    I 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)

    #1145874

    Yes – 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 graphic

    All you need to test is described on that page: https://webers-testseite.de/slider-depending-on-screenwidth/

Viewing 17 posts - 1 through 17 (of 17 total)
  • You must be logged in to reply to this topic.