Untitled

// javascript
function addScript() {
      var cssScript = `<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.4/tiny-slider.css">`;
      document.querySelector('head').insertAdjacentHTML('beforeend', cssScript);
      var tinnyScript = document.createElement('script');
      tinnyScript.src = 'https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.2/min/tiny-slider.js';
      document.body.appendChild(tinnyScript);
    }

    function waitForTns(callback) {
      var interval = setInterval(function () {
        if (window.tns != undefined) {
          clearInterval(interval);
          callback();
        }
      }, 50);
      setTimeout(function () {
        clearInterval(interval);
      }, 15000)
    }

    function waitForElement(selector, trigger, delayInterval, delayTimeout) {
      var interval = setInterval(function () {
        if (
          document &&
          document.querySelector(selector) &&
          document.querySelectorAll(selector).length > 0
        ) {
          clearInterval(interval);
          trigger();
        }
      }, delayInterval);
      setTimeout(function () {
        clearInterval(interval);
      }, delayTimeout);
    }


// add soulutions caruosel
    function addSolutionCarousel() {
      addScript();
      waitForTns(() => {
        if (!document.querySelector(".eg-sol-caraousel-cont")) {

          const cardsHTML = solutionsCards.reduce((totalCrds, crrCrd) => {
            return totalCrds += `
          <div class="eg-carousel__item">
          <a href="${crrCrd.link}" class="eg-card">
            <div class="eg-card__content-wrapper">
              <img src="${crrCrd.img}">
              <div class="eg-card__content">
                <h3 class="eg-card__title">${crrCrd.title}</h3>
                <span class="eg-card__cta">${crrCrd.ctaText}<div><svg viewBox="0 0 18 18">
                        <path d="M4.196 17l7.998-8-7.998-8h1.696l8 8-8 8z"></path>
                        <path fill="none" d="M0 18V0h18v18z"></path>
                    </svg></div>
                </span>
              </div>
            </div>
          </a>
          </div>
          `
          }, '');
          const html = ` 
        <div class="eg-home-container eg-sol-caraousel-cont">
          <div class="eg-content-block-container">
              <div class="eg-carousel-wrapper">
                <div class="eg-carousel-title">
                  <h2>Products and Solutions</h2>
                </div>
                <div class="eg-carousel-description">Browse a selection of products you may be interested in, or search for
                  a specific product by type.
                </div>
                <div class="eg-carousel-cta">
                  <a aria-label="Find out more" href="/en-gb/products-and-solutions" role="link"
                    type="button">Find out more</a>
                </div>
                <div class="eg-carousel" id="eg-solutions-carousel">
                  <div class="eg-carousel_item-container my-slider">${cardsHTML}</div>
                </div>
              </div>
          </div>
        </div>
        
        `;
          document.querySelector('[class^="useful-links__content"]').closest('[class^="home-container"]').insertAdjacentHTML("afterend", html);
          tns({
            container: '.eg-carousel_item-container',
            "items": 3,
            "slideBy": 3,
            "mouseDrag": true,
            "swipeAngle": false,
            "speed": 400,
            loop: false,
            viewportMax: true
          });
        }
      });
    }

waitForElement('[class^="useful-links__content"]', addSolutionCarousel, 50, 15000);