Bootstrap 轮播段落滑块

Question

基本上，我希望在现有段落中有一个轮播或某种滑块。本段包含我正在为其设计网站的公司的“即将发生的事件”。通常一次会有不止一个事件发生。因此，我不想将它们列在页面下方，而是让段落的内容循环到每个事件，就好像一个刚刚滑出，另一个滑入我的“即将发生的事件”标题下一样。

我不希望它看起来像图像轮播。我需要它是不可见的，并且只有文本滑出和滑入，在保存文本的容器中，就像现在一样。

我已经到处寻找解决方案，但找不到任何我想要的东西。我不想让观众知道那里有旋转木马。我只是想让文本滑入滑出。

这是我希望循环的页面部分的快照：

content snapshot

这里是该特定部分的 HTML 标记：

<div class="container">
<div class="row">
    <div class="col-sm-6">
        <p id="border-alert">Sunday, January 22nd | 2:30p - 4:30p<br><br>
        Shop through former brides selling their stuff to new brides. Gently used wedding décor on sale- like Black Friday for wedding items. Everything from centerpieces to décor and more!! $5 admission to shop and CASH AND CARRY. Its such an amazing deal for you to save on your wedding items.<br><br>
        Have questions or want more info?<br><br>
        Visit us on our Facebook page: <a href="#" target="_blank" class="btn btn-social-icon btn-facebook"><span class="fa fa-facebook-square" id="pad-left"></span></a></p>
    </div>
</div>

Answer 1

您可以只使用标准轮播并使用display: none; 或opacity: 0; 或visibility: hidden; 隐藏控件。然后只需确保页面包含段落显示方式所需的任何相关样式。

.carousel {
  max-width: 960px;
  margin: auto;
  width: 90%;
}

.carousel-control {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <p id="border-alert">Sunday, January 22nd | 2:30p - 4:30p<br><br>
        Shop through former brides selling their stuff to new brides. Gently used wedding décor on sale- like Black Friday for wedding items. Everything from centerpieces to décor and more!! $5 admission to shop and CASH AND CARRY. Its such an amazing deal for you to save on your wedding items.<br><br>
        Have questions or want more info?<br><br>
        Visit us on our Facebook page: <a href="#" target="_blank" class="btn btn-social-icon btn-facebook"><span class="fa fa-facebook-square" id="pad-left"></span></a></p>
    </div>
    <div class="item">
      <p id="border-alert">Sunday, January 22nd | 2:30p - 4:30p<br><br>
        Shop through former brides selling their stuff to new brides. Gently used wedding décor on sale- like Black Friday for wedding items. Everything from centerpieces to décor and more!! $5 admission to shop and CASH AND CARRY. Its such an amazing deal for you to save on your wedding items.<br><br>
        Have questions or want more info?<br><br>
        Visit us on our Facebook page: <a href="#" target="_blank" class="btn btn-social-icon btn-facebook"><span class="fa fa-facebook-square" id="pad-left"></span></a></p>
    </div>
    <div class="item">
      <p id="border-alert">Sunday, January 22nd | 2:30p - 4:30p<br><br>
        Shop through former brides selling their stuff to new brides. Gently used wedding décor on sale- like Black Friday for wedding items. Everything from centerpieces to décor and more!! $5 admission to shop and CASH AND CARRY. Its such an amazing deal for you to save on your wedding items.<br><br>
        Have questions or want more info?<br><br>
        Visit us on our Facebook page: <a href="#" target="_blank" class="btn btn-social-icon btn-facebook"><span class="fa fa-facebook-square" id="pad-left"></span></a></p>
    </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>