Question

我有一个自举旋转木马，我想在旋转木马下面的段落中显示相应的文字。有没有jquery方式怎么做？

即。第一张幻灯片，文字＆＃34;嗨！＆＃34 ;;第二张幻灯片，＆＃34; Lorem ipsum dolor坐下来......＆＃34;

我的旋转木马：

                  <!-- Wrapper for slides -->
                  <div class="carousel-inner" role="listbox">                
                    <div class="item active">
                      <img src="img/krok_02.png" alt="ommo 2">
                    </div>

                    <div class="item">
                      <img src="img/krok_03.png" alt="ommo 3">
                    </div>

                    <div class="item">
                      <img src="img/krok_04.png" alt="ommo 4">
                    </div>
                  </div>

                  <!-- Left and right controls -->
                  <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
                    <span class="glyphicon-chevron-left" aria-hidden="true"><img src="img/sipka_leva.png" alt="<"></span>
                    <span class="sr-only">Předchozí</span>
                  </a>
                  <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
                    <span class="glyphicon-chevron-right" aria-hidden="true"><img src="img/sipka_prava.png" alt=">"></span>
                    <span class="sr-only">Následující</span>
                  </a>
                </div>

我希望将文本显示为带有id＆＃34; text＆＃34;的段落。

我找到了这个话题，但我并不聪明，任何人都可以解释我如何制作它？我是jquery的新手，我真的很感激。

jQuery Boostrap Carousel Show content according to current slide

Answer 1

现在可以更好地理解你的问题，你可以这样做：

http://jsfiddle.net/0k69gusw/

每次幻灯片转换完成后，我们都会将text中的文字添加到ID为$('.carousel').on('slid.bs.carousel', function () { $('#text').html($('.active > .carousel-caption').html()); });的自定义div中。我理解这种方式你并不希望捕获显示在幻灯片中，因此它只是用css隐藏。

carousel-caption

首先回复：

在您的项目中添加一个类<div class="item active"> <img src="img/krok_02.png" alt="ommo 2"> <div class="carousel-caption"> Your text goes here.. </div> </div>的div（如下所示）。在该div中，您可以将文本与图像一起显示。

来自bootstrap网站： http://getbootstrap.com/javascript/#carousel

✗ ruby -rnet/https -e "Net::HTTP.get URI('http://www.google.com')"
✗ ruby -rnet/https -e "Net::HTTP.get URI('https://www.facebook.com')"
✗ ruby -rnet/https -e "Net::HTTP.get URI('https://www.google.com')"  
/Users/ephracis/.rvm/rubies/ruby-2.2.2/lib/ruby/2.2.0/net/http.rb:923:in `connect': SSL_connect returned=1 errno=0 state=SSLv3 read server certificate B: certificate verify failed (OpenSSL::SSL::SSLError)
    from /Users/ephracis/.rvm/rubies/ruby-2.2.2/lib/ruby/2.2.0/net/http.rb:923:in `block in connect'
    from /Users/ephracis/.rvm/rubies/ruby-2.2.2/lib/ruby/2.2.0/timeout.rb:74:in `timeout'
    from /Users/ephracis/.rvm/rubies/ruby-2.2.2/lib/ruby/2.2.0/net/http.rb:923:in `connect'
    from /Users/ephracis/.rvm/rubies/ruby-2.2.2/lib/ruby/2.2.0/net/http.rb:863:in `do_start'
    from /Users/ephracis/.rvm/rubies/ruby-2.2.2/lib/ruby/2.2.0/net/http.rb:852:in `start'
    from /Users/ephracis/.rvm/rubies/ruby-2.2.2/lib/ruby/2.2.0/net/http.rb:583:in `start'
    from /Users/ephracis/.rvm/rubies/ruby-2.2.2/lib/ruby/2.2.0/net/http.rb:478:in `get_response'
    from /Users/ephracis/.rvm/rubies/ruby-2.2.2/lib/ruby/2.2.0/net/http.rb:455:in `get'

Bootstrap轮播和节目根据当前幻灯片

1 个答案: