HTML-Karussell mit Text über ein statisches Bild

Question

(neu zu diesem) Ich versuche, ein statisches Bild mit einem Karussell von verschiedenen Text über die Spitze zu bekommen. Ich habe versucht, das Bootstrap-Karussell HTML zu verwenden und Abschnitte (wie die mehreren Bilder) zu entfernen, und die "Karussell-Beschriftung" -Klasse für meinen Text zu verwenden, aber das wird ein wenig Styling benötigen, um es zentriert usw. zu bekommen Weg, aber wenn es einen einfacheren Weg gibt, lass es mich wissen! (Es ist in einer jumbotron div, wie ich war, ein Bild von meinem jumbotron Abschnitt mit zur einfacheren) 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>

Sie müssen so etwas wie dieses Ich denke? Sie können es gemäß Ihrer Anforderung verschönern.