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>