从主页面设置bootstrap carousel活动项目选择

时间:2013-06-26 15:16:01

标签: twitter-bootstrap slideshow carousel

我有一个带有12张幻灯片的页面弹出的bootstrap轮播(幻灯片)。 在页面上,我有12个图标,指的是旋转木马上的幻灯片。

如何点击第1项的主页并在弹出窗口打开时让项目1处于活动状态?

这是主页示例代码:

          <div id="dialog"> </div>
          [ <a href="#mythDialog" data-toggle="modal">Test Link</a> ] [ <a href="#mythDialog" data-toggle="modal">Test Link 2</a> ] [ <a href="#mythDialog" data-toggle="modal">Test Link 3</a> ]
                    <div id="mythDialog" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                      <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>

          <h3 id="myModalLabel">Cool work for you</h3>
        </div>
        <div class="modal-body">


      <div id="myCarousel" class="carousel slide">
          <ol class="carousel-indicators">
              <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
              <li data-target="#myCarousel" data-slide-to="1"></li>
              <li data-target="#myCarousel" data-slide-to="2"></li>
          </ol>
          <!-- Carousel items --->
          <div class="carousel-inner">
              <div class="active item">
                  <img src="http://twitter.github.io/bootstrap/assets/img/bootstrap-mdo-sfmoma-03.jpg" />
                  <p>1111 Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text.</p>
              </div>
              <div class="item">
                  <img src="http://twitter.github.io/bootstrap/assets/img/bootstrap-mdo-sfmoma-01.jpg" />
                  <p>2222 Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text.</p>
              </div>
              <div class="item">
                  <img src="http://twitter.github.io/bootstrap/assets/img/bootstrap-mdo-sfmoma-02.jpg" />
                  <p>3333 Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text.</p>
              </div>
          </div>
          <!-- Carousel nav --> <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
       <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>

      </div>
      <!-- row -->



                 <div class="modal-footer">
                    <button class="btn" data-dismiss="modal">Close</button>
                  </div>

                  </div><!-- modal-body -->
                </div> <!-- mythMainDiv -->

在此处查看[链接](http://jsfiddle.net/barnamah/VCwPE/12/

1 个答案:

答案 0 :(得分:0)

如果您的意思是当您单击图像时将图像链接到另一页,我认为您可以这样做:

<li><a href="Servers Page.html">

请告诉我这是否成功