css - 如何使缩略图在 Bootstrap 轮播下可滚动？

Question

我正在尝试更改 Bootstrap 4.4 carousel 中的指标从破折号到幻灯片下的缩略图。我还希望能够单独滚动/滑动缩略图，以使用户能够浏览所有缩略图。

我能够将指示器从破折号更改为缩略图。然而，我遇到了以下挑战

• 问题 1:左箭头(红色)和右箭头(绿色)与我的缩略图容器重叠，这使得箭头不在 slider 中垂直居中，而是在 slider 中垂直居中整个轮播。
• 问题 2:我需要将最底部的上一个和下一个链接更改为左侧的箭头形状和另一个箭头由于上述问题 1，请单击右侧的 来滚动缩略图。

如何解决以上两个问题？

这是我的代码，也可以在以下fiddle中找到

        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