https://www.tigerbond.com/scripts/controls/control.image-carousel.…?d=d2a120ee98322cd1e0a022c79b44fc50019e0147

1document.addEventListener(
2    "DOMContentLoaded", () => {
3
4        const imageCarousels = document.querySelectorAll('.control-image-carousel .carousel-wrap');
5        imageCarousels.forEach(imageCarousel => {
6            var carouselElem = imageCarousel.querySelector('.carousel-horizontal');
7
8            if (carouselElem.children.length > 2) {
9                var iCarousel = tns({
10                    container: carouselElem,
11                    items: 1,
12                    slideBy: '1',
13                    loop: false,
14                    autoplay: true,
15                    speed: 800,
16                    autoplayButtonOutput: false,
17                    nav: false,
18                    controls: true,
19                    prevButton: imageCarousel.querySelector('.tns-control-wrap .tns-control.left-arrow'),
20                    nextButton: imageCarousel.querySelector('.tns-control-wrap .tns-control.right-arrow'),
21                    responsive: {
22                        768: {
23                            items: 2
24                        }
25                    }
26                });
27                iCarousel.pause(); //pause the carousel until waypoint pings it is nearly in view
28
29                var iCarouselWP = new Waypoint({
30                    element: imageCarousel,
31                    handler: function (direction) {
32                        if (direction == 'down') {
33                            iCarousel.play();
34                        }
35                    },
36                    offset: '102%'
37                });
38            }
39        });
40});