https://advcloudfiles.advantech.com/design/ui-kit/2.0.0/js/carousel/UICarouselOffset.js

1// UICarouselOffset.js — NOT customizable per spec (SDD §7.2)
2const UICarouselOffset = {
3  init(el) {
4    const $container    = $(el).closest('.ui-carousel');
5    const $swiper       = $(el);
6    const $sectionTitle = $swiper.closest('section').find('.ui-section-title');
7    const $controls     = $container.find('.controls-wrap');
8
9    // Cache once — .container-limited is static and never changes after page load.
10    const $limited = $('.container-limited').first();
11
12    const swiper = new Swiper(el, {
13      slidesPerView: 'auto',
14      grabCursor: true,
15      breakpoints: {
16        0:   { spaceBetween: 15, slidesOffsetAfter: 40 },
17        768: { spaceBetween: 15, slidesOffsetAfter: 50 },
18        992: { spaceBetween: 20, slidesOffsetAfter: 60 }
19      },
20      navigation: {
21        addIcons: false,
22        prevEl: $container.find('.swiper-button-prev')[0],
23        nextEl: $container.find('.swiper-button-next')[0]
24      }
25    });
26
27    // Align section-title (left col), swiper (right col) and the nav buttons to
28    // .container-limited boundary. The buttons live in .controls-wrap, a sibling of
29    // .swiper (not a descendant), so $swiper's padding-right does not reach them —
30    // .controls-wrap's own CSS (position:absolute + max-width:1600px + flex-end) only
31    // resolves to the page's 1600px boundary when its containing block spans the full
32    // viewport; here the containing block is .ui-split__secondary (bled to the viewport
33    // edge via is-bleed-right), so it must be aligned explicitly here too, reusing the
34    // same gap so both elements always land on the exact same right edge.
35    // Uses window.innerWidth throughout — consistent with getBoundingClientRect() viewport coords.
36    function setOffsetAlign() {
37      if (window.innerWidth < 769) {
38        $swiper.css('padding-right', '');
39        $sectionTitle.css('padding-left', '');
40        $controls.css('padding-right', '');
41        swiper.update();
42        return;
43      }
44
45      if ($limited.length) {
46        const rect = $limited[0].getBoundingClientRect();
47        const rightGap = (window.innerWidth - rect.right) + 'px';
48
49        // .container-full's own horizontal padding only drops to 0 above 1696px (see
50        // css/ui-kit.css @media max-width:1696px) — below that it already provides the
51        // left gutter natively, so injecting rect.left there would double the inset.
52        // Only inject above 1696px, where this is the sole source of the left offset.
53        $sectionTitle.css('padding-left', window.innerWidth > 1696 ? rect.left + 'px' : '');
54
55        $swiper.css('padding-right', rightGap);
56        $controls.css('padding-right', rightGap);
57      }
58
59      swiper.update();
60    }
61
62    // Debounce resize: fires once after the user stops dragging (120 ms quiet period),
63    // not on every intermediate event during the drag.
64    let resizeTimer;
65    $(window).on('resize', function () {
66      clearTimeout(resizeTimer);
67      resizeTimer = setTimeout(setOffsetAlign, 120);
68    });
69
70    setOffsetAlign();
71
72    return swiper;
73  }
74};
75
76// Top-level const bindings are script-scoped, not window properties —
77// expose explicitly so uikit-init.js's auto-loader can look modules up by name.
78window.UICarouselOffset = UICarouselOffset;