https://naturestationcoop.org/wp-content/themes/buddyboss-theme-child/assets/js/custom.js?ver=1782150812

1/* Custom login JS: build a media slider inside .login-split and move existing content into the overlay.
2     Ensures images use object-fit:contain and Swiper is initialized only when available.
3*/
4
5document.addEventListener('DOMContentLoaded', function () {
6    var loginSplit = document.querySelector('.login-split');
7    if (!loginSplit) return;
8
9    // Grab existing markup (likely welcome text / form) so we can place it into the overlay
10    var existingContent = loginSplit.innerHTML;
11
12    // Adjust these image paths as needed
13    var images = [
14        { src: 'https://media.naturestationcoop.org/wp-content/uploads/2026/05/04121846/nature-login-bg-new.webp', alt: 'Nature' },
15        { src: 'https://media.naturestationcoop.org/wp-content/uploads/2026/05/04121839/culture-login-bg-new.webp', alt: 'Culture' },
16        { src: 'https://media.naturestationcoop.org/wp-content/uploads/2026/05/04121832/adventure-login-bg-new.webp', alt: 'Adventure' }
17    ];
18
19// Build slides using background-image with contain sizing (no cropping, no empty space)
20  var slidesHTML = images.map(function (img) {
21    return '<div class="swiper-slide" style="background-image: url(\'' + img.src + '\'); background-size: cover; background-position: center top;"></div>';
22    }).join('');
23
24    // Compose the slider + overlay markup (spacer keeps copy below image headings)
25    loginSplit.innerHTML =
26        '<div class="cns-login-slider swiper">' +
27            '<div class="swiper-wrapper">' + slidesHTML + '</div>' +
28            '<div class="swiper-pagination"></div>' +
29        '</div>' +
30        '<div class="cns-login-overlay">' +
31            '<div class="cns-login-overlay__spacer" aria-hidden="true"></div>' +
32            '<div class="cns-login-overlay__copy">' + existingContent + '</div>' +
33        '</div>';
34
35    // Initialize Swiper when it's available (script is loaded in footer)
36    (function waitForSwiper() {
37        if (typeof Swiper === 'undefined') {
38            setTimeout(waitForSwiper, 50);
39            return;
40        }
41
42        try {
43            new Swiper('.cns-login-slider', {
44                loop: true,
45                speed: 800,
46                autoplay: {
47                    delay: 4500,
48                    disableOnInteraction: false
49                },
50                effect: 'fade',
51                fadeEffect: { crossFade: true },
52                pagination: { el: '.cns-login-slider .swiper-pagination', clickable: true }
53            });
54        } catch (e) {
55            // fail silently — site should still show images
56            console.warn('Swiper init failed', e);
57        }
58    })();
59});