时间戳

首页 > 解决方案 > img画廊的自动滚动缩略图

javascript - img画廊的自动滚动缩略图

问题描述

我想做一堆我在页面上自动滚动的图像。我环顾四周，但似乎无法找到正确的答案来做到这一点。我不认为轮播是我正在寻找的……答案可能在于 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>

标签： javascriptjqueryhtmlcssbootstrap-4

解决方案

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

您可以将另外 10 个客户端图像放在 a 内<a>或直接在 a 下<div>，并使用插件对其进行初始化。在小提琴示例中，我使用了图标。

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

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

推荐阅读