如何在引导轮播下使缩略图可滚动？

【问题标题】：How to make thumbnails scrollable under a bootstrap carousel?如何在引导轮播下使缩略图可滚动？
【发布时间】：2020-06-20 05:36:44
【问题描述】：

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

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

  • 问题 1： 左箭头（红色）和右箭头（绿色）与我的缩略图容器重叠，这使得箭头不在滑块中垂直居中，而是在整个轮播中垂直居中。
  • 问题 2： 我需要将最底部的 Previous 和 Next 链接更改为左侧的箭头形状和右侧的另一个箭头由于上述问题 1 而滚动缩略图。

如何解决以上 2 个问题？

这是我的代码，也可以在以下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/

【问题讨论】：

  • 又是轮播问题，目标不同，很好

标签： css twitter-bootstrap bootstrap-4 carousel


【解决方案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>

【讨论】：

  • 感谢您的回答！我需要 Previous 和 Next 按钮仅显示为箭头，一个在最左边，一个在最右边，在缩略图上方，就像箭头上的箭头一样幻灯片。我不希望按钮像没有那样单独显示
  • @John 我更新了代码 sn-p。和jsfiddle。这适合您吗？
  • @sanriot 我喜欢你的回答和解决问题的精神
  • @NishargShah 感谢您的反馈！我想重新考虑答案句的结构，以便清楚我要传达的内容。我的回答有什么问题？
  • @John 尝试将border: none; 应用到#carousel_indicators &gt; li 和margin-bottom: 0 到#carousel-thumb figure.carousel-item。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2020-12-17
  • 1970-01-01
  • 2016-08-10
  • 1970-01-01
  • 1970-01-01
  • 2017-07-14
相关资源
最近更新 更多
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode