lazy-loading-testimonials.js

    <section class="testimonials">
        <template>
            <div class="photo swiper-container">
            /*
            All the carousel HTML.
            
            Abridged for brevity.
            */
            </div>

            <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/css/swiper.min.css">
            <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/js/swiper.min.js"></script>
            <script type="text/javascript" src="/js/testimonials.js"></script>
        </template>

        <script type="text/javascript">
            var container = document.querySelector('section.testimonials');

            function onChange() {
                var rect = container.getBoundingClientRect();
                var distance = rect.top - window.innerHeight;
                if (distance < 1000) {
                    window.removeEventListener('resize', onChange);
                    window.removeEventListener('scroll', onChange);

                    var content = container.querySelector('template').content;
                    container.appendChild(
                        document.importNode(content, true));
                }
            }

            window.addEventListener('resize', onChange);
            window.addEventListener('scroll', onChange);

            onChange();
        </script>
    </section>