Как к галерее миниатюр прикрутить слайдер (Bootstrap)?

Question

[Марина Калюжная]

Нужно к галерее миниатюр прикрутить слайдер как показано на скрине:

фрагмент верстаемого макета

Есть следующий код для, непосредственно, галереи:

html-код

<!--<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>-->
<div class="middle-block">
  <div class="container">
    <h4 class="title-recent">recent work</h4>
    <div class="d-md-flex flex-row">
      <div class="mt-2 galery-text-block">
        <p class="gray">Lorem ipsum dolor sit amet, omnis euismod indoctum mel.</p>
        <p class="galery-text">Lorem ipsum dolor sit amet, omnis euismod indoctum me ei, mel erat ancillae eloquent iam id. Movet facete sea cu, deleniti adipiscing id eum. Mel alia consul constituto ex, no his inani reformidans accommoda re. Et eos viderer appellantur, ferri
          inimicus an ius, ne inermis deseruisse ius.</p>
      </div>
      <div class="col-md-9">
        <div class="row">
          <div class="col-md-4 img-thumbnail">
            <a data-fancybox="gallery" href="#" class="galery-item-link">
              <img class="img-fluid w-100" src="images/img.jpg" alt="image">
              <div class="info">
                <ul>
                  <li>201<br>views</li>
                  <li>95<br>likes</li>
                  <li>10<br>comments</li>
                </ul>
              </div>
            </a>
          </div>
          <div class="col-md-4 img-thumbnail">
            <a data-fancybox="gallery" href="#" class="galery-item-link">
              <img class="img-fluid w-100" src="images/img-2.jpg" alt="image">
              <div class="info">
                <ul>
                  <li>201<br>views</li>
                  <li>95<br>likes</li>
                  <li>10<br>comments</li>
                </ul>
              </div>
            </a>
          </div>
          <div class="col-md-4 img-thumbnail">
            <a data-fancybox="gallery" href="#" class="galery-item-link">
              <img class="img-fluid w-100" src="images/img-3.jpg" alt="image">
              <div class="info">
                <ul>
                  <li>201<br>views</li>
                  <li>95<br>likes</li>
                  <li>10<br>comments</li>
                </ul>
              </div>
            </a>
          </div>
          <div class="col-md-4 img-thumbnail">
            <a data-fancybox="gallery" href="#" class="galery-item-link">
              <img class="img-fluid w-100" src="images/img-4.jpg" alt="image">
              <div class="info">
                <ul>
                  <li>201<br>views</li>
                  <li>95<br>likes</li>
                  <li>10<br>comments</li>
                </ul>
              </div>
            </a>
          </div>
          <div class="col-md-4 img-thumbnail">
            <a data-fancybox="gallery" href="#" class="galery-item-link">
              <img class="img-fluid w-100" src="images/img-5.jpg" alt="image">
              <div class="info">
                <ul>
                  <li>201<br>views</li>
                  <li>95<br>likes</li>
                  <li>10<br>comments</li>
                </ul>
              </div>
            </a>
          </div>
          <div class="col-md-4 img-thumbnail">
            <a data-fancybox="gallery" href="#" class="galery-item-link">
              <img class="img-fluid w-100" src="images/img-6.jpg" alt="image">
              <div class="info">
                <ul>
                  <li>201<br>views</li>
                  <li>95<br>likes</li>
                  <li>10<br>comments</li>
                </ul>
              </div>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

css-код

.middle-block {
  background-color: #ffffff;
  color: #333333;
  padding-bottom: 3.125rem;
}

.title-recent {
  /*padding: 5rem 1.7rem 1.188rem;*/
  margin-top: 5rem;
  margin-left: 2rem;
  margin-right: 0.9375rem;
  padding-bottom: 1.188rem;
  font-family: "Helvetica Neue Bold";
  font-size: 0.9375rem;
  text-transform: capitalize;
  color: #464646;
  background-image: url(..//images/divider.png);
  background-repeat: repeat-x;
  background-position: 0 100%;
}

.galery-text-block {
  padding-left: 2rem;
  padding-right: 3rem;
}

.img-thumbnail {
  border: none;
  padding: 0.625rem;
}

.galery-item-link {
  display: block;
  position: relative;
}

.info {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(..//images/magnifying-glass.png), repeating-linear-gradient(-45deg, rgba(43, 43, 43, 0.75), rgba(43, 43, 43, 0.75) 3px, rgba(47, 47, 47, 0.75) 1px, rgba(47, 47, 47, 0.75) 4px);
  background-repeat: no-repeat;
  background-position: 50% 40%;
}

.info ul {
  position: absolute;
  bottom: 1.125rem;
}

.info li {
  display: inline-block;
  font-family: "Helvetica Neue Medium";
  font-size: 0.75rem;
  text-transform: capitalize;
  color: #ffffff;
  margin-right: 2.125rem;
}

.info li:last-child {
  margin-right: 0;
}

.galery-item-link:hover .info {
  display: block;
}

Проблемы возникли, когда стало понятно, что всё это дело является слайдером.
Никак не получается его сделать...

Answer 1

[tyzberd]

делите на несколько слайдов по 6 миниатюр и подключаете на выбор
kenwheeler.github.io/slick
https://owlcarousel2.github.io/OwlCarousel2/index.html
idangero.us/swiper/demos

потом к каждой миниатюре добавляете
fancybox2 или 3 https://fancyapps.com/fancybox/3/

Answer 2

[Максим Тимофеев]

fancybox.net

Comments

[Марина Калюжная]

Смотрела в эту сторону - не то, что нужно.
См. скрин - на нём видно, что часть страницы занимает плитка из миниатюр изображений, а над ними, на уровне заголовка "Recent Work" виднеются индикаторы бутстраповского слайдера.
Возможно, я не до конца понимаю возможности fancybox?

[Максим Тимофеев]

Марина Калюжная, А чего Вы решили, что это слайдер? Это пагинация видимо. Если страниц не много, то можно с помощью бутстраповких табов реализовать. Если много придется добавить ajax

[Марина Калюжная]

Максим Тимофеев, подумала ,что это слайдер, когда увидела типичные бутстрапоские индикаторы. Попробую сделать с пагинацией, спасибо)