

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]


CC BY-SA 3.0
2016-11-23T06:03:54.470
30611
2020-12-23T10:54:13.390
2020-12-23T10:54:13.390
32986
19678
question
javascript html jquery swiper
動的に追加した要素にswiper.jsが効かない


このエラーは 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]


CC BY-SA 3.0
2016-11-23T18:27:12.500
30620
2016-11-23T18:27:12.500
19526
30611
answer


swiperのデモ設置例に従い、HTMLとjsを下記の記述に修正したところ、機能しました。

[code]

    HTML記述
    <div class="detail swiper-container">
      <ul class="col-image-slide swiper-wrapper">
        <li class="swiper-slide">
          <img src="/album/sample.jpg" alt="サンプル">
        </li>
      </ul>
    </div>
    
    JS記述
    $(document).ready(function() {
      var catalogSwiper = $('.swiper-container').swiper({
        mode:'horizontal',
        loop: true,
        observer: true
      });
    });
    
[/code]

swiper-container，swiper-wrapperなどのclass名が抜けていたことがエラーの要因のようでした。  
liはswiper-slideというclassじゃなくても機能しましたが、ulにswiper-wrapperは必須のようでした。


CC BY-SA 3.0
2016-11-24T18:09:54.390
30660
2016-11-25T02:11:37.790
2016-11-25T02:11:37.790
19678
19678
30611
answer