[英]slick slider is not appending <div class="slick-slide slick-cloned" and dynamic class not appending in each loop of ajax
//$.each(coff, function(index, el)
in this loop all the data is append but slick slider is not applying on AJAX each loop //$.each(coff, function(index, el)
在这个循环中所有的数据都被追加但是光滑的滑块没有在每个循环上应用 AJAX
function slickCarousel1() {
$('#regular2').slick({
infinite: true,
slidesToShow: 3,
slidesToScroll: 3
});
}
the below code is applicable on the button and show the records fetched from the database以下代码适用于按钮并显示从数据库中获取的记录
$('.step1Circle').on('click',function() {
$('#step1_img').remove();
$('.sliderclas').empty();
var coffee_slug = $(this).attr("coffee_name");
$("#loader").show();
$('#coffType').val(coffee_slug);
$('#slider-thumbs').empty();
$('#slider-thumbs').append('<section class="regular sliderclas" id="regular2"></section>');
$.ajax({
url: '../../../testAjax',
method: 'get',
data: {coffee_slug:coffee_slug },
success: function(response) {
$('#regular1').slick('unslick');
slickCarousel1();
$('#loader').fadeOut(1000);
$('#shakeid').append(' <img src="'+response.coffee_img+'">');
var coff = response.coffee_data;
var i = 0;
$.each(coff, function(index, el) { // we are not getting any error in console
$('.slick-track').append('<div><center><i onclick="AjaxStepTwo(event)" style="font-size:150px; color:'+el.color+' !important" class="fa fa-circle step2Circle" coffee_nam="'+el.slug+'" aria-hidden="true"></i><br><b style="color:black;">'+el.title+'</b></center></div>');
});
}
});
});
function slickCarousel1() {
$('#regular2').slick({
infinite: true,
slidesToShow: 3,
slidesToScroll: 3
});
}
You cannot add slides looping elements.您不能添加幻灯片循环元素。 Slick needs to know that you added slides. Slick 需要知道您添加了幻灯片。 Most probably you would want to add the slides using很可能您想使用添加幻灯片
$('#your-element').slick('slickAdd',"<div>..</div>");
refer: Slick Demos, Add & Remove
demo参考: Slick Demos, Add & Remove
演示
Or maybe, if it works you can check by adding and then again running slickCarousel1
function basically reinitialising the slick slider或者,如果它有效,您可以通过添加然后再次运行slickCarousel1
函数来检查,基本上重新初始化光滑的滑块
Or maybe, you can use $('#your-element').slick('refresh')
and check if the slides are getting refreshed or not.或者,您可以使用$('#your-element').slick('refresh')
并检查幻灯片是否正在刷新。 (this is not that documented, refer: this github issue ) (这不是记录在案,请参阅: this github issue )
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.