Carrousel HTML utilisant du texte sur une image statique

Question

(nouveau) J'essaie d'obtenir une image statique avec un carrousel de texte différent traversant le haut. J'ai essayé d'utiliser le HTML du carrousel Bootstrap et de supprimer des sections (telles que les images multiples), et d'utiliser la classe "carousel-caption" pour mon texte, mais cela prendra un peu de style pour le centrer, etc. façon, mais s'il y a un moyen plus simple, s'il vous plaît faites le moi savoir! (Son dans une div jumbotron que j'utilisais une photo de ma section jumbotron pour la facilité) TIA

<div class="jumbotron" id="testimonials"> 
     <div class="container"> 
      <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> 
    <!-- Indicators --> 
    <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> 

    <!-- Wrapper for slides --> 
    <div class="carousel-inner" role="listbox"> 
    <div class="item active"> 
    <div class="carousel-text"> 
     <h3>Example headline</h3> 
     <p>Example description</p> 
     </div> 
     <!-- <img src="img/lesson8-portfolioheroimage2.jpg" alt="..."> --> 

    </div> 
    <div class="item"> 
     <!-- <img src="img/portfolioheroimage.jpg" alt="..."> --> 
     <div class="carousel-text"> 
     <h3>Example head</h3> 
     <p>Example description</p> 
     </div> 
    </div> 
    <div class="item"> 
     <!-- <img src="img/portfolioheroimage3.jpg" alt="..."> --> 
     <div class="carousel-text"> 
     <h3>Example headline</h3> 
     <p>Example descri</p> 
     </div> 
    </div> 
    </div> 

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


     </div><!-- container --> 
    </div><!-- jumbotron --> 

Answer 1

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<div class="jumbotron"> 
 
    <div class="container"> 
 

 
    <div id="myCarousel" class="carousel slide" data-ride="carousel"> 
 
     <!-- Indicators --> 
 
     <ol class="carousel-indicators"> 
 
     <li data-target="#myCarousel" data-slide-to="0" class="active"></li> 
 
     <li data-target="#myCarousel" data-slide-to="1"></li> 
 
     <li data-target="#myCarousel" data-slide-to="2"></li> 
 
     </ol> 
 

 
     <!-- Wrapper for slides --> 
 
     <div class="carousel-inner"> 
 
     <div class="item active"> 
 
      <div class="carousel-text"> 
 
      <h3>Example headline</h3> 
 
      <p>Example description</p> 
 
      </div> 
 
      <!-- <img src="img/lesson8-portfolioheroimage2.jpg" alt="..."> --> 
 

 
     </div> 
 
     <div class="item"> 
 
      <!-- <img src="img/portfolioheroimage.jpg" alt="..."> --> 
 
      <div class="carousel-text"> 
 
      <h3>Example head</h3> 
 
      <p>Example description</p> 
 
      </div> 
 
     </div> 
 
     <div class="item"> 
 
      <!-- <img src="img/portfolioheroimage3.jpg" alt="..."> --> 
 
      <div class="carousel-text"> 
 
      <h3>Example headline</h3> 
 
      <p>Example descri</p> 
 
      </div> 
 
     </div> 
 
     </div> 
 

 
     <!-- Left and right controls --> 
 
     <a class="left carousel-control" href="#myCarousel" data-slide="prev"> 
 
     <span class="glyphicon glyphicon-chevron-left"></span> 
 
     <span class="sr-only">Previous</span> 
 
     </a> 
 
     <a class="right carousel-control" href="#myCarousel" data-slide="next"> 
 
     <span class="glyphicon glyphicon-chevron-right"></span> 
 
     <span class="sr-only">Next</span> 
 
     </a> 
 
    </div> 
 
    </div> 
 
</div>

Vous avez besoin quelque chose comme ça, je suppose? Vous pouvez l'embellir selon votre condition.