​

Slider

Quero um carrossel com slides editáveis. Qual é a implementação recomendada?

​

Contratos utilizados

• Section Contract
• Block Contract
• Fields image, text, textarea, url
• @corvex/runtime — PUBLIC_EDITOR_INTEGRATION: SectionBlockCanvas, useSectionBlockCount, BlockChrome

​

Integração com o Editor (não é API de vitrine genérica)

​

Objetivo

Slider Section
└── Slide Blocks (image, heading, text, link)

​

Arquivos

sections/slider/
├── section.jsx
├── schema.json
├── blocks.json
└── styles.css

blocks/slider-slide/
├── block.jsx
└── schema.json

​

Estado local por instância

const [index, setIndex] = useState(0);
const slideCount = Math.max(useSectionBlockCount(), 1);
const useCarousel = slideCount > 1;

• Duas sliders na mesma página = dois index independentes (sem querySelector global).
• Não desligue o carrossel no inspecionar.

​

Transform do track (runtime)

const trackStyle = useCarousel
  ? { transform: `translateX(-${index * 100}%)` }
  : undefined;

<SectionBlockCanvas className="cookbook-slider__track" style={trackStyle}>
  {children}
</SectionBlockCanvas>

​

Slide block (settings)

export default function SliderSlideBlock({ settings = {} }) {
  const bg = settings.image
    ? `url(${settings.image}) center/cover`
    : 'linear-gradient(135deg, #374151, #111827)';
  …
}

​

Comportamento no Editor

​

Cuidados

• useSectionBlockCount() — não Children.count(children).
• useEffect com cleanup no timer de autoplay.
• CSS: .cookbook-slider__track .cx-block { flex: 0 0 100%; }

​

Checklist

• blocks.json com slider-slide — sem import './blocks.json' e sem propriedade estática no componente
• Nome no inspector só em schema.json → name
• {children} direto no SectionBlockCanvas (sem map/hidden por child)
• useSectionBlockCount + BlockChrome em cada slide
• Estado React local (sem DOM global)
• Empty state só com zero blocks (sem banners hardcoded)
• Slides iniciais no templates/index.json, não no JSX
• corvex validate passa