【javascript】SwiperのDOMを動的に変化させる

現在，Swiper（http://idangero.us/swiper/#.WaS7DFqrSL4）を用いて
画像をスクロールできるものを作成しています．

html
1<div class="swiper-container">
2    <div class="swiper-wrapper">
3        <div class="swiper-slide"><a href=...> <img src=...> </a></div>
4        <div class="swiper-slide"><a href=...> <img src=...> </a></div>
5        ...
6    </div>
7 
8    <div class="swiper-pagination"></div>
9    <div class="swiper-button-prev"></div>
10    <div class="swiper-button-next"></div>
11    <div class="swiper-scrollbar"></div>
12</div>

初期値として，以上のようなHTMLを読み込んだときには，正しく表示されるのですが，
websocketやajaxを用いて非同期にデータを取得した際に，
この中のDOMを書き換えようとするとレイアウトが崩れてしまいます．
また，上記では２つの画像ですが，
たとえば，非同期に取得したデータが４つの画像であった場合に，
ページネーションが更新されない等の問題に陥っています．

このように，非同期にデータを取得して，レイアウトを保ちつつDOMを書き換えるには
どのようにすればいいでしょうか？

また，非同期に取得した画像URLを用いて
画像を書き換えるにはsrcを書き換えるだけでいいのでしょうか？

回答よろしくおねがいします．