web-dev-qa-db-ja.com

Ajax呼び出し後にフクロウカルーセルを再初期化する方法？

Ajax呼び出しが成功した後、フクロウカルーセルを再初期化しようとしています。 ajax呼び出しはデータを変更しますが、ビューは同じままでなければなりません。ビュー（カルーセル構造）が再初期化されないという問題があります。ページの読み込み時にすべてが正常です。

バージョン1.3.3を使用しています

$(document).ready(function() {
 $(".owl-carousel").owlCarousel({
   items : 3
 });
});

Ajax呼び出し

$.ajax({
    type: 'get',
    url: '/public/index',
    dataType: 'script',
    data: data_send,
      success: function(data) {
       $(".owl-carousel").owlCarousel({
         items: 3
       });
      }
   });
}

やらなければならないことはありませんか？私はgithubページでこの問題を見て、提案を試みましたが、役に立ちませんでした。

編集する

与えられたアドバイスから、私はこれら2つの機能を作成しました

function owlCarousel() {
  var owl = $(".owl-carousel"); 
  //init carousel
  owl.owlCarousel();
    owl.data('owlCarousel').reinit({
     items : 3
    });
}

function destroyOwlCarousel() {
  var owl = $(".owl-carousel");
  //init carousel
  owl.owlCarousel();
    owl.data('owlCarousel').destroy();
  }
}

動作しているようですが、これが正しい方法であるかどうか疑問に思いますか？

javascriptjqueryajaxowl-carousel
15
Richlewis

以下の例は機能します。

カルーセルの初期化：

owl = $("#owl-demo");

owl.owlCarousel({
  items: 10,
  autoPlay: 1000,
});

そして、ajaxコールバックを使用するときは、次のことを試してください。

owl.data('owlCarousel').destroy();

owl.owlCarousel({
  items: 5,
  autoPlay: 1000,
});

カルーセルを再初期化する方法を説明するフィドルを作成します。 http://jsfiddle.net/s10bgckL/959/

PS：速度、表示されるアイテムの数などの一部のパラメーターを変更する場合にのみ、オプションの配列を作成しませんでした。

お役に立てば幸いです。

6
Eduardo

reinitializeの代わりに$(window).load()を試してください

0
Gopala raja naika

私は同じ問題を経験し、reinit()メソッドを試しましたが、うまくいきませんでしたので、破棄して再度初期化してみましたが、うまくいきました。

$.ajax({
    type: 'get',
    url: '/api/v1/companies',
    ...,
    success: function(data) {
        $("#main-company-carousel").data('owlCarousel').destroy();
        $("#main-company-carousel").owlCarousel({
            items : 3 
        });
    }
});
0
Ridham Tarpara

試してみてください、それは owl documention に存在します：

//Initialize Plugin
    $(".owl-carousel").owlCarousel()

    //get carousel instance data and store it in variable owl
    var owl = $(".owl-carousel").data('owlCarousel');

    owl.reinit(options)
0
Govind Samrow

これは役立つはずです：

/*
 reinit() method reinitialize plugin 

 Syntax:
 owldata.reinit(newOptions)

 Yes! you can reinit plugin with new options. Old options
 will be overwritten if exist or added if new.

 You can easly add new content by ajax or change old options with reinit method.
 */

 $('.reinit').click(function(e){
 e.preventDefault()
 if(booleanValue === true){
  booleanValue = false;
  } else if(booleanValue === false){
  booleanValue = true;
}

owl.data('owlCarousel').reinit({
    singleItem : booleanValue
  });
})
0
Chris