0

Rails アプリに Bootstrap Carousel と Back to Top Button を追加しました。すべてが完璧に機能します。 

Is there anyway in which I can combine Bootstraps Carousel's Next Button 
with my Back to Top button? Or perhaps add this functionality to the Carousel 
Next Buttons?

ユーザーが新しいページを開始するたびに次のページを読むために上にスクロールしなくても、カルーセルの [次へ] ボタンでページをめくることができるようにします。

Railsは初めてです、助けてください:)

これは私のコードです...

ビュー(Show.html.erb)

<div id="top"></div>
<div id="message">
  <a href="#"><%= image_tag("Back_to_Top.png", alt: "rss feed") %></a>
</div>

<div class="row">
  <div class="span12">

  <div class="container fill">
  <div id="myCarousel" class="carousel slide">

    <div class="carousel-inner">
      <div class="active item">
        <div class="fill" style="background-image:url('//placehold.it//000000/FFF');">
          <div class="container">
            <div class="center"><%= image_tag @book.titlephoto.url(:original) %></div>
          </div>
        </div>
      </div>

      <% unless @book.book_images.blank? %>
      <% @book.book_images.each do |image| %>
        <div class="item">
          <div class="fill" style="background-image:url('//placehold.it/1024x700/000000');">
            <div class="container">
              <div class="center"><%= image_tag image.page.url(:original) %></div>
            </div>
          </div>
        </div>
      <% end %>
      <% end %>
    </div>

    <div class="pull-center">
      <a class="carousel-control left" href="#myCarousel" data-slide="prev">‹&lt;/a>
      <a class="carousel-control right" href="#myCarousel" data-slide="next">›&lt;/a>
    </div>

  </div>
  </div>

  </div>
</div>
4

1 に答える 1

0

私は carousel.js をカスタマイズし、このように scrollTop(0) を追加しました。 

Carousel.prototype.next = function () {
  if (this.sliding) return
  return this.slide('next').scrollTop(0)
}

Carousel.prototype.prev = function () {
  if (this.sliding) return
  return this.slide('prev').scrollTop(0)
}

これらの2行を変更することもできます

<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹&lt;/a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›&lt;/a>

これに……

<a class="carousel-control left" href="#myCarousel" onclick="$(this).closest('.carousel').carousel('prev').scrollTop(0)">‹&lt;/a>
<a class="carousel-control right" href="#myCarousel" onclick="$(this).closest('.carousel').carousel('next').scrollTop(0)">›&lt;/a>
于 2014-06-12T23:52:49.343 に答える