How to set bootstrap carousel too slow-Bootstrap Tutorial-php.cn

How to set bootstrap carousel too slow

(*-*)浩

Release： 2019-07-11 13:13:53

Original

3257 people have browsed it

bootstrap is a very easy-to-use CSS framework that integrates layout and special effects commonly used on various pages. Image carousel is one of them

How to set bootstrap carousel too slow

To modify the time interval of image rotation, of course it is not recommended to modify the source code directly. The method is actually very simple. (Recommended learning: Bootstrap video tutorial)

BootStrap carousel chart official code

<!--data-ride设置图片切换方式为滑动 -->
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- 设置轮播图的数量和顺序-->
  <!--data-target的值应与上面的id值对应 -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>

  <!-- 要展示的图片信息 -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    <div class="item">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    ...
  </div>

  <!-- 控制图标 -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

Copy after login

Two ways to change the time interval of the carousel chart

Add an attribute data-interval="millisecond" after data-ride, where millisecond is the number of milliseconds that need to be set, as follows:

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="1000">

Copy after login

Use JavaScript statements to implement:

The code given by the official website is:

$(function(){
	$('#carousel-example-generic').carousel({interval:1000});
});

Copy after login

For more Bootstrap related technical articles, please visit the Bootstrap Tutorial column Get studying!

The above is the detailed content of How to set bootstrap carousel too slow. For more information, please follow other related articles on the PHP Chinese website!