Magento 2 - Slick slider function not working

Question

Slick slider function is not working after ajax response, This is the order of my code. Firstly I got a product collection response, Then I wrote a slick slider function. but slider function is not working.

This is dom element in phtml file in which ajax response appear

<div class="category-products clearfix products wrapper grid products-grid">
    <ol class="products list items product-items featured-collector featured-collector_<?php echo $categoryid; ?>">
    </ol>
</div>

This is my js code

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

    });
});

require([
    'jquery',
    'magiccart/slick',
        'alothemes'
    ], function($, slick){
    jQuery('.featured-collector_<?php echo $categoryid; ?>').slick({
        dots: false,
        infinite: true,
        slidesToShow: 6,
        slidesToScroll: 2,
        arrows: true,
        autoplay: false,
        draggable: true,
        speed: 300
    });
});

Answer 1

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

Answer 2

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.