Cards: Add UE fields to configure Swiper properties

[helms-charity]

Instead of making all changes to the swiper cards in the JS, we should add some fields so they are authorable.

Such as:

• starting card (initialSlide)
• slides per view (do we need a separate mobile vs. desktop number?)
• space between (MAYBE? seems too granular.)
• centeredSlides
• pagination type (aka bullets vs. whatever the other choices are?)

See https://www.idfcfirst.bank.in/credit-card/swyp-emi-credit-card where swiper is used vertically, and with the fractions

[sthirumal]

Working notes :

Pagination & Controls

Controls (prev/next) (checkbox): default true
Keyboard navigation (checkbox): default true
Mousewheel (checkbox): default false
Pagination type (select): none | bullets | fraction | progressbar — default bullets
Clickable bullets (checkbox): default true (only if bullets)
Dynamic bullets (checkbox): default false
Pagination placement (select): below | overlay | left | right — default below

Autoplay

Autoplay (checkbox): default false
Delay (ms) (number): default 4000, min 1000, step 250
Pause on hover (checkbox): default true
Disable on interaction (checkbox): default true

Content/Design

Theme/variant (select): default | minimal | cards | hero
Show slide content (checkbox): default true
Content position (select): top-left | top-right | bottom-left | bottom-right | centered
Aspect ratio (select): auto | 16:9 | 4:3 | 1:1
Lazy load images (checkbox): default true

Accessibility

Reduced motion friendly (checkbox): default true (forces autoplay=false when prefers-reduced-motion is on)
Announce active slide (checkbox): default true
Focusable pagination (checkbox): default true
ARIA label for carousel (text): default “Featured content carousel”

Quick Reference: Swiper Options Summary

Pagination
bullets, fraction, progressbar, custom

Effects
slide, fade, cube, coverflow, flip, cards, creative

Navigation
Prev/Next arrows, scrollbar

Behavior
loop, autoplay, freeMode, centeredSlides

Layout
slidesPerView, spaceBetween, direction (horizontal/vertical)

Responsive
breakpoints for different screen sizes