javascript - add slide function to multiply items -
javascript - add slide function to multiply items -
i added jquery mobile v1.2.0 our manifest add together slide funtion mobile devices. show accommodation template:
:javascript $(document).ready(function() { $("#mycarousel").swiperight(function() { $("#mycarousel").carousel('prev'); }); $("#mycarousel").swipeleft(function() { $("#mycarousel").carousel('next'); }); });
images:
#mycarousel.carousel.slide .carousel-inner - @house.attachments.each_with_index |a, index| %div{ :class => "#{index == 0 ? 'active item' : 'item'}" } = link_to(image_tag(a.file.url), photo_country_region_house_path(@country, @region, @house) ) %a.carousel-control.left %i.fa.fa-arrow-circle-left.fa-2x{"data-slide" => "next", :href => "#mycarousel"} %a.carousel-control.right %i.fa.fa-arrow-circle-right.fa-2x{"data-slide" => "prev", :href => "#mycarousel"}
this works fine 1 accommodation. how must deal listing page?
this code:
- @houses.each |house| .item.col-sm-4.col-lg-4.col-md-4.col-xs-6{:class => house.features_to_html_class, data: {name: house.name, myorder: house.bedrooms, ranking: house.sorting} } .product .image .thumbnail .carousel.slide{id: "mycarousel#{house.id}"} / carousel items .carousel-inner - house.attachments.limit(3).each_with_index |a, index| %div{ :class => "#{index == 0 ? 'active item' : 'item'}" } = link_to(image_tag(a.file.url), country_region_house_path(house.country, house.region, house)) %a.carousel-control.left %i.fa.fa-arrow-circle-left{"data-slide" => "next", :href => "#mycarousel#{house.id}"} %a.carousel-control.right %i.fa.fa-arrow-circle-right{"data-slide" => "prev", :href => "#mycarousel#{house.id}"}
how implement javascript code? carousel id's different in listing.
thanks..remco
my solution might odd bind carousel properly
- @houses.each |house| .item.col-sm-4.col-lg-4.col-md-4.col-xs-6{:class => house.features_to_html_class, data: {name: house.name, myorder: house.bedrooms, ranking: house.sorting} } .product .image .thumbnail .carousel.slide{id: "mycarousel#{house.id}"} / carousel items .carousel-inner - house.attachments.limit(3).each_with_index |a, index| %div{ :class => "#{index == 0 ? 'active item' : 'item'}" } = link_to(image_tag(a.file.url), country_region_house_path(house.country, house.region, house)) %a.carousel-control.left %i.fa.fa-arrow-circle-left{"data-slide" => "next", :href => "#mycarousel#{house.id}"} %a.carousel-control.right %i.fa.fa-arrow-circle-right{"data-slide" => "prev", :href => "#mycarousel#{house.id}"} :javascript $(document).ready(function() { $("#mycarousel#{house.id}").swiperight(function() { $("#mycarousel#{house.id}").carousel('prev'); }); $("#mycarousel#{house.id}").swipeleft(function() { $("#mycarousel#{house.id}").carousel('next'); }); });
javascript ruby-on-rails ruby-on-rails-4
Comments
Post a Comment