Mari_junior
@Mari_junior
Студентка, недавно начала изучать html/css/js

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

Нужно к галерее миниатюр прикрутить слайдер как показано на скрине:
фрагмент верстаемого макета
5a7af05b81ba8512241770.jpeg

Есть следующий код для, непосредственно, галереи:
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;
}


Проблемы возникли, когда стало понятно, что всё это дело является слайдером.
Никак не получается его сделать...
  • Вопрос задан
  • 180 просмотров
Решения вопроса 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/
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
webinar
@webinar
Учим yii: https://youtu.be/-WRMlGHLgRg
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через TM ID
Похожие вопросы
17 нояб. 2018, в 19:01
20000 руб./за проект
17 нояб. 2018, в 17:59
10000 руб./за проект
17 нояб. 2018, в 17:27
6000 руб./за проект