HTML Miniaturas - Barra Progreso - Scroll - OV

<!-- Miniaturas -->
<nav id="ov-vs-thumbnails">
  <div class="ov-vs-thumb ov-vs-active" data-index="0">
    <img src="http://divi-5.local/wp-content/uploads/2026/03/zhqczjr9fho.jpg" alt="Slide 1">
  </div>
  <div class="ov-vs-thumb" data-index="1">
    <img src="http://divi-5.local/wp-content/uploads/2026/03/yrtflrlo2dq.jpg" alt="Slide 2">
  </div>
  <div class="ov-vs-thumb" data-index="2">
    <img src="http://divi-5.local/wp-content/uploads/2026/03/ncdg9mk3pby.jpg" alt="Slide 3">
  </div>
  <div class="ov-vs-thumb" data-index="3">
    <img src="http://divi-5.local/wp-content/uploads/2026/03/bn-d2bcvpik.jpg" alt="Slide 4">
  </div>
  <div class="ov-vs-thumb" data-index="4">
    <img src="http://divi-5.local/wp-content/uploads/2026/03/awxvxy8bszc.jpg" alt="Slide 5">
  </div>
</nav>

<!-- Bullets (visibles solo en móvil) -->
<div id="ov-vs-bullets">
  <div class="ov-vs-bullet ov-vs-active" data-index="0"></div>
  <div class="ov-vs-bullet" data-index="1"></div>
  <div class="ov-vs-bullet" data-index="2"></div>
  <div class="ov-vs-bullet" data-index="3"></div>
  <div class="ov-vs-bullet" data-index="4"></div>
</div>

<!-- Barra de progreso -->
<div id="ov-vs-progress">
  <div id="ov-vs-progress-fill"></div>
</div>

<!-- Contador -->
<div id="ov-vs-counter">
  <span id="ov-vs-cur">01</span> / <span id="ov-vs-tot">05</span>
</div>

<!-- Scroll hint -->
<div id="ov-vs-scroll-hint">
  <svg viewBox="0 0 24 24">
    <path d="M12 5v14M5 12l7 7 7-7"/>
  </svg>
  scroll
</div>