Слайдер swiper в framework7 V1 создает пустую страницу после и до первого и последнего изображения

Question

Когда я использую слайдер swiper из framework 7 в моем приложении Cordova, имеющем статические изображения. ползунок работает отлично, но когда я получаю изображения динамически из веб-службы, он создает пустые страницы до первого изображения и после последнего изображения, ползунок не останавливается, вот мой пример кода

когда изображение статично:----

<div data-space-between="50" class="swiper-container swiper-init" >
     <div class="swiper-pagination"></div>
    <div class="swiper-wrapper" id="plot_img">

      <div class="swiper-slide" ><img src="images/slider1.jpg" alt="">
        <div class="slide_text">
          <h4>some head1</h4>
          <p>sometext1</p>
        </div>
      </div>
      <div class="swiper-slide"><img src="images/slider1.jpg" alt="">
          <div class="slide_text">
            <h4>some head2</h4>
            <p>some text2</p>
          </div>
      </div>
  </div>
</div>

когда я получаю изображение динамически, вот HTML, я пытаюсь построить изображение в id="plot_img"

<div data-space-between="50" class="swiper-container swiper-init" >
     <div class="swiper-pagination"></div>
    <div class="swiper-wrapper" id="plot_img">
     </div>
</div>

вот код ajax

json.response.forEach(function(obj,val){
      imghtml += '<div class="swiper-slide"><img 
    src="'+json.url_to_append+''+obj.fields.featured_image+'" alt="">
    <div 
    class="slide_text"><h4>'+obj.fields.banner_name+'</h4>
    <p>'+obj.fields.banner_description+'</p></div></div>';
});

$$('#plot_img').html(imghtml)