動的に追加した要素にswiper.jsが効かない


jQueryで動的に追加した要素に対してswiper.jsでスライドを実装したいのですが、機能しません。  
動的に追加した要素に対しての処理であることが原因と考え、以下のようにswiperのオプションのobserverをtrueとしましたが、それによってTypeErrorとなります。  
ご教授お願いいたします。

[code]

    HTML記述
    <div class="detail">
      <ul class="col-image-slide">
        <li>
          <img src="/album/sample.jpg" alt="サンプル">
        </li>
      </ul>
    </div>
    
    JS記述
    $(document).ready(function() {
      var catalogSwiper = $('.detail').swiper({
        mode:'horizontal',
        loop: true,
        observer: true
      });
    });
    
    エラー
    TypeError: Argument 1 of MutationObserver.observe is not an object.
    
[/code]




このエラーは MutationObserver.observe の第一引数がオブジェクトじゃないよ、つまり observe する要素がいないということです。  
swiperのobserverはこのサンプルで言う div.detail に対してではなく ul.col-image-slide
に対して行なってるようです。

たぶん以下のようなhtmlを用意して、swiperを初期化してるんじゃないでしょうか？

[code]

    <div class="detail"></div>
    
[/code]

以下のように ul.col-image-slide を含めたhtmlを用意して初期化すれば正常に動くと思います。

[code]

    <div class="detail"><ul class="col-image-slide"></ul></div>
    
[/code]

