Swipers (Хоризонтален Swiper) в изглед на списък (вертикален скролер), не работи с вложен Loop Jquery Mobile

Опитвам се да постигна тези хоризонтални плъзгачи в списъка (вертикално превъртане) в Jquery Mobile, по-долу прикачих пример за това, което имах предвид, но това е в Android. Чудя се как да постигна това в Jquery Mobile. Това е функционалността в приложението Airbnb - изглед на списък, който можете да превъртате вертикално, но в същото време всеки списък има множество изображения, които можете да превъртате хоризонтално.

плъзгане на елементи в списъчен изглед, с малко вертикално поле

Имах опит да го постигна, като заредих списъка в ajax и след това вложих изображенията в друг for цикъл и го поставих в swipers. Но проблемът е, че плъзгачът не се показва, а също и оформлението е объркано.

<script>
     $( "#form" ).submit('pageinit',function( event ) {
          $("#newContent2").empty();
          var values = $(this).serialize();
         console.log(values);
                $.ajax({
   type: "POST",

   url: "http://test.com/search.php",
   data: values,
                  dataType:'json',
            success: function(data){ 
               console.log(data);

    var $el = $('#list');
    var listView = new infinity.ListView($el);

    for (var i=0; i<50; i++) {
        var listing = data[i].listing;
        var Location = data[i].Location;
        var date = data[i].date;     

        var images = data[i].pics.split(',');
        console.log(image);

         for(var j = 0; j<images.length; j++){

       var image3=  "http://test.com/"+images;
        console.log(image3);

                    var image2=" <div class='swiper-slide'><img class='lazy' src='"+ image3 + "' width='100%'  id='viewer'/></div>"

         }

         var myOtherUrl = "list.html?Listingid="  + encodeURIComponent(listingid)+"?Location="+ encodeURIComponent(Location)+ encodeURIComponent(nobed+"?date="+ encodeURIComponent(date));

        $.mobile.pageContainer.pagecontainer( "change", "#pageX", { foo: data[i].listingid, location:data[i].Location } );

        var $newContent = "<li id='indi'><a href='/bg" + myOtherUrl + "'>'"+ image2+ "'</a></li>"             

        +"<div id=two class=col-md-1 style=height:38%> <h9 class=name data-address  href='/bg"+ myOtherUrl +  "'><a id="+"my-button"+">BucketListly</a>"+ "<h9 >&nbsp"+data[i].Location+ "</h9>";

        $("#newContent2").append($newContent);

    var listItems = listView.find('.my-items');
        for(var index = 0, length = listItems.length; index < length; index++) {
            listItems[index].remove();
        }

          var swiper = new Swiper('.swiper-container', {
        loop:false,
      autoResize: true,
    calculateHeight:true,
        onSlideChangeStart: function(){
            $('.swiper-pagination-switch').removeClass('active')
            $('.swiper-pagination-switch').eq(swiper.activeSlide).addClass('active')
        }
    });

    //navigation
    $('.swiper-pagination-switch').click(function(){
        swiper.swipeTo($(this).index());
        $('.swiper-pagination-switch').removeClass('active');
        $(this).addClass('active')
    })

    }
           }
            });
          return false;
  });    

        </script>