ブートストラップカルーセル段落スライダ

Question

基本的には、既存の段落にカルーセルや何らかの種類のスライダを入れたいと思っています。このパラグラフでは、私がウェブサイトをデザインしている会社の「今後のイベント」を開催します。通常、一度に複数のイベントが発生します。だから、ページの下にリストするのではなく、段落の内容をそれぞれのイベントにスライドさせて、私の「今後の出来事」見出しの下にスライドさせるようにしたいと思います。

私はイメージカルーセルのように見せたくありません。私はそれが不可視であり、今のようにテキストを保持しているコンテナ内で、テキストをスライドさせて出し入れする必要があります。

私はこれに対する解決策を探しましたが、私が望むものは見つけられません。視聴者にカルーセルがあることさえ知りたくはありません。私はちょうどテキストをスライドさせて出し入れしたい。ここで

は、私はサイクルにそれをたいページのセクションのスナップショットです：

<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> 

：

content snapshot

そして、ここでは、その特定のセクションのためのHTMLマークアップです

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>