"use client"; import React, { useEffect, useRef } from "react"; import { Swiper } from "swiper@6.8.4/bundle"; export default function MasterCardsFixed({ 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(".masterCardsFixedSlider"); if (!el) return undefined; // Legacy settings (app-min.js: masterCardsFixedSlider), with the controls scoped to this skin. // No legacy markup has these pagination/navigation elements, so they resolve to null, as they matched nothing before. const swiper = new Swiper(el, { enabled: true, slidesPerView: "auto", spaceBetween: 13, centeredSlides: false, pagination: { el: root.querySelector(".swiper-pagination-master-cards-fixed"), type: "progressbar" }, navigation: { nextEl: root.querySelector(".ps-next-master-cards-fixed"), prevEl: root.querySelector(".ps-prev-master-cards-fixed"), }, breakpoints: { 768: { spaceBetween: 21 } }, }); return () => swiper?.destroy?.(true, true); }, [items.length]); return (

{pcf?.Description}

{pcf?.Title}

{pcf?.Subtitle}

{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