JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/what-input/5.2.12/what-input.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.8.1/js/foundation.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.8.1/css/foundation.min.css">
<div class="orbit" role="region" aria-label="Favorite Space Pictures" data-orbit>
<div class="orbit-wrapper">
<div class="orbit-controls">
<button class="orbit-previous"><span class="show-for-sr">Previous Slide</span>◀︎</button>
<button class="orbit-next"><span class="show-for-sr">Next Slide</span>▶︎</button>
</div>
<ul class="orbit-container">
<li class="is-active orbit-slide">
<figure class="orbit-figure">
<picture>
<source media="(min-width: 1024px)" srcset="https://placekitten.com/1200/600">
<source media="(min-width: 640px)" srcset="https://placekitten.com/640/320">
<source srcset="https://placekitten.com/400/200">
<img class="orbit-image" loading="lazy" src="https://placekitten.com/1200/600" alt="Space">
</picture>
<figcaption class="orbit-caption">Space, the final frontier.</figcaption>
</figure>
</li>
<li class="orbit-slide">
<figure class="orbit-figure">
<picture>
<source media="(min-width: 1024px)" srcset="https://placekitten.com/1200/600">
<source media="(min-width: 640px)" srcset="https://placekitten.com/640/320">
<source srcset="https://placekitten.com/400/200">
<img class="orbit-image" loading="lazy" src="https://placekitten.com/1200/600" alt="Space">
</picture>
<figcaption class="orbit-caption">Lets Rocket!</figcaption>
</figure>
</li>
<li class="orbit-slide">
<figure...
JavaScript
$(document).foundation();