Magento 2 - Slick slider function not working
Actually one of possible reason why it may not properly working because you don't add the slick
after ajax success response. You just need to replace this, with your js code
require([
'jquery',
'magiccart/slick',
'alothemes'
], function($, slick){
jQuery.ajax({
url: "/manufacturerpages/index/collection",
type: "POST",
data: "id= <?php echo $manpagedataarr['page_id']; ?>&categoryid=<?php echo $categoryid; ?>&carouselorder=<?php echo $manpagedataarr['carouselorder']; ?>&collection_type=<?php echo $manpagedataarr['collection_type']; ?>&product_ids=<?php echo $manpagedataarr['product_ids']; ?>&manufacturer=<?php echo $manpagedataarr['manufacturer']; ?>",
success: function (res) {
//console.log(res);
var result = jQuery('.product-items', res).html();
var undefined = false;
if(typeof result === 'undefined'){
result = res;
undefined = true;
}
jQuery(".featured-collector_<?php echo $categoryid; ?>").html(result);
jQuery(".landing-featured .ajax_loading").hide();
// ******This is your slick code***********
jQuery('.featured-collector_<?php echo $categoryid; ?>').slick({
dots: false,
infinite: true,
slidesToShow: 6,
slidesToScroll: 2,
arrows: true,
autoplay: false,
draggable: true,
speed: 300
});
jQuery( "form[data-role='tocart-form']" ).catalogAddToCart();
}
});
});
I hope this will help
It's likely your AJAX request is completing AFTER the slider is initialised, see if adding your Slick JS to your success callback helps:
require([
'jquery'
], function($){
jQuery.ajax({
url: "/manufacturerpages/index/collection",
type: "POST",
data: "id= <?php echo $manpagedataarr['page_id']; ?>&categoryid=<?php echo $categoryid; ?>&carouselorder=<?php echo $manpagedataarr['carouselorder']; ?>&collection_type=<?php echo $manpagedataarr['collection_type']; ?>&product_ids=<?php echo $manpagedataarr['product_ids']; ?>&manufacturer=<?php echo $manpagedataarr['manufacturer']; ?>",
success: function (res) {
//console.log(res);
var result = jQuery('.product-items', res).html();
var undefined = false;
if(typeof result === 'undefined'){
result = res;
undefined = true;
}
jQuery(".featured-collector_<?php echo $categoryid; ?>").html(result);
jQuery(".landing-featured .ajax_loading").hide();
jQuery( "form[data-role='tocart-form']" ).catalogAddToCart();
jQuery('.featured-collector_<?php echo $categoryid; ?>').slick({
dots: false,
infinite: true,
slidesToShow: 6,
slidesToScroll: 2,
arrows: true,
autoplay: false,
draggable: true,
speed: 300
});
}
});
});
If so I recommend you split your JS up into Require JS modules rather than inlining it inside a template then you can keep them separate and still call it in your success callback. I see JS inside PHTML as a bad practice, it makes maintenance much harder and I think it prevents your JS from being cached.