https://www.nsws.gov.in/themes/sws/js/hero-swiper.js?v=9.4.9

1(function (Drupal, once) {
2  Drupal.behaviors.heroSwiper = {
3    attach: function (context) {
4      once('heroSwiper', '.hero-swiper-wrap', context).forEach(function (wrap) {
5
6        /* ===== Kitne cards dikhenge (yahin se badlo) ===== */
7        var CARDS_MOBILE  = 1.15;  /* 0 - 575px    : 1 card + agle ki jhalak */
8        var CARDS_TABLET  = 2;     /* 576 - 767px  : 2 cards */
9        var CARDS_LAPTOP  = 3;     /* 768 - 991px  : 3 cards */
10        var CARDS_DESKTOP = 5;     /* 992px+       : 5 cards */
11        /* ================================================= */
12
13        /* Swiper loop ki copies banaye us se pehle original images collect karo */
14        var photos = Array.prototype.map.call(
15          wrap.querySelectorAll('.hero-slide__media img'),
16          function (img) {
17            return { src: img.currentSrc || img.src, alt: img.alt || '' };
18          }
19        );
20
21        /* ---------- Lightbox banao ---------- */
22        var box = document.createElement('div');
23        box.className = 'hero-lightbox';
24        box.setAttribute('role', 'dialog');
25        box.setAttribute('aria-modal', 'true');
26        box.setAttribute('aria-hidden', 'true');
27        box.innerHTML =
28          '<button type="button" class="hero-lightbox__btn hero-lightbox__close" aria-label="Close"></button>' +
29          '<button type="button" class="hero-lightbox__btn hero-lightbox__nav hero-lightbox__nav--prev" aria-label="Previous image"></button>' +
30          '<figure class="hero-lightbox__figure">' +
31            '<img class="hero-lightbox__img" alt="">' +
32            '<figcaption class="hero-lightbox__count"></figcaption>' +
33          '</figure>' +
34          '<button type="button" class="hero-lightbox__btn hero-lightbox__nav hero-lightbox__nav--next" aria-label="Next image"></button>';
35        document.body.appendChild(box);
36
37        var lbImg   = box.querySelector('.hero-lightbox__img');
38        var lbCount = box.querySelector('.hero-lightbox__count');
39        var current = 0;
40
41        function show(i) {
42          current = (i + photos.length) % photos.length;   /* last ke baad pehli, pehli ke pehle last */
43          lbImg.classList.remove('is-in');
44          lbImg.src = photos[current].src;
45          lbImg.alt = photos[current].alt;
46          lbCount.textContent = (current + 1) + ' / ' + photos.length;
47          requestAnimationFrame(function () { lbImg.classList.add('is-in'); });
48        }
49
50        function openBox(i) {
51          show(i);
52          box.classList.add('is-open');
53          box.setAttribute('aria-hidden', 'false');
54          document.body.classList.add('hero-lightbox-open');
55          if (swiper.autoplay && swiper.autoplay.running) { swiper.autoplay.stop(); }
56        }
57
58        function closeBox() {
59          box.classList.remove('is-open');
60          box.setAttribute('aria-hidden', 'true');
61          document.body.classList.remove('hero-lightbox-open');
62          if (swiper.autoplay) { swiper.autoplay.start(); }
63        }
64
65        box.querySelector('.hero-lightbox__nav--prev').addEventListener('click', function (e) {
66          e.stopPropagation();
67          show(current - 1);
68        });
69        box.querySelector('.hero-lightbox__nav--next').addEventListener('click', function (e) {
70          e.stopPropagation();
71          show(current + 1);
72        });
73        box.querySelector('.hero-lightbox__close').addEventListener('click', closeBox);
74
75        /* Image aur buttons ke bahar click = band */
76        box.addEventListener('click', function (e) {
77          if (!e.target.closest('.hero-lightbox__img, .hero-lightbox__btn')) { closeBox(); }
78        });
79
80        /* Keyboard: Esc, left, right */
81        document.addEventListener('keydown', function (e) {
82          if (!box.classList.contains('is-open')) { return; }
83          if (e.key === 'Escape')     { closeBox(); }
84          if (e.key === 'ArrowLeft')  { show(current - 1); }
85          if (e.key === 'ArrowRight') { show(current + 1); }
86        });
87
88        /* Mobile swipe */
89        var touchX = null;
90        box.addEventListener('touchstart', function (e) { touchX = e.touches[0].clientX; }, { passive: true });
91        box.addEventListener('touchend', function (e) {
92          if (touchX === null) { return; }
93          var dx = e.changedTouches[0].clientX - touchX;
94          if (Math.abs(dx) > 50) { show(dx < 0 ? current + 1 : current - 1); }
95          touchX = null;
96        });
97
98        /* ---------- Slider ---------- */
99        var swiper = new Swiper(wrap.querySelector('.hero-swiper'), {
100          slidesPerView: CARDS_MOBILE,
101          slidesPerGroup: 1,
102          spaceBetween: 16,
103          loop: true,
104          loopAdditionalSlides: 2,
105          speed: 900,
106          grabCursor: true,
107          observer: true,
108          observeParents: true,
109          autoplay: {
110            delay: 3500,
111            disableOnInteraction: false,
112            pauseOnMouseEnter: true
113          },
114          pagination: {
115            el: wrap.querySelector('.hero-pagination'),
116            clickable: true
117          },
118          navigation: {
119            nextEl: wrap.querySelector('.hero-nav--next'),
120            prevEl: wrap.querySelector('.hero-nav--prev')
121          },
122          breakpoints: {
123            576: { slidesPerView: CARDS_TABLET },
124            768: { slidesPerView: CARDS_LAPTOP },
125            992: { slidesPerView: CARDS_DESKTOP }
126          },
127          on: {
128            /* Drag karne par nahi, sirf sahi click par chalta hai */
129            click: function (sw, e) {
130              var slide = e.target.closest('.swiper-slide');
131              if (!slide) { return; }
132              /* loop ki copy par bhi original index milta hai */
133              var idx = parseInt(slide.getAttribute('data-swiper-slide-index'), 10);
134              if (isNaN(idx)) { idx = 0; }
135              openBox(idx);
136            }
137          }
138        });
139
140        function ready() {

141          swiper.update();
142          swiper.slideToLoop(0, 0);
143          wrap.classList.add('is-ready');
144        }
145        if (document.readyState === 'complete') {
146          ready();
147        } else {
148          window.addEventListener('load', ready, { once: true });
149        }
150      });
151    }
152  };
153})(Drupal, once);