Comment rendre le carrousel d'amorçage trop lent

Bootstrap est un framework CSS très facile à utiliser qui intègre la mise en page et les effets spéciaux couramment utilisés sur diverses pages. Le carrousel d'images en fait partie

. Si vous souhaitez modifier l'intervalle de temps de rotation de l'image, il n'est bien entendu pas recommandé de modifier directement le code source. La méthode est en fait très simple. (Apprentissage recommandé : Tutoriel vidéo Bootstrap)

Code officiel du graphique carrousel BootStrap

<!--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>

Deux façons de modifier l'intervalle de temps du graphique carrousel

🎜>

Ajoutez un attribut data-interval="millisecond" après data-ride, où milliseconde est le nombre de millisecondes qui doivent être définies, comme suit :

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

Utilisez les instructions JavaScript pour implémenter :

Le code fourni par le site officiel est :

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

Pour plus d'articles techniques liés à Bootstrap, veuillez visiter le Bootstrap Tutorielcolonne Commencez à étudier !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!