Réinitialiser Slick js après un appel ajax réussi

Je suis en utilisant Slick pour un carrousel de la mise en œuvre et tout fonctionne bien lorsque les pages de charge.Ce que je suis en train de réaliser est que lorsque je fais un appel Ajax pour récupérer de nouvelles données, je veux encore de la nappe carrousel de mise en œuvre, au moment où je le perds.

J'ai mis l'appel de slick dans une fonction

function slickCarousel() {
  $('.skills_section').slick({
    infinite: true,
    slidesToShow: 3,
    slidesToScroll: 1
  });
}

et puis j'appelle la fonction au sein de mon succès rappel

$.ajax({
    type: 'get',
    url: '/public/index',
    dataType: 'script',
    data: data_send,
      success: function() {
        slickCarousel();
      }
   });

Mais la fonction n'est pas appelée. Comment puis-je réinitialiser ce js?

source d'informationauteur Richlewis

Vous devez utiliser le unslick méthode:

function getSliderSettings(){
  return {
    infinite: true,
    slidesToShow: 3,
    slidesToScroll: 1
  }
}

$.ajax({
  type: 'get',
  url: '/public/index',
  dataType: 'script',
  data: data_send,
  success: function() {
    $('.skills_section').slick('unslick'); /* ONLY remove the classes and handlers added on initialize */
    $('.my-slide').remove(); /* Remove current slides elements, in case that you want to show new slides. */
    $('.skills_section').slick(getSliderSettings()); /* Initialize the slick again */
  }
});

Cela devrait fonctionner.

$.ajax({
    type: 'get',
    url: '/public/index',
    dataType: 'script',
    data: data_send,
    success: function() {
        $('.skills_section').slick('reinit');
      }
});

Le meilleur moyen c'est que vous devez détruire la nappe curseur après la réinitialisation.

function slickCarousel() {
  $('.skills_section').slick({
    infinite: true,
    slidesToShow: 3,
    slidesToScroll: 1
  });
}
function destroyCarousel() {
  if ($('.skills_section').hasClass('slick-initialized')) {
    $('.skills_section').slick('destroy');
  }      
}

$.ajax({
  type: 'get',
  url: '/public/index',
  dataType: 'script',
  data: data_send,
  success: function() {
    destroyCarousel()
    slickCarousel();
  }
});

J'ai dû unslick le carrousel avant l'appel ajax commence, mais vous ne pouvez pas le faire jusqu'à ce qu'il y a déjà une nappe de carrousel. Donc, j'ai mis une variable à 0 et n'exécutez unslick après il a changé

var slide = 0
if(slide>0)      
$('#ui-id-1').slick('unslick');

        $.ajax({
            //do stuff, here
        },
        success: function( data ) {

            $('#ui-id-1').slick();
            slide++;

        }

Note: je ne suis pas sûr si cela est correct, mais vous pouvez lui donner un essai et voir si cela fonctionne.

Il y a un unslick méthode qui de-initialise le carrousel, de sorte que vous pouvez essayer en utilisant que, avant de ré-initialisation.

$.ajax({
    type: 'get',
    url: '/public/index',
    dataType: 'script',
    data: data_send,
    success: function() {
        $('.skills_section').unslick();  //destroy the previous instance
        slickCarousel();
      }
});

Espère que cette aide.

1

J'ai été confronté à un problème où la Nappe de manège n'était pas de l'actualisation de nouvelles données, il a été ajout de nouvelles diapositives précédentes, j'ai trouvé une réponse qui a résolu mon problème, c'est très simple.

essayer unslick, puis affecter vos nouvelles données qui est rendu à l'intérieur de la nappe de carrousel, puis initialiser la nappe de nouveau. ces mesures que pour moi:
```
jQuery('.class-or-#id').slick('unslick');
myData = my-new-data;
jQuery('.class-or-#id').slick({slick options});
```
Remarque: vérifiez la nappe de site web pour la syntaxe, juste au cas où. assurez-vous également que vous n'êtes pas à l'aide de unslick avant slick est encore initialisé, ce que cela signifie est simplement initialiser (comme cette jquery('.my-class').slick({options}); le premier appel ajax et une fois qu'il est initialisé puis suivez les étapes ci-dessus, vous pouvez vouloir utiliser si d'autre
0

Le meilleur moyen serait d'utiliser le unslick paramètre ou de la fonction(selon votre version de la nappe), comme indiqué dans les autres réponses mais cela ne fonctionne pas pour moi. J'obtiens des erreurs noire qui semblent être liées à cette.

Ce qui a fait le travail pour le moment, cependant, est de retirer le slick-initialized et slick-slider classes à partir du récipient avant de le réinitialiser lisse, comme suit:
```
function slickCarousel() {
    $('.skills_section').removeClass("slick-initialized slick-slider");
    $('.skills_section').slick({
        infinite: true,
        slidesToShow: 3,
        slidesToScroll: 1
    });
}
```
Supprimant les classes ne semble pas entamer la destruction de l'événement(pas encore testé mais qui a du sens), mais ne cause la plus tard slick() appel à se comporter correctement tant que vous n'avez pas de déclencheurs sur les détruire, vous devriez être bon.

Après l'appel d'une demande de temporisation pour initialiser la nappe de curseur.

var options = {
    arrows: false,
    slidesToShow: 1,
    variableWidth: true,
    centerPadding: '10px'
}

$.ajax({
    type: "GET",
    url: review_url+"?page="+page,
    success: function(result){
        setTimeout(function () {
            $(".reviews-page-carousel").slick(options)
        }, 500);
    }
})

Ne pas initialiser la nappe de curseur au début. Initialiser après une requête AJAX avec délai d'attente. Cela devrait fonctionner pour vous.

Vous devez vous connecter pour publier un commentaire.