Swipers(Horizontal swiper) in listview(vertical scroller), not working with nested Loop Jquery Mobile

Question

I am trying to achieve this horizontal swipers inside listview(vertical scroll) in Jquery Mobile, below i attached an example of what i meant but that is in Android. I am wondering how would i achieve this in Jquery Mobile. It is the functionality in Airbnb app - a listview that you can scroll vertically, but at the same time each list has multiple images that you can scroll horizontally.

swiping items on listview, with small vertical margin

I had an attempt to achieve it by loading the list in an ajax, and then nest the images inside another for loop and putting that into swipers. But the problem is the swiper isnt showing up, and also the layout is all messed up.

<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='" + myOtherUrl + "'>'"+ image2+ "'</a></li>"             

        +"<div id=two class=col-md-1 style=height:38%> <h9 class=name data-address  href='"+ 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>