https://www.elle.cz/js/modules/horoscopeCarousel.js

1import {createInfiniteCarousel} from './infiniteCarousel.js';
2
3const MOBILE_BREAKPOINT = 1023;
4
5const createCarouselInstance = (carouselRoot) => {
6  const carouselWrap = carouselRoot.closest('.horoscopes__signs-carousel-wrap');
7  const prevButton = carouselWrap?.querySelector('[data-horoscope-prev]');
8  const nextButton = carouselWrap?.querySelector('[data-horoscope-next]');
9  const track = carouselRoot.querySelector('[data-horoscope-track]');
10
11  if (!(track instanceof HTMLElement)) {
12    return {
13      syncToViewport() {
14      }
15    };
16  }
17
18  const desktopDisabled = carouselRoot.getAttribute('data-horoscope-desktop-disabled') === 'true';
19
20  return createInfiniteCarousel({
21    scrollContainer: carouselRoot,
22    track,
23    itemSelector: '[data-horoscope-sign]',
24    cloneAttr: 'data-horoscope-clone',
25    prevButton: prevButton instanceof HTMLButtonElement ? prevButton : null,
26    nextButton: nextButton instanceof HTMLButtonElement ? nextButton : null,
27    shouldEnable: () => !(window.innerWidth > MOBILE_BREAKPOINT && desktopDisabled),
28    getScrollAmount: (container) => Math.max(120, Math.round(container.clientWidth * 0.55)),
29    enablePointerDrag: true
30  });
31};
32
33export const initHoroscopeCarousels = () => {
34  const carousels = Array.from(document.querySelectorAll('[data-horoscope-carousel]'));
35  if (!carousels.length) {
36    return;
37  }
38
39  const instances = carousels.map((carouselRoot) =>

39 createCarouselInstance(carouselRoot));
40  const refresh = () => {
41    instances.forEach((instance) => instance.syncToViewport());
42  };
43
44  refresh();
45  window.addEventListener('resize', refresh);
46};