Full Width Easy Slider crashes website

Hey Swarez,
I see that you have a modified slideshow.php in your child theme, when I activate the parent Enfold v7.1.1 the test page loads correctly with the slider and all other elements. Try removing your custom slideshow.php from your child theme.

Best regards,
Mike

Hi,
Glad to hear that this works. To change the background image in a color section like a slideshow, add a custom class “color-section-slideshow” to your color section in the Advanced ▸ Developer Settings ▸ Custom CSS Class (no dot)
Then add this snippet in your child theme functions.php

function color_section_slideshow() { ?>
  <script>
document.addEventListener("DOMContentLoaded", function () {
  // Target your color section
  const section = document.querySelector(".color-section-slideshow");
  if (!section) {
    console.warn("No element found with selector .color-section-slideshow");
    return;
  }

  // List of background images
  const images = [
    "/wp-content/uploads/path-to-image1.jpg",
    "/wp-content/uploads/path-to-image2.jpg",
    "/wp-content/uploads/path-to-image3.jpg",
  ];

  if (!images || images.length === 0) {
    console.warn("No images provided for slideshow");
    return;
  }

  let current = 0;
  const delay = 3000; // ms between slides
  const transitionDuration = 1000; // ms for transition
  const effect = "fade"; // "fade" or "slide"
  section.style.position = section.style.position || "relative";
  section.style.overflow = "hidden";
  section.style.backgroundImage = url(${images[0]});
  section.style.backgroundSize = "cover";
  section.style.backgroundPosition = "center center";
  images.forEach((src) => {
    const img = new Image();
    img.src = src;
  });
  const overlay = document.createElement("div");
  overlay.style.position = "absolute";
  overlay.style.top = "0";
  overlay.style.left = "0";
  overlay.style.width = "100%";
  overlay.style.height = "100%";
  overlay.style.backgroundSize = "cover";
  overlay.style.backgroundPosition = "center center";
  overlay.style.zIndex = "0";
  overlay.style.pointerEvents = "none";
  overlay.style.opacity = "0";
  overlay.style.transition = opacity ${transitionDuration}ms ease-in-out, transform ${transitionDuration}ms ease-in-out;
  section.appendChild(overlay);

  function showNextImage() {
    current = (current + 1) % images.length;
    overlay.style.backgroundImage = url(${images[current]});

    if (effect === "fade") {
      overlay.style.transform = "none";
      overlay.style.opacity = "1";

      setTimeout(() => {
        section.style.backgroundImage = url(${images[current]});
        overlay.style.opacity = "0";
      }, transitionDuration);
    } else if (effect === "slide") {
      overlay.style.transition = "none";
      overlay.style.transform = "translateX(100%)";
      overlay.style.opacity = "1";
      overlay.offsetHeight;
      overlay.style.transition = transform ${transitionDuration}ms ease-in-out;
      overlay.style.transform = "translateX(0)";

      setTimeout(() => {
        section.style.backgroundImage = url(${images[current]});
        overlay.style.transition = "none";
        overlay.style.opacity = "0";
        overlay.style.transform = "translateX(100%)";
        setTimeout(() => {
          overlay.style.transition = opacity ${transitionDuration}ms ease-in-out, transform ${transitionDuration}ms ease-in-out;
        }, 20);
      }, transitionDuration);
    }
  }
  const intervalId = setInterval(showNextImage, delay);
});
</script>
  <?php
}
add_action( 'wp_footer', 'color_section_slideshow', 99 );

Change the images in the snippet to suit and change const effect = “slide”; to “fade” or “slide” as you wish.

Best regards,
Mike

• This reply was modified 2 weeks, 6 days ago by Mike. Reason: corrected snippet

Hi,
I could not login, seems the password is not correct please check. It looks like you have a comma after the last image URL:

please remove, the last image URL should not end with a comma, like the example code above:

If this doesn’t help, please update the password so we can check.

Best regards,
Mike

Hi,
Thanks for the login, it looks like I made an error when I pasted the code above from my test site, I updated your site and the snippet above and it’s now working. Please check. Sorry for the confusion.

Best regards,
Mike

Hi,
Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

Best regards,
Mike