...который, при ближайшем рассмотрении - не работал. Типа купите доступ, тогда дадим загрузить example. Какого черта, думаю; bootstrap is licensed under the MIT License, да и сама галерея явно не бином Ньютона... денег нет (но вы держитесь), а вот подрихтовать оказалось несложно, кому надо - используйте показанный далее полностью рабочий HTML или сделайте на его основе что-либо свое. Зачем жадничать? - нехорошо, некрасиво.

Создаем галерею изображений на Bootstrap 4

<!--Carousel Wrapper-->
<div id="carousel-with-lb" class="carousel slide carousel-multi-item" data-ride="carousel">


  <!--Indicators-->
  <ol class="carousel-indicators" style="position: relative !important;">
    <li data-target="#carousel-with-lb" data-slide-to="0" class="active secondary-color"></li>
    <li data-target="#carousel-with-lb" data-slide-to="1" class="default-color"></li>
    <li data-target="#carousel-with-lb" data-slide-to="2" class="secondary-color"></li>
  </ol>
  <!--/.Indicators-->

  <!--Slides and lightbox-->

  <div class="carousel-inner mdb-lightbox" role="listbox">
    <div id="mdb-lightbox-ui"></div>
    <!--First slide-->
    <div class=" carousel-item active text-center">

      <figure class="col-md-4 d-md-inline-block">
        <a href="/<%= @result[0] %>"
           data-toggle="lightbox" data-gallery="gallery">
          <img src="/<%= @result[0] %>"
            class="img-fluid">
        </a>
      </figure>

      <figure class="col-md-4 d-md-inline-block">
        <a href="/<%= @result[1] %>"
          data-toggle="lightbox" data-gallery="gallery">
          <img src="/<%= @result[1] %>"
            class="img-fluid">
        </a>
      </figure>

      <figure class="col-md-4 d-md-inline-block">
        <a href="/<%= @result[2] %>"
          data-toggle="lightbox" data-gallery="gallery">
          <img src="/<%= @result[2] %>"
            class="img-fluid">
        </a>
      </figure>

      <figure class="col-md-4 d-md-inline-block">
        <a href="/<%= @result[3] %>"
          data-toggle="lightbox" data-gallery="gallery">
          <img src="/<%= @result[3] %>"
            class="img-fluid">
        </a>
      </figure>
      <figure class="col-md-4 d-md-inline-block">
        <a href="/<%= @result[4] %>"
          data-toggle="lightbox" data-gallery="gallery">
          <img src="/<%= @result[4] %>"
            class="img-fluid">
        </a>
      </figure>
      <figure class="col-md-4 d-md-inline-block">
        <a href="/<%= @result[5] %>"
          data-toggle="lightbox" data-gallery="gallery">
          <img src="/<%= @result[5] %>"
            class="img-fluid">
        </a>
      </figure>

    </div>
    <!--/.First slide-->

    <!--Second slide-->
    <div class="carousel-item text-center">

      <figure class="col-md-4 d-md-inline-block">
        <a href="/<%= @result[6] %>"
          data-toggle="lightbox" data-gallery="gallery">
          <img src="/<%= @result[6] %>"
            class="img-fluid">
        </a>
      </figure>

      <figure class="col-md-4 d-md-inline-block">
        <a href="/<%= @result[7] %>"
          data-toggle="lightbox" data-gallery="gallery">
          <img src="/<%= @result[7] %>"
            class="img-fluid">
        </a>
      </figure>

      <figure class="col-md-4 d-md-inline-block">
        <a href="/<%= @result[8] %>"
          data-toggle="lightbox" data-gallery="gallery">
          <img src="/<%= @result[8] %>"
            class="img-fluid">
        </a>
      </figure>

      <figure class="col-md-4 d-md-inline-block">
        <a href="/<%= @result[9] %>"
          data-toggle="lightbox" data-gallery="gallery">
          <img src="/<%= @result[9] %>"
            class="img-fluid">
        </a>
      </figure>
      <figure class="col-md-4 d-md-inline-block">
        <a href="/<%= @result[10] %>"
          data-toggle="lightbox" data-gallery="gallery">
          <img src="/<%= @result[10] %>"
            class="img-fluid">
        </a>
      </figure>
      <figure class="col-md-4 d-md-inline-block">
        <a href="/<%= @result[11] %>"
          data-toggle="lightbox" data-gallery="gallery">
          <img src="/<%= @result[11] %>"
            class="img-fluid">
        </a>
      </figure>

    </div>
    <!--/.Second slide-->

    <!--Third slide-->
    <div class="carousel-item text-center">

      <figure class="col-md-4 d-md-inline-block">
        <a href="/<%= @result[12] %>"
          data-toggle="lightbox" data-gallery="gallery">
          <img src="/<%= @result[12] %>"
            class="img-fluid">
        </a>
      </figure>

      <figure class="col-md-4 d-md-inline-block">
        <a href="/<%= @result[13] %>"
          data-toggle="lightbox" data-gallery="gallery">
          <img src="/<%= @result[13] %>"
            class="img-fluid">
        </a>
      </figure>

      <figure class="col-md-4 d-md-inline-block">
        <a href="/<%= @result[14] %>"
          data-toggle="lightbox" data-gallery="gallery">
          <img src="/<%= @result[14] %>"
            class="img-fluid">
        </a>
      </figure>

      <figure class="col-md-4 d-md-inline-block">
        <a href="/<%= @result[15] %>"
          data-toggle="lightbox" data-gallery="gallery">
          <img src="/<%= @result[15] %>"
            class="img-fluid">
        </a>
      </figure>
      <figure class="col-md-4 d-md-inline-block">
        <a href="/<%= @result[16] %>"
          data-toggle="lightbox" data-gallery="gallery">
          <img src="/<%= @result[16] %>"
            class="img-fluid">
        </a>
      </figure>
      <figure class="col-md-4 d-md-inline-block">
        <a href="/<%= @result[17] %>"
          data-toggle="lightbox" data-gallery="gallery">
          <img src="/<%= @result[17] %>"
            class="img-fluid">
        </a>
      </figure>

    </div>
    <!--/.Third slide-->

  </div>
  <!--/.Slides-->

</div>
<!--/.Carousel Wrapper-->

Увидеть демку возможно по ссылке, на страничке Instagram Carousel. Пусть вас не смущает, что это rails-app, вытаскивающий фотки посредством API Instagram; bootstrap он и в Африке bootstrap, разница невелика и не зависит от языка программирования или фреймворка. Попросту замените

<%= @result[X] %>

путями к вашим изображениям. Да, и не забудьте скрипты подключить:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/5.3.0/ekko-lightbox.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/5.3.0/ekko-lightbox.js"></script>

<script>
$(document).on("click", '[data-toggle="lightbox"]', function(event) {
  event.preventDefault();
  $(this).ekkoLightbox();
});
</script>

Работает, и на этот раз без каких-либо подвохов. Да-да, все для вас. Не благодарите.