[Resolved] Multiple BG Images/ Slider Concept/ Page Refresh. Possible?

Home Forums Support [Resolved] Multiple BG Images/ Slider Concept/ Page Refresh. Possible?

Home Forums Support Multiple BG Images/ Slider Concept/ Page Refresh. Possible?

Viewing 4 posts - 16 through 19 (of 19 total)
  • Author
    Posts
  • #2508360
    Benjamin

    Hi David, thank you!

    All is in order now.

    One last thing, would it be possible to tweak the code so that the image changes automatically every X seconds, without refreshing the page?

    Or perhaps another idea is that it is guaranteed to switch to the next image when refreshing the page?

    Not sure if this will significantly increase the code size and its effects on page speed. Thanks.

    #2508481
    David
    Staff
    Customer Support

    Hmmm… not using that method, as that will only work on page load. And unless you start storing stuff in the browsers localStorage theres no way to load the next image on refresh and that could hammer your LCP times.

    Alternative method.

    1. Create a Hook Element
    1.1 set the Hook to wp_footer
    1.2 Set the Display Rules to the page you want it to apply,
    1.3 In the hooks text area add this script:

    
    <script>
    window.addEventListener("load", function() {
      // set the time delay
      const interval = 10000;
      // set the number of images to cycle
      const maxImages = 3;
      var randomNumber = function (min, max) {
    	  return Math.floor(Math.random() * (max - min + 1) + min);
      };  
      let root = document.documentElement;
      let cnt = randomNumber(1, maxImages);
      setInterval(function() {
        root.style.setProperty('--hero-bg', "var(--hero-image-" + cnt + ")" );
        cnt++;
        if (cnt > maxImages) cnt = 1;
      }, interval );
    });
    </script>
    
    <style>
    :root {
        --hero-bg: var(--hero-fallback);
        --hero-fallback: url('url_to_fallback');
        --hero-image-1: url('url_to_image_one');
        --hero-image-2: url('url_to_image_two');
        --hero-image-3: url('url_to_image_three');
        
    }
    .page-hero:before{
        background-image: var(--hero-bg) !important;
    }
    </style>
    
    

    NOTEs: in script the interval variable is set to 10000ms ( 10 seconds ) and the maxImages is 3
    Change those to suit.
    In the style change the url_to_* strings to the the full image url for each of your URLs.

    #2508946
    Benjamin

    Damn! That’s a lot of code.

    Thank you, David. As always, I sincerely appreciate the support you guys provide. World-class!

    #2509560
    David
    Staff
    Customer Support
Viewing 4 posts - 16 through 19 (of 19 total)
  • You must be logged in to reply to this topic.