在wordpress Ajax响应后应用Slick的问题

Question

请帮助我！

我正在尝试使用slick生成自定义woocommerce画廊。为此，我使用Ajax。 Ajax工作得很好，我设法获得了我的woocommerce画廊所需的图像，问题是我无法重新加载Slick。

这是我的代码：Product-Images.php

<div class="col-md-6 col-lg-7 p-b-30">
                <div class="p-l-25 p-r-30 p-lr-0-lg">
                    <div class="wrap-slick3 flex-sb flex-w">
                        <div class="wrap-slick3-dots"></div>
                        <div class="wrap-slick3-arrows flex-sb-m flex-w"></div>
                        <div class="slick3 gallery-lb">

  Here I get my images with html tags from Ajax success response, so slick function must see this part to display my gallery.

                        </div>
                    </div>
                </div>
            </div>

Images.js（我在这里放了Ajax调用）

jQuery(function($){

$('input.variation_id').change( function(){
    var ajaxurl_variation_image_url = 'https://domaine.com/wp-admin/admin-ajax.php';

    var product_id = document.getElementById('div-product-id').innerHTML;

  if( '' != $('input.variation_id').val() ) {

    var variation_id = $('input.variation_id').val();

    }

        $.ajax({

              url: ajaxurl_variation_image_url,
              type: 'post',
              cache: false,
              data: {
                     action: 'variation_image_url',
                     product_id: product_id,
                     variation_id: variation_id
                    },

         success: function(data) {

             $(".slick3").html(data);

            $('.wrap-slick3').each(function(){
            $(this).find('.slick3').slick({
                slidesToShow: 1,
                slidesToScroll: 1,
                fade: true,
                infinite: true,
                autoplay: false,
                autoplaySpeed: 6000,

                arrows: true,
                appendArrows: $(this).find('.wrap-slick3-arrows'),
                prevArrow:'<button class="arrow-slick3 prev-slick3"><i class="fa fa-angle-left" aria-hidden="true"></i></button>',
                nextArrow:'<button class="arrow-slick3 next-slick3"><i class="fa fa-angle-right" aria-hidden="true"></i></button>',

                dots: true,
                appendDots: $(this).find('.wrap-slick3-dots'),
                dotsClass:'slick3-dots',
                customPaging: function(slick, index) {
                    var portrait = $(slick.$slides[index]).data('thumb');
                    return '<img src=" ' + portrait + ' "/><div class="slick3-dot-overlay"></div>';
                },  
            });
        });


         }

            });


       });

  });

Wordpress function.php

function variation_image_url() {


$product_id = $_POST['product_id'];

$variation_id = $_POST['variation_id'];

$product_variation = Functions::get_product_variation($product_id, $variation_id);

$attachment_ids = wp_list_pluck($product_variation['variation_gallery_images'], 'image_id');


header("Content-Type: text/html");


 foreach ($attachment_ids as $attachment_id) :

       $image_url = wp_get_attachment_url( $attachment_id); 

    if ($image_url != '') {

ob_start();
?>

    <div class="item-slick3" data-thumb="<?php echo $image_url ; ?>">
                                    <div class="wrap-pic-w pos-relative">
                                        <img src="<?php echo $image_url ; ?>" dalt="IMG-PRODUCT">

                                        <a class="flex-c-m size-108 how-pos1 bor0 fs-16 cl10 bg0 hov-btn3 trans-04" href="<?php echo $image_url ; ?>">
                                            <i class="fa fa-expand"></i>
                                        </a>
                                    </div>
                                </div>

<?php                   

$output  =  ob_get_contents();

ob_end_clean();

 echo $output;

}

  endforeach;


    die();

}

正如我所解释的，一切正常，但是当Ajax从function.php返回我的值时，我在Ajax成功之后放入的Slick函数$('.wrap-slick3').each(function(){ $(this).find('.slick3').slick({无法正常工作，请您能帮我吗？非常感谢！！

Answer 1

我解决了我的问题，购买了Ajax响应中的一个循环：

success: function(data) {

  for (var i = 0; i < data.length; i++)
             {

$(".wrap-slick3").each(function(){ $(this).find(".slick3").slick("slickAdd","<div class='item-slick3' data-thumb="+data[i]+"><div class='wrap-pic-w pos-relative'><img src="+data[i]+" alt='IMG-PRODUCT'> <a class='' href="+data[i]+"><i class='fa fa-expand'></i></a> </div> </div>"); 

 //alert(data[i]);
});      }

        }

本主题帮助我找到解决方案：

Slick Carousel custom paging not setting dynamic data-attributes

现在它就像一种魅力，最好的问候