Question

基本上，我想要在现有段落中使用旋转木马或某种滑块。本段包含＆＃34;即将发生的事件＆＃34;对于一家我正在设计网站的公司。一般情况下，一次会有多个事件发生。因此，我不想将它们列在页面上，而是希望将段落的内容循环到每个事件，就像一个刚刚滑出而另一个滑入我的＆＃34;即将发生的事件＆＃34;标题。

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

我已经全神贯注地寻找解决方案，我找不到像我想要的东西。我不希望观众知道那里有旋转木马。我只想让文本滑入和滑出。

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

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>

Bootstrap Carousel段落滑块

1 个答案: