img图库的自动滚动缩略图

Question

我想制作一堆我在页面上自动滚动的图像。我环顾四周，但似乎找不到合适的答案来做到这一点。我不认为轮播是我要寻找的...答案可能与Jquery或JavaScript有关，尽管我不确定。

布局：

那么，说我还有10张图片，如何将它们添加到这一行以使其在屏幕上滚动？

img画廊html：

<div style="background-color: #54c545;">
  <div class="container">

    <!-- Grid row-->
    <div class="row py-4 d-flex align-items-center">

      <div class="container">
        <h2>Image Gallery</h2>

        <div class="row">
          <div class="col-md-2">
            <div class="thumbnail">

              <img src="img/holoContin.png" alt="Lights" style="width:100%">


            </div>
          </div>
          <!-- end col -->
          <div class="col-md-2">
            <div class="thumbnail">

              <img src="img/holoAns.png" alt="Nature" style="width:100%">


            </div>
          </div>
          <!-- end col -->
          <div class="col-md-2">
            <div class="thumbnail">

              <img src="img/holoAns.png" alt="Nature" style="width:100%">


            </div>
          </div>
          <!-- end col -->
          <div class="col-md-2">
            <div class="thumbnail">

              <img src="img/holoAns.png" alt="Nature" style="width:100%">


            </div>
          </div>
          <!-- end col -->
          <div class="col-md-2">
            <div class="thumbnail">

              <img src="img/holoAns.png" alt="Nature" style="width:100%">


            </div>
          </div>
          <!-- end col -->
          <div class="col-md-2">
            <div class="thumbnail">

              <img src="img/holoAns.png" alt="Nature" style="width:100%">


            </div>
          </div>
          <!-- end col -->

        </div>
      </div>





    </div>
    <!-- Grid row-->

  </div>
  <!-- end img gallery container -->
</div>

Answer 1

为什么不轮播：https://owlcarousel2.github.io/OwlCarousel2/ ？???

您可以在<a>内或<div>的正下方放置另外十个客户端图像，并使用插件对其进行初始化。在小提琴示例中，我改用图标。

jsfiddle： http://jsfiddle.net/aq9Laaew/125272/

由于您在OP中没有做太多解释，因此我也没有对如何使用OwlCarousel插件进行过多解释。请阅读他们的文档。