carbon-components/src/components/lightbox/lightbox.html

Carbon Components is a component library for IBM Cloud

<button class="bx--btn bx--btn--primary" type="button" data-modal-target="#lightbox" data-carousel-item-index="0">Open Lightbox</button>

<div id="lightbox" class="bx--modal" data-modal>
  <div class="bx--lightbox" data-lightbox data-lightbox-index="0">
    <div class="bx--lightbox__main">
      <button class="bx--lightbox__btn" data-scroll-left>
        <svg class="bx--pagination__button-icon" width="8" height="12" viewBox="0 0 8 12" fill-rule="evenodd">
          <path d="M7.5 10.6L2.8 6l4.7-4.6L6.1 0 0 6l6.1 6z"></path>
        </svg>
      </button>
      <img src="http://via.placeholder.com/1056x594?text=/0" class="bx--lightbox__item">
      <img src="http://via.placeholder.com/1056x594?text=1" class="bx--lightbox__item">
      <img src="http://via.placeholder.com/1056x594?text=2" class="bx--lightbox__item">
      <img src="http://via.placeholder.com/1056x594?text=3" class="bx--lightbox__item">
      <img src="http://via.placeholder.com/1056x594?text=4" class="bx--lightbox__item">
      <button class="bx--lightbox__btn" data-scroll-right>
        <svg class="bx--pagination__button-icon" width="8" height="12" viewBox="0 0 8 12" fill-rule="evenodd">
          <path d="M7.5 10.6L2.8 6l4.7-4.6L6.1 0 0 6l6.1 6z"></path>
        </svg>
      </button>
    </div>
    <div class="bx--lightbox__footer">
      <div class="bx--filmstrip">
        <button class="bx--carousel__item" data-carousel-item-index="0">
          <img src="http://via.placeholder.com/256x144?text=/0">
        </button>
        <button class="bx--carousel__item" data-carousel-item-index="1">
          <img src="http://via.placeholder.com/256x144?text=1">
        </button>
        <button class="bx--carousel__item" data-carousel-item-index="2">
          <img src="http://via.placeholder.com/256x144?text=2">
        </button>
        <button class="bx--carousel__item" data-carousel-item-index="3">
          <img src="http://via.placeholder.com/256x144?text=3">
        </button>
        <button class="bx--carousel__item" data-carousel-item-index="4">
          <img src="http://via.placeholder.com/256x144?text=4">
        </button>
      </div>
      <div class="bx--filmstrip-indicator-ctn">
        <div class="bx--filmstrip-indicator bx--filmstrip-indicator--active"></div>
        <div class="bx--filmstrip-indicator"></div>
        <div class="bx--filmstrip-indicator"></div>
      </div>
    </div>
  </div>
</div>