add slide function to multiply items

Question

I added jQuery Mobile v1.2.0 to our manifest to add slide funtion for mobile devices. This is my 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 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"}

this works fine for 1 accommodation. But how must i deal with my listing page?

This is my code:

- @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}"}

how do i implement the javascript code? the carousel id's are all different in the listing.

Thanks..remco

Answer 1

My solution might look odd but this will bind Carousel properly

- @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');
       });
    });