css 如何更改 Bootstrap 轮播的间隔时间?

xmq68pz9  于 2023-02-10  发布在  Bootstrap
关注(0)|答案(7)|浏览(233)

我的网页上有一个 Bootstrap 轮播,我正在尝试增加每张幻灯片之间的时间间隔。默认的5000毫秒的延迟太快了,我需要大约10秒。

8ljdwjyq

8ljdwjyq1#

您还可以使用数据间隔属性,例如<div class="carousel" data-interval="10000">

r6hnlfcb

r6hnlfcb2#

您可以在初始化转盘时使用这些选项,如下所示:

// interval is in milliseconds. 1000 = 1 second -> so 1000 * 10 = 10 seconds
$('.carousel').carousel({
  interval: 1000 * 10
});

也可以直接在HTML标记上使用interval属性,如下所示:

<div class="carousel" data-interval="10000">

后一种方法的优点是您不必为它编写任何JS-而前一种方法的优点是您可以在运行时 * 计算 * 间隔并使用变量值初始化它。

yqyhoc1h

yqyhoc1h3#

摆脱它的最佳方法是添加或修改data-interval属性,如下所示:

<div data-ride="carousel" class="carousel slide" data-interval="10000" id="myCarousel">

它以ms为单位,就像通常以js为单位一样,因此1000 = 1 s,3000 = 3s...... 10000 = 10 s。
顺便说一下,你也可以指定它为0,不自动滑动。这是有用的,例如,当显示产品图像在移动的。

<div data-ride="carousel" class="carousel slide" data-interval="0" id="myCarousel">
8yparm6h

8yparm6h4#

You need to set interval in  main div as data-interval tag .
        so it is working fine and you can give different time to different slides.

       <!--main div -->
      <div data-ride="carousel" class="carousel slide" data-interval="100" id="carousel-example-generic">
  <!-- Indicators -->
  <ol class="carousel-indicators">
                                <li data-target="#carousel-example-generic" data-slide-to="0" class=""></li>
                             i>
                                            </ol>

  <!-- Wrapper for slides -->
  <div role="listbox" class="carousel-inner">
       <div class="item">
          <a class="carousel-image" href="#">
           <img alt="image" src="image.jpg">
          </a>
        </div>
    </div>
 </div>
k2arahey

k2arahey5#

您可以简单地使用carousel类的data-interval属性。
其默认值设置为data-interval="3000",即3秒。
您所需要做的就是将其设置为所需的要求。

68bkxrlz

68bkxrlz6#

<div class="carousel-inner text-right">
                  <div class="carousel-item active text-center" id="first"  data-interval="1000" >
                    <img src="images/slide-1.gif" alt="slide-1">
                  </div>
                  <div class="carousel-item  text-center" id="second"  data-interval="2000" >
                    <img src="images/slide-2.gif" alt="slide-2">
                  </div>
                  <div class="carousel-item  text-center" id="third"  data-interval="3000" >
                    <img src="images/slide-3.gif" alt="slide-3">
                  </div>
                  <div class="carousel-item text-center" id="four"  data-interval="5000" >
                    <img src="images/slide-4.gif" alt="slide-4">
                  </div>
                </div>

您还可以更改不同的幻灯片。

idfiyjo8

idfiyjo87#

您可以在数据和间隔之间添加'bs'(data-bs-interval=“10000),这在新版本的Bootstrap上有效。

相关问题