Gallery

Modern

<div class="row mb-1">
  <div class="col-10">
    <div class="owl-carousel visible align-bottom" data-items="[2,2]" data-margin="10" data-loop="true" data-autoplay="true">
      <figure class="photo equal equal-short">
        <a href="path/to/image" 
          style="background-image: url(path/to/image);">
        </a>
      </figure>
      ...
    </div>
  </div>
</div>
<div class="row justify-content-end">
  <div class="col-10">
    <div class="owl-carousel visible" data-items="[2,2]" data-margin="10" data-loop="true" data-autoplay="true" data-rtl="true">
      <figure class="photo equal equal-short">
        <a href="path/to/image" 
          style="background-image: url(path/to/image);">
        </a>
      </figure>
      ...
    </div>
  </div>
</div>

Scrolling Gallery

<div class="col-md-10 col-lg-8 vh-max-75">
  <div data--250-bottom-top="transform: translateY(0px);" data-top-bottom="transform: translateY(-1500px);">
    <ul class="masonry row gutter-3">
      <li class="col-6">
        <figure class="photo">
          <a href="path/to/image">
            <img src="path/to/image" alt="Image">
          </a>
        </figure>
      </li>
      ...
    </ul>
  </div>
</div>

Masonry

<ul class="masonry gallery row gutter-2">
  <li class="col-6">
    <figure class="photo equal">
      <a href="path/to/image"
        style="background-image: url(path/to/image);">
        <figcaption class="photo-caption">
          <span>Photo Caption</span>
        </figcaption>
      </a>
    </figure>
  </li>
</ul>