引导转盘幻灯片可以是任意HTML元素，还是需要图像？_Html_Twitter Bootstrap_Carousel

引导转盘幻灯片可以是任意HTML元素，还是需要图像？

html twitter-bootstrap

引导转盘幻灯片可以是任意HTML元素，还是需要图像？,html,twitter-bootstrap,carousel,Html,Twitter Bootstrap,Carousel,根据bootstrap网站，旋转木马是： A slideshow component for cycling through elements, like a carousel. 然而，在每一个例子中，我看到幻灯片都包含一个图像。我试图创建简单的html标记的幻灯片，但似乎不起作用。这仅仅是因为幻灯片是带有标题的图像，而上述文档过于模糊吗基本上，我要做的是使用表显示从服务器检索到的记录子集。我真的没有办法从服务器获取记录的子集。我知道如何使用选项卡执行此操作，但对于可能有1000条记录的选项

根据bootstrap网站，旋转木马是：

A slideshow component for cycling through elements, like a carousel.

然而，在每一个例子中，我看到幻灯片都包含一个图像。我试图创建简单的html标记的幻灯片，但似乎不起作用。这仅仅是因为幻灯片是带有标题的图像，而上述文档过于模糊吗

基本上，我要做的是使用表显示从服务器检索到的记录子集。我真的没有办法从服务器获取记录的子集。我知道如何使用选项卡执行此操作，但对于可能有1000条记录的选项卡可能太多

编辑：多亏了everyones的帮助，我才能够使用旋转木马，但事实证明，使用旋转木马并不能很好地实现我的目标。事实证明，使用单个javascript函数进行分页以操作表行的“隐藏”类是一个更好的解决方案

我有一个工作jsbin：

嗯，有一种方法可以将HTML放在旋转木马中。在Bootstrap网站的

入门

部分中，有一些示例可以帮助您入门。尝试使用此选项：

有关实现此功能所需的所有信息，请参见下面的代码段

希望有帮助

/*全局样式
-------------------------------------------------- */
/*页脚下方的填充和较轻的正文文本*/
身体{
填充底部：40px；
颜色：#5A5A；
}
/*自定义导航栏
-------------------------------------------------- */
/*特殊类别。容器周围。导航栏，用于将其定位到位*/
.导航栏包装{
位置：绝对位置；
排名：0；
右：0；
左：0；
z指数：20；
}
/*翻转填充以在狭窄视口中正确显示*/
.navbar包装器>.container{
右边填充：0；
左侧填充：0；
}
.navbar包装器.navbar{
右侧填充：15px；
左侧填充：15px；
}
.navbar包装器.navbar.容器{
宽度：自动；
}
/*自定义旋转木马
-------------------------------------------------- */
/*旋转木马基类*/
旋转木马{
高度：500px；
边缘底部：60px；
}
/*由于定位图像，我们需要帮助解决标题问题*/
.旋转木马标题{
z指数：10；
}
/*由于img元素的定位而声明高度*/
.carousel.项目{
高度：500px；
背景色：#777；
}
.carousel-inner>.item>img{
位置：绝对位置；
排名：0；
左：0；
最小宽度：100%；
高度：500px；
}
/*营销内容
-------------------------------------------------- */
/*将旋转木马下方三列内的文本居中对齐*/
.市场营销。col-lg-4{
边缘底部：20px；
文本对齐：居中；
}
.市场推广h2{
字体大小：正常；
}
.市场营销。col-lg-4 p{
右边距：10px；
左边距：10px；
}
/*特写
------------------------- */
.特征分割器{
边距：80px 0；/*留出引导空间更多*/
}
/*精简营销标题*/
.专题标题{
字体大小：300；
线高：1；
字母间距：-1px；
}
/*响应式CSS
-------------------------------------------------- */
@介质（最小宽度：768px）{
/*导航条定位*/
.导航栏包装{
边缘顶部：20px；
}
.导航栏包装器.容器{
右侧填充：15px；
左侧填充：15px；
}
.navbar包装器.navbar{
右边填充：0；
左侧填充：0；
}
/*导航栏从顶部分离，因此我们绕过拐角*/
.navbar包装器.navbar{
边界半径：4px；
}
/*增大传送带内容的大小*/
.carousel标题p{
边缘底部：20px；
字号：21px；
线高：1.4；
}
.专题标题{
字体大小：50px；
}
}
@介质（最小宽度：992px）{
.专题标题{
边缘顶部：120px；
}
}


用于引导的旋转木马模板
切换导航










导航标题








示例标题。
注意：如果您通过文件：//URL查看此页面，由于web浏览器的安全性，左侧和右侧的“下一步”和“上一步”图标按钮可能无法正确加载/显示
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  <style>
  .carousel-inner > .item  >p ,
  .carousel-inner > .item > p {
      width: 70%;
      margin: auto;
  }
  </style>
</head>
<body>

    <div class="container">
      <br>
      <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>
          <li data-target="#myCarousel" data-slide-to="3"></li>
        </ol>

        <!-- Wrapper for slides -->
        <div class="carousel-inner" role="listbox">
          <div class="item active">
            <p>HALLO</p>
          </div>

          <div class="item">
            <p>HALLO2</p>
          </div>

          <div class="item">
            <p>HALLO3</p>
          </div>

          <div class="item">
            <p>HALLO4</p>
          </div>
        </div>

        <!-- Left and right controls -->
        <a class="left carousel-control" href="#myCarousel" 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="#myCarousel" role="button" data-slide="next">
          <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
          <span class="sr-only">Next</span>
        </a>
      </div>
    </div>

    </body>
    </html>