web-dev-qa-db-fra.com

Comment réinitialiser Owl Carousel après un appel ajax

J'essaye de réinitialiser le carrousel de hibou après un appel réussi en ajax. L'appel ajax modifiera les données, mais la vue devrait rester la même. J'ai un problème où la vue (la structure du carrousel) ne se réinitialise pas. Tout va bien au chargement de la page. 

im en utilisant la version 1.3.3

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

Appel Ajax

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

Est-ce que je manque quelque chose que je dois faire. J'ai examiné cette question sur la page github et essayé les suggestions, mais en vain.

Toute aide appréciée

Modifier

à partir des conseils donnés, j'ai créé ces deux fonctions

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();
  }
}

Cela semble fonctionner, mais vous vous demandez si c'est la bonne façon de procéder?

javascriptjqueryajaxowl-carousel
14
Richlewis

L'exemple ci-dessous fonctionne.

Initialisation du carrousel:

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

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

Et lorsque vous utilisez le rappel ajax, essayez:

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

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

Je crée un violon pour vous expliquer comment réinitialiser le carrousel: http://jsfiddle.net/s10bgckL/959/

PS: Je n'ai pas créé de tableau d'options si vous voulez modifier certains paramètres tels que la vitesse, la quantité d'éléments affichés, etc.

J'espère que ça aide.

6
Eduardo

Essayez $(window).load() au lieu de reinitialize

0
Gopal Raj

Je suis passé par le même problème et ai essayé la méthode reinit() mais cela ne fonctionnait pas pour moi, alors j'ai essayé de détruire et d'initialiser à nouveau et cela a fonctionné.

$.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

Essayez-le, il existe dans hibou 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

Cela devrait aider: 

/*
 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