添加幻燈片功能以增加項目

Question

我將jQuery Mobile v1.2.0添加到我們的清單中，爲移動設備添加幻燈片功能。這是我的表演住宿模板：

:javascript 
    $(document).ready(function() { 
    $("#myCarousel").swiperight(function() { 
     $("#myCarousel").carousel('prev'); 
     }); 
    $("#myCarousel").swipeleft(function() { 
     $("#myCarousel").carousel('next'); 
    }); 
    }); 

圖片：

#myCarousel.carousel.slide 
      .carousel-inner 
       - @house.attachments.each_with_index do |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"} 

這工作正常1個住宿。但我如何處理我的列表頁面？

這是我的代碼：

- @houses.each do |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 do |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代碼？轉盤ID在列表中都是不同的。

Thanks..remco

Answer 1

我的解決辦法可能看起來很奇怪，但這將綁定木馬正確

- @houses.each do |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 do |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'); 
     }); 
    });