Bootstrap轮播段落滑块

Question

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

我不希望它看起来像图像轮播。 我需要它是不可见的，并且只允许文本滑入和滑入，该容器可以容纳现在的文本。

我到处都在寻找解决方案，但是找不到想要的东西。 我不希望观众知道那里有一个旋转木马。 我只想让文字滑入和滑出。

这是我要循环显示的页面部分的快照：

内容快照

这是该特定部分的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;隐藏控件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>