Bootstrap Carousel是否必须使用图像？

Question

我想实现一个滑块，如Bootstrap Carousel，通过一些文本而不是图像旋转...

这是可能的，因为我遇到的所有示例均基于图像。

谢谢

Answer 1

是的，你只能显示文字。我在technotarek下的jsfiddle上使用了一个实现/ gXN2u/

Answer 2

以下示例显示如何使用文本而不是图像。

setCarouselHeight('#carousel-example'); 
 

 
    function setCarouselHeight(id) 
 
    { 
 
     var slideHeight = []; 
 
     $(id+' .item').each(function() 
 
     { 
 
      // add all slide heights to an array 
 
      slideHeight.push($(this).height()); 
 
     }); 
 

 
     // find the tallest item 
 
     max = Math.max.apply(null, slideHeight); 
 

 
     // set the slide's height 
 
     $(id+' .carousel-content').each(function() 
 
     { 
 
      $(this).css('height',max+'px'); 
 
     }); 
 
    }

.carousel-content { 
 
    color:black; 
 
    display:flex; 
 
    align-items:center; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<div id="carousel-example" class="carousel slide" data-ride="carousel"> 
 
    <!-- Wrapper for slides --> 
 
    <div class="row"> 
 
     <div class="col-xs-offset-3 col-xs-6"> 
 
      <div class="carousel-inner"> 
 
       <div class="item active"> 
 
        <div class="carousel-content"> 
 
         <div> 
 
          <h3>#1</h3> 
 
          <p>This is a twitter bootstrap carousel that only uses text. There are no images in the carousel slides.</p> 
 
         </div> 
 
        </div> 
 
       </div> 
 
       <div class="item"> 
 
        <div class="carousel-content"> 
 
         <div> 
 
          <h3>#2</h3> 
 
          <p>This is another much longer item. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, sint fuga temporibus nam saepe delectus expedita vitae magnam necessitatibus dolores tempore consequatur dicta cumque repellendus eligendi ducimus placeat! Sapiente, ducimus, voluptas, mollitia voluptatibus nemo explicabo sit blanditiis laborum dolore illum fuga veniam quae expedita libero accusamus quas harum ex numquam necessitatibus provident deleniti tenetur iusto officiis recusandae corporis culpa quaerat?</p> 
 
         </div> 
 
        </div> 
 
       </div> 
 
       <div class="item"> 
 
        <div class="carousel-content"> 
 
         <div> 
 
          <h3>#3</h3>        
 
          <p>This is the third item.</p> 
 
         </div> 
 
        </div> 
 
       </div> 
 
       
 
      </div> 
 
     </div> 
 
    </div> 
 
    <!-- Controls --> <a class="left carousel-control" href="#carousel-example" data-slide="prev"> 
 
    <span class="glyphicon glyphicon-chevron-left"></span> 
 
    </a> 
 
<a class="right carousel-control" href="#carousel-example" data-slide="next"> 
 
    <span class="glyphicon glyphicon-chevron-right"></span> 
 
    </a> 
 

 
</div>