Swiper/slider loop not working on dynamic content/images

I am using framework7 v.3

I have a slider on homepage. The slider have five slides and the slider loops well with static content but when I replace slides content with images which are fetched from server (php/database side); the loops stops working.

The slider auto-plays well but does not loop. Here is what I am doing -
HTML:
<div class="swiper-container swiper-init demo-swiper" data-speed="50" data-space-between="10" data-slides-per-view="1.2" data-loop="true" data-centered-slides="true" data-observer="true">
<div id="slides-ban" class="swiper-wrapper">
<!-- dynamic content fetched from server here -->
</div>
</div>

App.js:
var swiper = app.swiper.get('.swiper-container');
swiper.autoplay.start();

Note: I have used data-slides-per-view=“1.2” and it is not the cause of issue. I just want my user to see ‘next’ glimpse of the banner

Please suggest. The loops works well with static content but not with dynamic fetched images/content

It is better to init Swiper AFTER you load there dynamic content