"use client"; import React, { useEffect, useRef } from "react"; import { Swiper } from "swiper@6.8.4/bundle"; export default function SimpleCardsInnerFixed({ playlist, section }) { const rootRef = useRef(null); const pl = playlist; const items = pl?._embedded?.PlaylistItems ?? []; const pcf = pl?._embedded?.CustomFields; useEffect(() => { const root = rootRef.current; const el = root?.querySelector(".theFacilities"); if (!el) return undefined; // Legacy settings (app-min.js: theFacilities), with the controls scoped to this skin. The skin has no // pagination or arrow elements, so those lookups find nothing. const swiper = new Swiper(el, { enabled: true, slidesPerView: "auto", spaceBetween: 13, centeredSlides: false, pagination: { el: root.querySelector(".swiper-pagination-the-facilities"), type: "progressbar" }, navigation: { nextEl: root.querySelector(".ps-next-the-facilities"), prevEl: root.querySelector(".ps-prev-the-facilities"), }, breakpoints: { 768: { spaceBetween: 30 } }, }); return () => swiper?.destroy?.(true, true); }, [items.length]); // Bottom Spacing, when set, adds its bottom margin classes (user request, 30 Oct 2026, for the program pages). return (

{pcf?.Title && (

{pcf?.Description &&

Deree - Official website