Untitled

.egSliderWrapper {
    margin-bottom: 42px;
    max-width: 90%;
    margin-inline: auto;
}

.egHeading h3 {
    text-align: center;
    font-size: 24px;
    font-weight: 500;
    margin-bottom: 40px;
}

.egSliderWrapper .owl-stage {
align-items: center;
display: flex;
width: 2610px !important;
justify-content: center;
}

.egSliderWrapper .owl-nav.disabled {
    display: none;
}

.egLogos.owl-drag {
    padding: 0 64px;
    position: relative;
    width: 100%;
    z-index: 1;
    display: block;
}


.egSliderWrapper .owl-stage-outer{
    overflow: hidden;
}

.egSliderWrapper img{
    display: block;
    width: 70%;
}

@media screen and (max-width : 767px){
    .egSliderWrapper{
        display: none !important;
    }
}








(function () {
    try {
        /* main variables */
        var debug = 0;
        var variation_name = "";
        var $;
        /* all Pure helper functions */

        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);
        }

        function addOwlCarouselScript() {
            var jsScript = document.createElement("script");
            jsScript.src =
                "https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js";
            document.getElementsByTagName("head")[0].appendChild(jsScript);

            var cssLink = document.createElement("link");
            cssLink.href = "https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css";
            cssLink.setAttribute('rel', 'stylesheet')
            document.getElementsByTagName("head")[0].appendChild(cssLink);

        }

        function addjQueryScript() {
            var jQueryScript = document.createElement('script');
            // check for updated jquery cdn
            jQueryScript.src = 'https://code.jquery.com/jquery-3.6.3.min.js';
            document.getElementsByTagName('head')[0].appendChild(jQueryScript);
        }

        // wait for jquery
        function waitForjQuery(trigger) {
            var interval = setInterval(function () {
                if (window.jQuery != undefined) {
                    clearInterval(interval);
                    trigger();
                } else {
                    addJQuery();
                }
            }, 50);
            setTimeout(function () {
                clearInterval(interval);
            }, 15000)
        }

        addjQueryScript();

        // wait for owl

        function doWhenOwnCarouselLoaded(todoWhenLoaded) {
            var waitForOwl = setInterval(function () {
                if (
                    window.jQuery &&
                    window.jQuery.fn &&
                    window.jQuery.fn.owlCarousel
                ) {
                    clearInterval(waitForOwl);
                    todoWhenLoaded();
                }
            }, 500);
            setTimeout(function () {
                clearInterval(waitForOwl);
            }, 10000);
        }


        let egTrust = `
    <div class="s-logo-slider egSliderWrapper">
        <div class="egHeading">
            <h3>Trusted by over 4k сompanies, including:</h3>
        </div>
        
        
        <div class="egLogos flex .s-logo-slider__in">
            <div class="logo-container">
            <img src="//cdn-static.altium.com/sites/default/files/media_icon/2022-11/logo-slider-2-1.svg"
            alt="Volkswagen" loading="lazy" />
            </div>

            <div class="logo-container">
            <img src="//cdn-static.altium.com/sites/default/files/media_icon/2022-11/logo-slider-2-2.svg"
            alt="Toyota" loading="lazy" />
            </div>

            <div class="logo-container">
            <img src="//cdn-static.altium.com/sites/default/files/media_icon/2022-11/logo-slider-2-3.svg"
            alt="Texas Instruments" loading="lazy" />
            </div>

            <div class="logo-container">
            <img src="//cdn-static.altium.com/sites/default/files/media_icon/2022-11/logo-slider-2-4.svg"
            alt="ST" loading="lazy" />
            </div>

            <div class="logo-container">
            <img src="//cdn-static.altium.com/sites/default/files/media_icon/2022-11/logo-slider-2-5.svg"
            alt="Siemens" loading="lazy" />
            </div>
        </div>
</div>
`


        /* Variation Init */
        function init() {
            /* start your code here */

            waitForjQuery(function () {
                addOwlCarouselScript();

                doWhenOwnCarouselLoaded(function () {
                    var $ = window.jQuery || window.$;
                    $('.egLogos').owlCarousel({
                        loop: true,
                        margin: 0,
                        nav: false,
                        items: 5,
                        autoPlay: false,
                        dots: false,
                    })
                });

            });

            document.querySelector("div.l-page__in article > section.s-hero").insertAdjacentHTML("afterend", egTrust);
        }

        /* Initialize variation */
        waitForElement(' div.l-page__in article > section.s-hero', init, 50, 15000);
    } catch (e) {
        if (debug) console.log(e, "error in Test" + variation_name);
    }
})();