Bootstrap轮播段落滑块

Question

Basically, I'm wanting to have a carousel or some sort of slider in an existing paragraph. This paragraph holds "Upcoming Events" for a company I'm designing a website for. There are typically more than one event at a time coming up. So instead of listing them down the page, I'd like to have the content of the paragraph cycle through to each event as if one just slides out and another slides in under my "Upcoming Events" heading.

I don't want it to look like an image carousel. I need it to be invisible and only have the text slide out and in, within the container that holds the text as it is now.

I've looked all over for a solution to this and I can't find anything like what I'm wanting. I don't want viewers to even know there's a carousel there. I just want the text to slide in and out.

Here is a snapshot of the section of the page I'd like it to cycle:

content snapshot

And here is the HTML markup for that particular section:

<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

You can just use the standard carousel and hide the controls with display: none; or opacity: 0; or visibility: hidden; . Then just make sure the page includes whatever relevant styling you need for the way the paragraphs display.

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