javascript - Carousel Next with a Back to Top Feature -
i have added bootstrap carousel , top button rails app. works perfect.
is there anyway in can combine bootstraps carousel's next button top button? or perhaps add functionality carousel next buttons?
allowing user turn page carousel's next button, without having scroll read next page every time starts new page.
new rails, please :)
this code...
views (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 |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">‹</a> <a class="carousel-control right" href="#mycarousel" data-slide="next">›</a> </div> </div> </div> </div> </div>
i ended customizing carousel.js , adding scrolltop(0) this.
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) }
you can change these 2 lines
<a class="carousel-control left" href="#mycarousel" data-slide="prev">‹</a> <a class="carousel-control right" href="#mycarousel" data-slide="next">›</a>
to this....
<a class="carousel-control left" href="#mycarousel" onclick="$(this).closest('.carousel').carousel('prev').scrolltop(0)">‹</a> <a class="carousel-control right" href="#mycarousel" onclick="$(this).closest('.carousel').carousel('next').scrolltop(0)">›</a>
Comments
Post a Comment