Maison > interface Web > js tutoriel > le corps du texte

Comment utiliser le modèle de carrousel bootstrap (exemple de code)

PHPz
Libérer: 2018-10-16 15:38:49
original
2148 Les gens l'ont consulté

Cet article présente principalement comment utiliser le modèle de carrousel bootstrap, qui a une certaine valeur de référence. Les amis intéressés peuvent s'y référer. J'espère qu'il pourra aider tout le monde.

L'exemple de cet article partage le code spécifique pour l'affichage du modèle de carrousel bootstrap pour votre référence. Le contenu spécifique est le suivant

[Recommandations vidéo associées : Tutoriel Bootstrap

<html lang="en">
<head>
 <meta charset="UTF-8" />
 <title>Document</title>
 <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="external nofollow" >
 <style type="text/css">
  .carousel {
   height: 500px;
  }
  .carousel .item {
   height: 500px;
   background-color: #000;
  }
  .carousel .item img {
   width: 100%;
  }
  .carousel-caption {
   z-index: 10;
  }
 </style>
</head>
 <body>
  <!-- 轮播 -->
 <p id="ad-carousel" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
   <li data-slide-to="0" class="active"></li>
   <li data-slide-to="1"></li>
   <li data-slide-to="2"></li>
  </ol>
  <p class="carousel-inner">
   <p class="item active">
    <img src="http://img.glzy8.com/upfiles/www/ppt/jpg/24675.jpg" alt="1 slide">
    <p class="container">
     <p class="carousel-caption">
      文本区域
     </p>
    </p>
   </p>
   <p class="item">
    <img src="2F1-130516091446402.jpg" alt="2 slide">
    <p class="container">
     <p class="carousel-caption">
      文本区域
     </p>
    </p>
   </p>
   <p class="item">
    <img src="-110910214P238.jpg" alt="3 slide">
    <p class="container">
     <p class="carousel-caption">
      文本区域
     </p>
    </p>
   </p>
  </p>
  <a class="left carousel-control" href="#ad-carousel" data-slide="prev"><span
    class="glyphicon glyphicon-chevron-left"></span></a>
  <a class="right carousel-control" href="#ad-carousel" data-slide="next"><span
    class="glyphicon glyphicon-chevron-right"></span></a>
 </p>
 <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
 <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" ></script>
</body>
</html>
Copier après la connexion

Recommandations associées :

Explication du diagramme de carrousel à focale coulissante dans l'utilisation pratique du cadre de mouvement encapsulé

js implémente un carrousel fluide d'images au début et à la fin

Comment implémenter l'effet carrousel d'images Bootstrap

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal