Swiper Components

<div className="uk-dots-pill">
  <UkCardGallery images={images} />            {/* Swiper */}
</div>

<div className="uk-dots-pill">
  <BookingGallery images={images} preview="slider" />   {/* Fancybox */}
</div>

/* tokens: on the wrapper, or a scope ([data-demo="x"] { ... }) */
--uk-dots-pill-bg: rgb(0 0 0 / 0.38);
--uk-dots-pill-bottom: 12px;

<ClassicGrid slidesPerView={1} slidesPerViewTablet={1} slidesPerViewMobile={1} loop effect="fade">
  {slides.map((s) => (
    <div key={s.id}>
      <img trigger_slide="" trigger_slide_effect="settle" src={s.src} alt="" />
      <span trigger_slide="" trigger_slide_from='{"scale":2.4,"rotation":-14,"opacity":0}' trigger_slide_duration="1.1">{s.number}</span>
      <span trigger_slide="" trigger_slide_from='{"x":260,"y":-220,"rotation":200,"opacity":0}'
            trigger_slide_at="0.45" trigger_slide_duration="1.3">חדש</span>
      <div trigger_slide="" trigger_slide_from='{"scaleX":0}' trigger_slide_stagger="0.08">
        <span /><span /><span /><span /><span />
      </div>
      <h3 trigger_slide="" trigger_slide_effect="mask_up">{s.title}</h3>
      <div trigger_slide="" trigger_slide_effect="blur_up">…</div>
    </div>
  ))}
</ClassicGrid>

contentSwiper.controller.control = gallerySwiper;   // the line that joins them
gallerySwiper.controller.control = contentSwiper;

<SwiperTabsPanels
  ariaLabel="סוגי דמואים"
  navWrapClassName="uk-container"      // panels full-bleed, tabs on the text's edge
  className="uk-tabs-panels--center"   // centred while the row fits
  tabs={groups.map(g => ({ id: g.id, label: g.label, count: g.items.length,
                           content: <ClassicGrid swiperId={`row_${g.id}`} items={g.items} /> }))}
/>
/* tokens: --uk-tabs-panels-accent (the active line), --uk-tabs-panels-gap */

const PLACES = [
  { title: 'מעל העננים', src: '…', bg: 'linear-gradient(135deg, #ece1f3, #f7d3c6)' },
  { title: 'אגם בין הרים', src: '…', bg: 'linear-gradient(135deg, #d6f1f0, #9ad8d4)' },
]

<SwiperSyncLayer swiperId="places" items={PLACES}
  renderLayer={(p) => <div style={{ background: p.bg }} />}>
  <h3>…</h3>
  <ClassicGrid swiperId="places" items={PLACES} renderSlide={(p) => <PlaceCard {...p} />} />
</SwiperSyncLayer>

<SwiperSyncLayer swiperId="quotes" items={QUOTES}
  renderLayer={(q) => <img src={q.photo} alt="" />}
  className="my-dark-panel">           /* --uk-sync-layer-blur: 40px; --uk-sync-layer-scale: 1.3;
                                          --uk-sync-layer-overlay: rgb(0 0 0 / .38) */
  <ClassicGrid swiperId="quotes" items={QUOTES} renderSlide={(q) => <QuoteCard {...q} />} />
</SwiperSyncLayer>