https://www.stanfordmagnets.com/js/banner.js?v=1789441526

1(function () {
2    function syncBannerMediaSrc() {
3        var mobile = typeof isMobile !== 'undefined' && isMobile;
4        document.querySelectorAll('.oc-main-magnet-banner [data-pc]').forEach(function (el) {
5            var index = Number(el.dataset.index || 0);
6            var nextSrc = (mobile && el.dataset.mobile) ? el.dataset.mobile : el.dataset.pc;
7            if (!nextSrc) return;
8            // Keep first-slide HTML src for LCP; only swap when breakpoint needs a different URL
9            if (index === 0 && el.getAttribute('src') && el.getAttribute('src') === nextSrc) {
10                return;
11            }
12            if (el.getAttribute('src') !== nextSrc) {
13                el.src = nextSrc;
14            }
15        });
16    }
17
18    function initBannerCarousel(root) {
19        var track = root.querySelector('[data-banner-track]');
20        var slides = Array.prototype.slice.call(root.querySelectorAll('[data-banner-slide]'));
21        var prevBtn = root.querySelector('[data-banner-prev]');
22        var nextBtn = root.querySelector('[data-banner-next]');
23        var pagination = root.querySelector('[data-banner-pagination]');
24        if (!track || !slides.length) return;
25
26        var index = 0;
27        var bullets = [];
28
29        function goTo(i, behavior) {
30            index = (i + slides.length) % slides.length;
31            track.scrollTo({
32                left: slides[index].offsetLeft,
33                behavior: behavior || 'smooth'
34            });
35            updateUI();
36            syncVideos();
37        }
38
39        function updateUI() {
40            bullets.forEach(function (btn, i) {
41                btn.classList.toggle('is-active', i === index);
42            });
43        }
44
45        function syncVideos() {
46            slides.forEach(function (slide, i) {
47                var video = slide.querySelector('video');
48                if (!video) return;
49                if (i === index) {
50                    if (!video.getAttribute('src') && video.dataset.pc) {
51                        video.src = (typeof isMobile !== 'undefined' && isMobile && video.dataset.mobile)
52                            ? video.dataset.mobile
53                            : video.dataset.pc;
54                    }
55                    video.play && video.play().catch(function () {});
56                } else {
57                    video.pause && video.pause();
58                }
59            });
60        }
61
62        function currentIndexFromScroll() {
63            var left = track.scrollLeft;
64            var best = 0;
65            var bestDist = Infinity;
66            slides.forEach(function (slide, i) {
67                var dist = Math.abs(slide.offsetLeft - left);
68                if (dist < bestDist) {
69                    bestDist = dist;
70                    best = i;
71                }
72            });
73            return best;
74        }
75
76        if (pagination) {
77            pagination.innerHTML = '';
78            slides.forEach(function (_, i) {
79                var btn = document.createElement('button');
80                btn.type = 'button';
81                btn.className = 'magnet-banner-bullet' + (i === 0 ? ' is-active' : '');
82                btn.setAttribute('aria-label', 'Go to slide ' + (i + 1));
83                btn.addEventListener('click', function () {
84                    goTo(i);
85                });
86                pagination.appendChild(btn);
87                bullets.push(btn);
88            });
89        }
90
91        if (prevBtn) {
92            prevBtn.addEventListener('click', function () {
93                goTo(index - 1);
94            });
95        }
96        if (nextBtn) {
97            nextBtn.addEventListener('click', function () {
98                goTo(index + 1);
99            });
100        }
101
102        var scrollTimer;
103        track.addEventListener('scroll', function () {
104            clearTimeout(scrollTimer);
105            scrollTimer = setTimeout(function () {
106                index = currentIndexFromScroll();
107                updateUI();
108                syncVideos();
109            }, 50);
110        }, { passive: true });

111
112        updateUI();
113        syncVideos();
114    }
115
116    function boot() {
117        syncBannerMediaSrc();
118        document.querySelectorAll('[data-banner-carousel]').forEach(initBannerCarousel);
119    }
120
121    if (document.readyState === 'loading') {
122        document.addEventListener('DOMContentLoaded', boot);
123    } else {
124        boot();
125    }
126
127    window.addEventListener('switchingMobile', syncBannerMediaSrc);
128})();