web-dev-qa-db-fra.com

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

J'utilise Slick pour une implémentation de carrousel et tout fonctionne correctement lorsque les pages se chargent. Ce que j'essaie de réaliser, c'est que lorsque je passe un appel Ajax pour récupérer de nouvelles données, je veux toujours l'implémentation de slick carousel, pour le moment je la perds.

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

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

puis j'appelle la fonction dans mon rappel de succès

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

javascriptjqueryajaxslick.js
18
Richlewis

Vous devriez utiliser la méthode unslick:

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 */
  }
});
16
Minoru

Cela devrait marcher.

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

Le mieux est de détruire le curseur après l’avoir réinitialisé.

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

Je devais desserrer le carrousel avant que l'appel ajax ne commence, mais vous ne pouvez le faire que s'il existe déjà un carrousel lisse. Donc, je mets une variable à 0 et ne lance que lorsque nous avons changé

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

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

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

        }
3
A.Clifford

Remarque: je ne suis pas sûr que cela soit correct, mais vous pouvez essayer et voir si cela fonctionne.

Il existe une méthode unslick qui désinitialise le carrousel. Vous pouvez donc l'utiliser avant de le réinitialiser.

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

J'espère que cela t'aides.

3
web-nomad

Le meilleur moyen serait d'utiliser le paramètre ou la fonction unslick (selon votre version de slick) comme indiqué dans les autres réponses, mais cela ne m'a pas fonctionné. Je reçois des erreurs de nappe qui semblent être liées à ceci .

Ce qui a fonctionné pour le moment, cependant, est de supprimer les classes slick-initialized et slick-slider du conteneur avant de réinitialiser la couche lisse, comme suit:

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

Supprimer les classes ne semble pas déclencher l'événement de destruction (non testé mais logique), mais provoque le comportement correct de l'appel slick() suivant. Aussi longtemps que vous n'avez aucun déclencheur sur la destruction, vous devriez être bon.

2
Tejas Kemkar

Je me trouvais face à un problème où le carrousel Slick ne rafraîchissait pas les nouvelles données, mais ajoutait de nouvelles diapositives aux précédentes.

essayez de supprimer, puis assignez vos nouvelles données qui sont restituées dans le carrousel de nappes, puis initialisez à nouveau la nappe. Ce sont les étapes pour moi:

jQuery('.class-or-#id').slick('unslick');
myData = my-new-data;
jQuery('.class-or-#id').slick({slick options});

Remarque: vérifiez la syntaxe du site Web astucieux au cas où. assurez-vous également que vous n'utilisez pas de décalé avant que slick ne soit initialisé, ce que cela signifie est simplement initialisé (comme ceci jquery('.my-class').slick({options}); le premier appel ajax et une fois qu'il est initialisé puis suivez les étapes ci-dessus, vous voudrez peut-être utiliser si sinon

1
Junaid
$('#slick-slider').slick('refresh'); //Working for slick 1.8.1
0
Mihir Bhatt

Après avoir appelé une demande, définissez le délai d'expiration pour initialiser le curseur lisse.

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 le slick slider au début. Il suffit d'initialiser après un AJAX avec un délai d'attente. Cela devrait fonctionner pour vous.

0
Tijan Manandhar