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

Popular posts from this blog

image - ClassNotFoundException when add a prebuilt apk into system.img in android -

I need to import mysql 5.1 to 5.5? -

Java, Hibernate, MySQL - store UTC date-time -