Как сделать, чтобы миниатюры прокручивались под bootstrap каруселью?

Question

Я пытаюсь изменить индикаторы в Bootstrap 4.4 карусели с черточек на миниатюры под слайдами. Я также хочу иметь возможность прокручивать / прокручивать миниатюры отдельно, чтобы позволить пользователю просматривать все миниатюры.

Мне удалось изменить индикаторы с тире на миниатюры. Тем не менее, я сталкиваюсь со следующими проблемами

• Задача 1: Стрелка влево (красная) и стрелка вправо (зеленая) перекрывают мой контейнер миниатюр, что делает стрелки не вертикально по центру в ползунке, а по вертикали во всей карусели.
• Задача 2: Мне нужно изменить ссылки Предыдущие и Далее в самом низу на форму стрелки слева и еще одну стрелку справа прокручивать миниатюры из-за Проблема 1 выше.

Как я могу исправить вышеупомянутые 2 проблемы?

Вот мой код, а также можно можно найти на следующей скрипке

        window.addEventListener('load', function () {
            var button = document.getElementById('slideBack1');
            var container = document.getElementById('carousel_indicators');

            button.addEventListener("click", function (event) {
                event.preventDefault();
                sideScroll(container, 'right', 25, 100, 10);
            });

            var back = document.getElementById('slideNext1');
            back.addEventListener("click", function (event) {
                event.preventDefault();
                sideScroll(container, 'left', 25, 100, 10);
            });

            function sideScroll(element, direction, speed, distance, step) {
                scrollAmount = 0;
                var slideTimer = setInterval(function () {
                    if (direction == 'left') {
                        element.scrollLeft -= step;
                    } else {
                        element.scrollLeft += step;
                    }
                    scrollAmount += step;
                    if (scrollAmount >= distance) {
                        window.clearInterval(slideTimer);
                    }
                }, speed);
            }
        });

       body {
            background-color: #ccc;
        }

        .carousel-control-prev {
           background-color: red;
        }
        
        .carousel-control-next {
           background-color: green;
        }
        .carousel-indicators {
            overflow: auto;
            overflow-y: hidden;
            -ms-overflow-style: scroll;
            scrollbar-width: none;
            position: relative !important;
            margin-right: 0 !important;
            margin-left: 0 !important;
        }

            .carousel-indicators::-webkit-scrollbar {
                display: none;
            }


            .carousel-indicators li {
                height: 3.75rem !important;
                width: 5rem !important;
            }

        ol li img.img-tn {
            height: 100%;
            display: block;
            object-fit: cover;
            padding: 0.10rem;
        }

        .carousel-control-prev-icon-thumbs {
        }

        .carousel-control-next-icon-thumbs {
        }

        .carousel-inner {
            width: 100%;
            height: 75%;
        }

        figure picture img.image-cover {
            width: 100%;
            height: 25rem;
            object-fit: cover;
        }

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

<div class="container my-4">

    <div class="row">

        <div class="col-md-10 offset-md-1">

            <!--Carousel Wrapper-->
            <div id="carousel-thumb" class="carousel slide carousel-fade carousel-thumbnails" data-ride="carousel" data-interval="false">

                <!--Upper Level-->
                <div>
                    <!--Slides-->
                    <div class="carousel-inner" role="listbox">
                        <!--Image 1-->
                        <figure class="carousel-item active">
                            <picture>
                                <img class="image-cover" src="https://photos.zillowstatic.com/cc_ft_768/ISv4f3q9br50lc0000000000.webp" alt="First slide">
                            </picture>
                            <figcaption class="carousel-caption d-none d-md-block">I am an image caption</figcaption>
                        </figure>
                        <!--/.Image 1-->
                        <!--Image 2-->
                        <figure class="carousel-item">
                            <picture>
                                <img class="image-cover" src="https://photos.zillowstatic.com/cc_ft_384/ISnycr737jx2lc0000000000.webp" alt="First slide">
                            </picture>
                            <figcaption class="carousel-caption d-none d-md-block">I am an image caption</figcaption>
                        </figure>
                        <!--/.Image 2-->
                        <!--Image 3-->
                        <figure class="carousel-item">
                            <picture>
                                <img class="image-cover" src="https://photos.zillowstatic.com/cc_ft_384/IS7m837qy2h8lc0000000000.webp" alt="First slide">
                            </picture>
                            <figcaption class="carousel-caption d-none d-md-block">I am an image caption</figcaption>
                        </figure>
                        <!--/.Image 3-->
                        <!--Image 4-->
                        <figure class="carousel-item">
                            <picture>
                                <img class="image-cover" src="https://photos.zillowstatic.com/cc_ft_384/ISzf6rojuu8blc0000000000.webp" alt="First slide">
                            </picture>
                            <figcaption class="carousel-caption d-none d-md-block">I am an image caption</figcaption>
                        </figure>
                        <!--/.Image 4-->
                        <!--Image 5-->
                        <figure class="carousel-item">
                            <picture>
                                <img class="image-cover" src="https://photos.zillowstatic.com/cc_ft_384/ISj323o6mesglc0000000000.webp" alt="First slide">
                            </picture>
                            <figcaption class="carousel-caption d-none d-md-block">I am an image caption</figcaption>
                        </figure>
                        <!--/.Image 5-->
                        <!--Image 6-->
                        <figure class="carousel-item">
                            <picture>
                                <img class="image-cover" src="https://photos.zillowstatic.com/cc_ft_384/ISbxzq50i6kjlc0000000000.webp" alt="First slide">
                            </picture>
                            <figcaption class="carousel-caption d-none d-md-block">I am an image caption</figcaption>
                        </figure>
                        <!--/.Image 6-->
                        <!--Image 7-->
                        <figure class="carousel-item">
                            <picture>
                                <img class="image-cover" src="https://photos.zillowstatic.com/cc_ft_384/IS3rxentdybmlc0000000000.webp" alt="First slide">
                            </picture>
                            <figcaption class="carousel-caption d-none d-md-block">I am an image caption</figcaption>
                        </figure>
                        <!--/.Image 7-->
                        <!--Image 8-->
                        <figure class="carousel-item">
                            <picture>
                                <img class="image-cover" src="https://photos.zillowstatic.com/cc_ft_384/ISnetqmg5ivrlc0000000000.webp" alt="First slide">
                            </picture>
                            <figcaption class="carousel-caption d-none d-md-block">I am an image caption</figcaption>
                        </figure>
                        <!--/.Image 8-->
                        <!--Image 9-->
                        <figure class="carousel-item">
                            <picture>
                                <img class="image-cover" src="https://photos.zillowstatic.com/cc_ft_384/IS72p2m3x1fxlc0000000000.webp" alt="First slide">
                            </picture>
                            <figcaption class="carousel-caption d-none d-md-block">I am an image caption</figcaption>
                        </figure>
                        <!--/.Image 9-->
                        <!--Image 10-->
                        <figure class="carousel-item">
                            <picture>
                                <img class="image-cover" src="https://photos.zillowstatic.com/cc_ft_384/ISzvmq3xst60mc0000000000.webp" alt="First slide">
                            </picture>
                            <figcaption class="carousel-caption d-none d-md-block">I am an image caption</figcaption>
                        </figure>
                        <!--/.Image 10-->
                        <!--Image 11-->
                        <figure class="carousel-item">
                            <picture>
                                <img class="image-cover" src="https://photos.zillowstatic.com/cc_ft_384/ISrpkelqoly2mc0000000000.webp" alt="First slide">
                            </picture>
                            <figcaption class="carousel-caption d-none d-md-block">I am an image caption</figcaption>
                        </figure>
                        <!--/.Image 11-->
                        <!--Image 12-->
                        <figure class="carousel-item">
                            <picture>
                                <img class="image-cover" src="https://photos.zillowstatic.com/cc_ft_384/ISbdgqkdg5i8mc0000000000.webp" alt="First slide">
                            </picture>
                            <figcaption class="carousel-caption d-none d-md-block">I am an image caption</figcaption>
                        </figure>
                        <!--/.Image 12-->
                        <!--Image 13-->
                        <figure class="carousel-item">
                            <picture>
                                <img class="image-cover" src="https://p.askareen.com/1/141152923/4.jpg" alt="First slide">
                            </picture>
                            <figcaption class="carousel-caption d-none d-md-block">I am an image caption</figcaption>
                        </figure>
                        <!--/.Image 13-->
                    </div>
                    <!--/.Slides-->
                    <!--Controls-->
                    <div>
                        <a class="carousel-control-prev" href="#carousel-thumb" role="button" data-slide="prev">
                            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                            <span class="sr-only">Previous</span>
                        </a>
                        <a class="carousel-control-next" href="#carousel-thumb" role="button" data-slide="next">
                            <span class="carousel-control-next-icon" aria-hidden="true"></span>
                            <span class="sr-only">Next</span>
                        </a>
                    </div>
                    <!--/.Controls-->
                </div>
                <!--./Upper Level-->
                <!--Thumbnails-->
                <div class="scoll-pane" id="scoll_pane">
                    <ol class="carousel-indicators" id="carousel_indicators">
                        <!--Thumbnail 1-->
                        <li data-target="#carousel-thumb" data-slide-to="0" class="active">
                            <picture>
                                <img src="https://photos.zillowstatic.com/cc_ft_768/ISv4f3q9br50lc0000000000.webp" class="img-tn">
                            </picture>
                        </li>
                        <!--/.Thumbnail 1-->
                        <!--Thumbnail 2-->
                        <li data-target="#carousel-thumb" data-slide-to="1">
                            <picture>
                                <img src="https://photos.zillowstatic.com/cc_ft_384/ISnycr737jx2lc0000000000.webp" class="img-tn">
                            </picture>
                        </li>
                        <!--Thumbnail 2-->
                        <!--Thumbnail 3-->
                        <li data-target="#carousel-thumb" data-slide-to="2">
                            <picture>
                                <img src="https://photos.zillowstatic.com/cc_ft_384/IS7m837qy2h8lc0000000000.webp" class="img-tn">
                            </picture>
                        </li>
                        <!--/.Thumbnail 3-->
                        <!--Thumbnail 4-->
                        <li data-target="#carousel-thumb" data-slide-to="3">
                            <picture>
                                <img src="https://photos.zillowstatic.com/cc_ft_384/ISzf6rojuu8blc0000000000.webp" class="img-tn">
                            </picture>
                        </li>
                        <!--/.Thumbnail 4-->
                        <!--Thumbnail 5-->
                        <li data-target="#carousel-thumb" data-slide-to="4">
                            <picture>
                                <img src="https://photos.zillowstatic.com/cc_ft_384/ISj323o6mesglc0000000000.webp" class="img-tn">
                            </picture>
                        </li>
                        <!--/.Thumbnail 5-->
                        <!--Thumbnail 6-->
                        <li data-target="#carousel-thumb" data-slide-to="5">
                            <picture>
                                <img src="https://photos.zillowstatic.com/cc_ft_384/IS3rxentdybmlc0000000000.webp" class="img-tn">
                            </picture>
                        </li>
                        <!--/.Thumbnail 6-->
                        <!--Thumbnail 7-->
                        <li data-target="#carousel-thumb" data-slide-to="6">
                            <picture>
                                <img src="https://photos.zillowstatic.com/cc_ft_384/IS3rxentdybmlc0000000000.webp" class="img-tn">
                            </picture>
                        </li>
                        <!--/.Thumbnail 7-->
                        <!--Thumbnail 8-->
                        <li data-target="#carousel-thumb" data-slide-to="7">
                            <picture>
                                <img src="https://photos.zillowstatic.com/cc_ft_384/ISnetqmg5ivrlc0000000000.webp" class="img-tn">
                            </picture>
                        </li>
                        <!--/.Thumbnail 8-->
                        <!--Thumbnail 9-->
                        <li data-target="#carousel-thumb" data-slide-to="8">
                            <picture>
                                <img src="https://photos.zillowstatic.com/cc_ft_384/IS72p2m3x1fxlc0000000000.webp" class="img-tn">
                            </picture>
                        </li>
                        <!--/.Thumbnail 9-->
                        <!--Thumbnail 10-->
                        <li data-target="#carousel-thumb" data-slide-to="9">
                            <picture>
                                <img src="https://photos.zillowstatic.com/cc_ft_384/ISzvmq3xst60mc0000000000.webp" class="img-tn">
                            </picture>
                        </li>
                        <!--/.Thumbnail 10-->
                        <!--Thumbnail 11-->
                        <li data-target="#carousel-thumb" data-slide-to="10">
                            <picture>
                                <img src="https://photos.zillowstatic.com/cc_ft_384/ISrpkelqoly2mc0000000000.webp" class="img-tn">
                            </picture>
                        </li>
                        <!--/.Thumbnail 11-->
                        <!--Thumbnail 12-->
                        <li data-target="#carousel-thumb" data-slide-to="11">
                            <picture>
                                <img src="https://photos.zillowstatic.com/cc_ft_384/ISbdgqkdg5i8mc0000000000.webp" class="img-tn">
                            </picture>
                        </li>
                        <!--/.Thumbnail 12-->
                        <!--Thumbnail 13-->
                        <li data-target="#carousel-thumb" data-slide-to="12">
                            <picture>
                                <img src="https://p.askareen.com/1/141152923/4.jpg" class="img-tn">
                            </picture>
                        </li>
                        <!--/.Thumbnail 13-->

                    </ol>

                    <!--Silder Controls-->
                    <div class="text-center">
                        <a class="carousel-control-prev-thumbs" href="#" id="slideBack1">
                            <span class="carousel-control-prev-icon-thumbs" aria-hidden="true"></span>
                            <span>Previous</span>
                        </a>
                        <a class="carousel-control-next-thumbs" href="#" id="slideNext1">
                            <span class="carousel-control-next-icon-thumbs" aria-hidden="true"></span>
                            <span>Next</span>
                        </a>
                    </div>
                    <!--/.Silder Controls-->

                </div>


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


        </div>

    </div>
</div>

https://jsfiddle.net/h02pvquk/

Answer 1

Вставка элементов управления в .carousel-inner решает проблему 1.

<!--Carousel Wrapper-->
<div id="carousel-thumb" class="carousel slide carousel-fade carousel-thumbnails" data-ride="carousel" data-interval="false">

  <!--Upper Level-->
  <div>
    <!--Slides-->
    <div class="carousel-inner" role="listbox">
      <!-- Images ... -->
      <!--Controls-->
      <div>
        <a class="carousel-control-prev" href="#carousel-thumb" role="button" data-slide="prev">
          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
          <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next" href="#carousel-thumb" role="button" data-slide="next">
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="sr-only">Next</span>
        </a>
      </div>
      <!--/.Controls-->
    </div>
    <!--/.Slides-->

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

---

Глядя на код, взятый из приведенного ниже вопроса, задача 2 может использовать класс .carousel-control-prev-icon, .carousel-control-next-icon вместо .carousel-control-prev-icon-thumbs, carousel-control-next-icon-thumbs.

<!--Silder Controls-->
<div class="text-center">
  <a class="carousel-control-prev-thumbs" href="#" id="slideBack1">
    <span class="carousel-control-prev-icon-thumbs" aria-hidden="true"></span>
    <span>Previous</span>
  </a>
  <a class="carousel-control-next-thumbs" href="#" id="slideNext1">
    <span class="carousel-control-next-icon-thumbs" aria-hidden="true"></span>
    <span>Next</span>
  </a>
</div>
<!--/.Silder Controls-->

---

Окончательный код выглядит следующим образом:

window.addEventListener('load', function() {
  var button = document.getElementById('slideBack1');
  var container = document.getElementById('carousel_indicators');

  button.addEventListener("click", function(event) {
    event.preventDefault();
    sideScroll(container, 'left', 25, 100, 10); //right->left
  });

  var back = document.getElementById('slideNext1');
  back.addEventListener("click", function(event) {
    event.preventDefault();
    sideScroll(container, 'right', 25, 100, 10);//left->right
  });

  function sideScroll(element, direction, speed, distance, step) {
    scrollAmount = 0;
    var slideTimer = setInterval(function() {
      if (direction == 'left') {
        element.scrollLeft -= step;
      } else {
        element.scrollLeft += step;
      }
      scrollAmount += step;
      if (scrollAmount >= distance) {
        window.clearInterval(slideTimer);
      }
    }, speed);
  }
});

body {
  background-color: #ccc;
}

#slideBack1>.carousel-control-prev-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23009be1' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E");
}

#slideNext1>.carousel-control-next-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23009be1' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E");
}

#scoll_pane {
position: relative;
}
#slideBack1, #slideNext1 {
z-index: 16;
background: yellow;
}

.carousel-control-prev {
  background-color: red;
}

.carousel-control-next {
  background-color: green;
}

.carousel-indicators {
  overflow: auto;
  overflow-y: hidden;
  -ms-overflow-style: scroll;
  scrollbar-width: none;
  position: relative !important;
  margin-right: 0 !important;
  margin-left: 0 !important;
}

.carousel-indicators::-webkit-scrollbar {
  display: none;
}

.carousel-indicators li {
  height: 3.75rem !important;
  width: 5rem !important;
}

ol li img.img-tn {
  height: 100%;
  display: block;
  object-fit: cover;
  padding: 0.10rem;
}

.carousel-control-prev-icon-thumbs {}

.carousel-control-next-icon-thumbs {}

.carousel-inner {
  width: 100%;
  height: 75%;
}

figure picture img.image-cover {
  width: 100%;
  height: 25rem;
  object-fit: cover;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

<div class="container my-4">

  <div class="row">

    <div class="col-md-10 offset-md-1">

      <!--Carousel Wrapper-->
      <div id="carousel-thumb" class="carousel slide carousel-fade carousel-thumbnails" data-ride="carousel" data-interval="false">

        <!--Upper Level-->
        <div>
          <!--Slides-->
          <div class="carousel-inner" role="listbox">
            <!--Image 1-->
            <figure class="carousel-item active">
              <picture>
                <img class="image-cover" src="https://photos.zillowstatic.com/cc_ft_768/ISv4f3q9br50lc0000000000.webp" alt="First slide">
              </picture>
              <figcaption class="carousel-caption d-none d-md-block">I am an image caption</figcaption>
            </figure>
            <!--/.Image 1-->
            <!--Image 2-->
            <figure class="carousel-item">
              <picture>
                <img class="image-cover" src="https://photos.zillowstatic.com/cc_ft_384/ISnycr737jx2lc0000000000.webp" alt="First slide">
              </picture>
              <figcaption class="carousel-caption d-none d-md-block">I am an image caption</figcaption>
            </figure>
            <!--/.Image 2-->
            <!--Image 3-->
            <figure class="carousel-item">
              <picture>
                <img class="image-cover" src="https://photos.zillowstatic.com/cc_ft_384/IS7m837qy2h8lc0000000000.webp" alt="First slide">
              </picture>
              <figcaption class="carousel-caption d-none d-md-block">I am an image caption</figcaption>
            </figure>
            <!--/.Image 3-->
            <!--Image 4-->
            <figure class="carousel-item">
              <picture>
                <img class="image-cover" src="https://photos.zillowstatic.com/cc_ft_384/ISzf6rojuu8blc0000000000.webp" alt="First slide">
              </picture>
              <figcaption class="carousel-caption d-none d-md-block">I am an image caption</figcaption>
            </figure>
            <!--/.Image 4-->
            <!--Image 5-->
            <figure class="carousel-item">
              <picture>
                <img class="image-cover" src="https://photos.zillowstatic.com/cc_ft_384/ISj323o6mesglc0000000000.webp" alt="First slide">
              </picture>
              <figcaption class="carousel-caption d-none d-md-block">I am an image caption</figcaption>
            </figure>
            <!--/.Image 5-->
            <!--Image 6-->
            <figure class="carousel-item">
              <picture>
                <img class="image-cover" src="https://photos.zillowstatic.com/cc_ft_384/ISbxzq50i6kjlc0000000000.webp" alt="First slide">
              </picture>
              <figcaption class="carousel-caption d-none d-md-block">I am an image caption</figcaption>
            </figure>
            <!--/.Image 6-->
            <!--Image 7-->
            <figure class="carousel-item">
              <picture>
                <img class="image-cover" src="https://photos.zillowstatic.com/cc_ft_384/IS3rxentdybmlc0000000000.webp" alt="First slide">
              </picture>
              <figcaption class="carousel-caption d-none d-md-block">I am an image caption</figcaption>
            </figure>
            <!--/.Image 7-->
            <!--Image 8-->
            <figure class="carousel-item">
              <picture>
                <img class="image-cover" src="https://photos.zillowstatic.com/cc_ft_384/ISnetqmg5ivrlc0000000000.webp" alt="First slide">
              </picture>
              <figcaption class="carousel-caption d-none d-md-block">I am an image caption</figcaption>
            </figure>
            <!--/.Image 8-->
            <!--Image 9-->
            <figure class="carousel-item">
              <picture>
                <img class="image-cover" src="https://photos.zillowstatic.com/cc_ft_384/IS72p2m3x1fxlc0000000000.webp" alt="First slide">
              </picture>
              <figcaption class="carousel-caption d-none d-md-block">I am an image caption</figcaption>
            </figure>
            <!--/.Image 9-->
            <!--Image 10-->
            <figure class="carousel-item">
              <picture>
                <img class="image-cover" src="https://photos.zillowstatic.com/cc_ft_384/ISzvmq3xst60mc0000000000.webp" alt="First slide">
              </picture>
              <figcaption class="carousel-caption d-none d-md-block">I am an image caption</figcaption>
            </figure>
            <!--/.Image 10-->
            <!--Image 11-->
            <figure class="carousel-item">
              <picture>
                <img class="image-cover" src="https://photos.zillowstatic.com/cc_ft_384/ISrpkelqoly2mc0000000000.webp" alt="First slide">
              </picture>
              <figcaption class="carousel-caption d-none d-md-block">I am an image caption</figcaption>
            </figure>
            <!--/.Image 11-->
            <!--Image 12-->
            <figure class="carousel-item">
              <picture>
                <img class="image-cover" src="https://photos.zillowstatic.com/cc_ft_384/ISbdgqkdg5i8mc0000000000.webp" alt="First slide">
              </picture>
              <figcaption class="carousel-caption d-none d-md-block">I am an image caption</figcaption>
            </figure>
            <!--/.Image 12-->
            <!--Image 13-->
            <figure class="carousel-item">
              <picture>
                <img class="image-cover" src="https://p.askareen.com/1/141152923/4.jpg" alt="First slide">
              </picture>
              <figcaption class="carousel-caption d-none d-md-block">I am an image caption</figcaption>
            </figure>
            <!--/.Image 13-->

            <!--Controls-->
            <div>
              <a class="carousel-control-prev" href="#carousel-thumb" role="button" data-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
              </a>
              <a class="carousel-control-next" href="#carousel-thumb" role="button" data-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
              </a>
            </div>
            <!--/.Controls-->
          </div>
          <!--/.Slides-->

        </div>
        <!--./Upper Level-->
        <!--Thumbnails-->
        <div class="scoll-pane" id="scoll_pane">
          <ol class="carousel-indicators justify-content-start" id="carousel_indicators">
            <!--Thumbnail 1-->
            <li data-target="#carousel-thumb" data-slide-to="0" class="active">
              <picture>
                <img src="https://photos.zillowstatic.com/cc_ft_768/ISv4f3q9br50lc0000000000.webp" class="img-tn">
              </picture>
            </li>
            <!--/.Thumbnail 1-->
            <!--Thumbnail 2-->
            <li data-target="#carousel-thumb" data-slide-to="1">
              <picture>
                <img src="https://photos.zillowstatic.com/cc_ft_384/ISnycr737jx2lc0000000000.webp" class="img-tn">
              </picture>
            </li>
            <!--Thumbnail 2-->
            <!--Thumbnail 3-->
            <li data-target="#carousel-thumb" data-slide-to="2">
              <picture>
                <img src="https://photos.zillowstatic.com/cc_ft_384/IS7m837qy2h8lc0000000000.webp" class="img-tn">
              </picture>
            </li>
            <!--/.Thumbnail 3-->
            <!--Thumbnail 4-->
            <li data-target="#carousel-thumb" data-slide-to="3">
              <picture>
                <img src="https://photos.zillowstatic.com/cc_ft_384/ISzf6rojuu8blc0000000000.webp" class="img-tn">
              </picture>
            </li>
            <!--/.Thumbnail 4-->
            <!--Thumbnail 5-->
            <li data-target="#carousel-thumb" data-slide-to="4">
              <picture>
                <img src="https://photos.zillowstatic.com/cc_ft_384/ISj323o6mesglc0000000000.webp" class="img-tn">
              </picture>
            </li>
            <!--/.Thumbnail 5-->
            <!--Thumbnail 6-->
            <li data-target="#carousel-thumb" data-slide-to="5">
              <picture>
                <img src="https://photos.zillowstatic.com/cc_ft_384/IS3rxentdybmlc0000000000.webp" class="img-tn">
              </picture>
            </li>
            <!--/.Thumbnail 6-->
            <!--Thumbnail 7-->
            <li data-target="#carousel-thumb" data-slide-to="6">
              <picture>
                <img src="https://photos.zillowstatic.com/cc_ft_384/IS3rxentdybmlc0000000000.webp" class="img-tn">
              </picture>
            </li>
            <!--/.Thumbnail 7-->
            <!--Thumbnail 8-->
            <li data-target="#carousel-thumb" data-slide-to="7">
              <picture>
                <img src="https://photos.zillowstatic.com/cc_ft_384/ISnetqmg5ivrlc0000000000.webp" class="img-tn">
              </picture>
            </li>
            <!--/.Thumbnail 8-->
            <!--Thumbnail 9-->
            <li data-target="#carousel-thumb" data-slide-to="8">
              <picture>
                <img src="https://photos.zillowstatic.com/cc_ft_384/IS72p2m3x1fxlc0000000000.webp" class="img-tn">
              </picture>
            </li>
            <!--/.Thumbnail 9-->
            <!--Thumbnail 10-->
            <li data-target="#carousel-thumb" data-slide-to="9">
              <picture>
                <img src="https://photos.zillowstatic.com/cc_ft_384/ISzvmq3xst60mc0000000000.webp" class="img-tn">
              </picture>
            </li>
            <!--/.Thumbnail 10-->
            <!--Thumbnail 11-->
            <li data-target="#carousel-thumb" data-slide-to="10">
              <picture>
                <img src="https://photos.zillowstatic.com/cc_ft_384/ISrpkelqoly2mc0000000000.webp" class="img-tn">
              </picture>
            </li>
            <!--/.Thumbnail 11-->
            <!--Thumbnail 12-->
            <li data-target="#carousel-thumb" data-slide-to="11">
              <picture>
                <img src="https://photos.zillowstatic.com/cc_ft_384/ISbdgqkdg5i8mc0000000000.webp" class="img-tn">
              </picture>
            </li>
            <!--/.Thumbnail 12-->
            <!--Thumbnail 13-->
            <li data-target="#carousel-thumb" data-slide-to="12">
              <picture>
                <img src="https://p.askareen.com/1/141152923/4.jpg" class="img-tn">
              </picture>
            </li>
            <!--/.Thumbnail 13-->
         
          </ol>

 <!--Silder Controls-->
          <div class="text-center">
            <a class="carousel-control-prev" href="#" id="slideBack1">
              <span class="carousel-control-prev-icon" aria-hidden="true"></span>
              <span class="sr-only">Previous</span>
            </a>
            <a class="carousel-control-next" href="#" id="slideNext1">
              <span class="sr-only">Next</span>

              <span class="carousel-control-next-icon" aria-hidden="true"></span>
            </a>
          </div>
          <!--/.Silder Controls-->

        </div>


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


    </div>

  </div>
</div>

• jsfiddle