"use client"; import React, { useEffect, useRef } from "react"; import { Swiper } from "swiper@6.8.4/bundle"; // Cards come from the playlist's own items (user request, 30 Oct 2026), read as Master Cards Carousel reads them: // one card per item's article (Title, Description, ArticleLinkUrl, Picture). The legacy skin read the Schools // Listing datasource (section 5236 with its visible children) and never looked at the items. export default function MasterCardsFixedSchools({ playlist, section }) { const rootRef = useRef(null); const pl = playlist; const pcf = pl?._embedded?.CustomFields; const items = pl?._embedded?.PlaylistItems ?? []; useEffect(() => { const root = rootRef.current; const el = root?.querySelector(".masterCarouselSlider"); if (!el) return undefined; // Legacy settings (app-min.js: masterCarouselSlider), with the controls scoped to this skin. const swiper = new Swiper(el, { slidesPerView: "auto", spaceBetween: 13, centeredSlides: false, pagination: { el: root.querySelector(".swiper-pagination-master-carousel"), type: "progressbar" }, navigation: { nextEl: root.querySelector(".ps-next-master-carousel"), prevEl: root.querySelector(".ps-prev-master-carousel"), }, breakpoints: { 1024: { spaceBetween: 30 } }, }); return () => swiper?.destroy?.(true, true); }, [items.length]); // Legacy: XprLogic Schools_embedded.Children 3 logic="gt" method="count", meant as "more than three cards"; // "Schools_embedded" (no dot) is no context, so the legacy controls never rendered. The cards are the items now. const showControls = items.length > 3; return (

{pcf?.Subtitle}

{pcf?.Title}

{pcf?.Description}

{showControls && (

)}

{items.map((item, i) => { const article = item?._embedded?.Article; if (!article) return null; const picture = article._embedded?.Picture; return (

{picture?.SourcePath && (

)}

{article.Title}

{article.Description}

); })}

); }

Deree - Official website

Schools & Departments