← Back to Experiments

Interactive Demo: <netsi-carousel>

Dette er en MDN style interaktiv demo af det nye <netsi-carousel> element. Prøv at ændre i koden nedenfor. Carousel-elementet bruger nu indholdet af sig selv (Light DOM) som sine "slides" i stedet for attributter, og derfor kan alt fungere i karussellen – både billeder og ren HTML!

Unimark billede

Indhold (HTML Children)

Redigér indholdet af <netsi-carousel>:

<div class="control-group">
  <textarea id="html-input"><img src="/images/apps/unimark.jpg" alt="Unimark" /></textarea>
</div>

<div class="control-group">
  <label>Dobbeltklik for eksempler:</label>
  <div style="display: flex; gap: 0.5rem; flex-wrap: wrap;">
    <button type="button" class="btn-preset" data-html='<img src="/images/apps/unimark.jpg" alt="Unimark" />'>Én img tag</button>
    <button type="button" class="btn-preset" data-html='<img src="/images/apps/unimark.jpg" alt="Unimark" />\n<img src="/images/apps/unimark.jpg" alt="Unimark 2" />'>Flere img tags</button>
    <button type="button" class="btn-preset" data-html='<div class="custom-slide">Hej med dig!</div>\n<div class="custom-slide" style="background: linear-gradient(135deg, #a1c4fd, #c2e9fb);">Det her er HTML!</div>\n<img src="/images/apps/unimark.jpg" alt="Unimark billede" />'>Forskelligt HTML indhold</button>
  </div>
</div>

<h4>Resultat HTML (DOM)</h4>
<div class="code-output" id="html-output">&lt;netsi-carousel&gt;

<img src="/images/apps/unimark.jpg" alt="Unimark billede" /> </netsi-carousel>

API Reference

Brug

Brug din nye <netsi-carousel> ved at wrappe den omkring andre elementer.

<netsi-carousel>
  <img src="billede1.png" />
  <div>
    <h2>En slide som er HTML</h2>
    <button>Klik her</button>
  </div>
  <netsi-ikon name="star"></netsi-ikon>
</netsi-carousel>

Hvert direkte barn-element af <netsi-carousel> vil opføre sig som et separat slide i karrusellen.

Fandt du dette nyttigt? Giv det et ❤️