Magento2 Magento 2.1.10：带ul li的光滑滑块

我正在用ul li做滑头，但效果不好。
我的意思是，成功加载滑块需要2-5秒（有时需要更长的时间）。在该加载时间内，它如下所示：


这是正常的ul li，没有光滑的滑块。

下面是我把滑溜滑块放进去后的情况：

抱歉，因为我不能在这里发布直接图像。我没有足够的声誉去做那件事。
下面是代码：

<?php
/**
 * Copyright © 2013-2017 Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */

// @codingStandardsIgnoreFile

?>
<?php
/**
 * Template for displaying products list widget
 *
 * @var $block \Gssi\ProductsSlider\Block\Product\ProductsList
 */
?>
<?php if ($exist = ($block->getProductCollection() && $block->getProductCollection()->getSize())):?>
<?php
    $type = 'widget-product-grid';

    $mode = 'grid';

    $image = 'new_products_content_widget_grid';
    $title = $block->getTitle() ? __($block->getTitle()) : '';
    $items = $block->getProductCollection()->getItems();

    $showWishlist = true;
    $showCompare = true;
    $showCart = true;
    $templateType = \Magento\Catalog\Block\Product\ReviewRendererInterface::DEFAULT_VIEW;
    $description = false;
?>
    <div class="block widget block-products-list <?php /* @escapeNotVerified */ echo $mode; ?>">
        <?php if ($title):?>
        <div class="block-title">
            <strong><?php /* @escapeNotVerified */ echo $title; ?></strong>
        </div>
        <?php endif ?>
        <div class="block-content">
            <?php /* @escapeNotVerified */ echo '<!-- ' . $image . '-->' ?>
            <div class="products-<?php /* @escapeNotVerified */ echo $mode; ?> <?php /* @escapeNotVerified */ echo $mode; ?>">
                <ul class="slick-custom product-items <?php /* @escapeNotVerified */ echo $type; ?>">
                    <?php $iterator = 1; ?>
                    <?php foreach ($items as $_item): ?>
                        <?php /* @escapeNotVerified */ echo($iterator++ == 1) ? '<li class="product-item">' : '</li><li class="product-item">' ?>
                        <div class="product-item-info">
                            <a href="<?php /* @escapeNotVerified */ echo $block->getProductUrl($_item) ?>" class="product-item-photo">
                                <?php echo $block->getImage($_item, $image)->toHtml(); ?>
                            </a>
                            <div class="product-item-details">
                                <strong class="product-item-name">
                                    <a title="<?php echo $block->escapeHtml($_item->getName()) ?>"
                                       href="<?php /* @escapeNotVerified */ echo $block->getProductUrl($_item) ?>"
                                       class="product-item-link">
                                        <?php echo $block->escapeHtml($_item->getName()) ?>
                                    </a>
                                </strong>
                                <?php
                                echo $block->getProductPriceHtml($_item, $type);
                                ?>

                                <?php if ($templateType): ?>
                                    <?php echo $block->getReviewsSummaryHtml($_item, $templateType) ?>
                                <?php endif; ?>

                                <?php if ($showWishlist || $showCompare || $showCart): ?>
                                    <div class="product-item-actions">
                                        <?php if ($showCart): ?>
                                            <div class="actions-primary">
                                                <?php if ($_item->isSaleable()): ?>
                                                    <?php if ($_item->getTypeInstance()->hasRequiredOptions($_item)): ?>
                                                        <button class="action tocart primary"
                                                                data-mage-init='{"redirectUrl":{"url":"<?php /* @escapeNotVerified */ echo $block->getAddToCartUrl($_item) ?>"}}'
                                                                type="button" title="<?php /* @escapeNotVerified */ echo __('Add to Cart') ?>">
                                                            <span><?php /* @escapeNotVerified */ echo __('Add to Cart') ?></span>
                                                        </button>
                                                    <?php else: ?>
                                                        <?php
                                                            $postDataHelper = $this->helper('Magento\Framework\Data\Helper\PostHelper');
                                                            $postData = $postDataHelper->getPostData($block->getAddToCartUrl($_item), ['product' => $_item->getEntityId()])
                                                        ?>
                                                        <button class="action tocart primary"
                                                                data-post='<?php /* @escapeNotVerified */ echo $postData; ?>'
                                                                type="button" title="<?php /* @escapeNotVerified */ echo __('Add to Cart') ?>">
                                                            <span><?php /* @escapeNotVerified */ echo __('Add to Cart') ?></span>
                                                        </button>
                                                    <?php endif; ?>
                                                <?php else: ?>
                                                    <?php if ($_item->getIsSalable()): ?>
                                                        <div class="stock available"><span><?php /* @escapeNotVerified */ echo __('In stock') ?></span></div>
                                                    <?php else: ?>
                                                        <div class="stock unavailable"><span><?php /* @escapeNotVerified */ echo __('Out of stock') ?></span></div>
                                                    <?php endif; ?>
                                                <?php endif; ?>
                                            </div>
                                        <?php endif; ?>
                                        <?php if ($showWishlist || $showCompare): ?>
                                            <div class="actions-secondary" data-role="add-to-links">
                                                <?php if ($this->helper('Magento\Wishlist\Helper\Data')->isAllow() && $showWishlist): ?>
                                                    <a href="#"
                                                       data-post='<?php /* @escapeNotVerified */ echo $block->getAddToWishlistParams($_item); ?>'
                                                       class="action towishlist" data-action="add-to-wishlist"
                                                       title="<?php /* @escapeNotVerified */ echo __('Add to Wish List') ?>">
                                                        <span><?php /* @escapeNotVerified */ echo __('Add to Wish List') ?></span>
                                                    </a>
                                                <?php endif; ?>
                                                <?php if ($block->getAddToCompareUrl() && $showCompare): ?>
                                                    <?php $compareHelper = $this->helper('Magento\Catalog\Helper\Product\Compare');?>
                                                    <a href="#" class="action tocompare"
                                                       data-post='<?php /* @escapeNotVerified */ echo $compareHelper->getPostDataParams($_item);?>'
                                                       title="<?php /* @escapeNotVerified */ echo __('Add to Compare') ?>">
                                                        <span><?php /* @escapeNotVerified */ echo __('Add to Compare') ?></span>
                                                    </a>
                                                <?php endif; ?>
                                            </div>
                                        <?php endif; ?>
                                    </div>
                                <?php endif; ?>
                            </div>
                        </div>
                        <?php echo($iterator == count($items)+1) ? '</li>' : '' ?>
                    <?php endforeach ?>
                </ul>
            </div>
            <?php echo $block->getPagerHtml() ?>
        </div>
    </div>

    <script>
        require([
            'jquery',
            'slick'
        ], function ($) {
            $(document).ready(function () {
                $('.slick-custom').slick({
                    slidesToShow: 5,
                    speed: 300,
                    autoplay: true
                });
            });
        });
    </script>
<?php endif;?>

编辑1:

在6个小时寻找答案后，我找到了原因（至少我认为是原因：D）。
好的，所以我将其作为来宾，因为Magento没有及时加载javascript。我的意思是加载这个光滑的滑动javascript需要一段时间。
现在，顺利调用slick slider大约需要1-2秒。在这1-2秒内，它将解决该问题（如图2所示）。
好的，问题仍然存在，如果你们有任何建议，请告诉我。非常感谢：）

编辑2：
我正在关注@HoangHieu解决方案，但似乎不起作用
以下是我所做的：

<div class="products-<?php /* @escapeNotVerified */ echo $mode; ?> <?php /* @escapeNotVerified */ echo $mode; ?>" data-mage-init='{ "slick": {} }'>
    <ul class="slick-custom product-items <?php /* @escapeNotVerified */ echo $type; ?>">
        // some li
        <li>...</li>
    </ul>
</div>

编辑3:
好的，这是我在@HoangHieu solution之后一直做的事情：

<ul class="slick-custom product-items <?php /* @escapeNotVerified */ echo $type; ?>" data-mage-init='{ "callSlick": {} }'>
//some li
</ul>

requirejs-config.js

---

一些小部件将在页面加载后加载。通过在HTML中搜索关于

KnoutJs UIComponent获取要加载的前缀块-->使用AJAX-->附加到正文加载块HTML

这意味着您无法使用简单的方法应用平滑滑块。改用组件

<div data-mage-init="{'slickSlider':{}}">
     <ul>
         <li></li>
     </ul>
</div>

调用slick.js

var config = {
    map: {
        '*': {
            slickSlider:       'Magento_Catalog/js/slick', //Slick slider libary
            callSlick:       'Magento_Catalog/js/call-slick'
        }
    }
};

/**
 * Created by Hidro Le.
 * Job Title: Magento Developer
 * Date: 27/08/2018
 * Time: 10:16
 */

define(['jquery', 'slickSlider'], function ($) {
    "use strict";
    return function (config, element) {
        let defaultConfig = {
            infinite: true,
            slidesToShow: 3,
            slidesToScroll: 3
        };
        $(element).slick($.extend({}, defaultConfig, config));
    };
});

**更新2:*结果与示例完全相同



更新3：如果您与您的团队合作。请重新检查页面样式表，使用空布局创建新页面内容，以确保您的代码中没有任何自定义CSS受到影响。
哇，谢谢，我稍后再试并反馈给您：）已更新。添加示例。谢谢，我对magento有点陌生，抱歉：）但我有一个问题，什么是
$。在call slick.js中扩展（{}
和
config
？不，这意味着将配置合并到默认值，然后返回一个新对象。嗯..仍然不起作用，我已经在您之后做了，而且，清除缓存并再次部署。：(
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */

var config = {
    map: {
        '*': {
            slick: 'Gssi_ProductsSlider/js/lib/slick',
            callSlick: 'Gssi_ProductsSlider/js/call-slick'
        }
    }
};

<div data-mage-init="{'slickSlider':{}}">
     <ul>
         <li></li>
     </ul>
</div>

<ol class="product-items <?= /* @escapeNotVerified */ $type ?>" data-mage-init='{"callSlick":{}}'>
                    <?php $iterator = 1; ?>
                    <?php foreach ($items as $_item): ?>
                        <?= /* @escapeNotVerified */ ($iterator++ == 1) ? '<li class="product-item">' : '</li><li class="product-item">' ?>
                        <div class="product-item-info">
                            <a href="<?= /* @escapeNotVerified */ $block->getProductUrl($_item) ?>" class="product-item-photo">
                                <?= $block->getImage($_item, $image)->toHtml() ?>
                            </a>
                            <div class="product-item-details">
                                <strong class="product-item-name">
                                    <a title="<?= $block->escapeHtml($_item->getName()) ?>"
                                       href="<?= /* @escapeNotVerified */ $block->getProductUrl($_item) ?>"
                                       class="product-item-link">
                                        <?= $block->escapeHtml($_item->getName()) ?>
                                    </a>
                                </strong>

                            </div>
                        </div>
                        <?= ($iterator == count($items)+1) ? '</li>' : '' ?>
                    <?php endforeach ?>
                </ol>

var config = {
    map: {
        '*': {
            slickSlider:       'Magento_Catalog/js/slick', //Slick slider libary
            callSlick:       'Magento_Catalog/js/call-slick'
        }
    }
};

/**
 * Created by Hidro Le.
 * Job Title: Magento Developer
 * Date: 27/08/2018
 * Time: 10:16
 */

define(['jquery', 'slickSlider'], function ($) {
    "use strict";
    return function (config, element) {
        let defaultConfig = {
            infinite: true,
            slidesToShow: 3,
            slidesToScroll: 3
        };
        $(element).slick($.extend({}, defaultConfig, config));
    };
});