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?
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 */
}
});
Cela devrait marcher.
$.ajax({
type: 'get',
url: '/public/index',
dataType: 'script',
data: data_send,
success: function() {
$('.skills_section').slick('reinit');
}
});
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();
}
});
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++;
}
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.
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.
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
$('#slick-slider').slick('refresh'); //Working for slick 1.8.1
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.