Question

我正在用ul li做光滑的滑块，但效果不佳。
我的意思是，成功加载滑块需要2-5秒（有时需要花费更多时间）。在那个加载时间内，它看起来像这样：
https://i.stack.imgur.com/kdte5.png

这是正常的ul，没有滑动条。
https://i.stack.imgur.com/ebF9m.png
这是我放入光滑滑块之后的结果：
https://i.stack.imgur.com/kdte5.png
对不起，因为我无法在此处发布直接图片。我没有足够的声誉来做到这一点。
所以这是代码：

<?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;?>

我尝试将其放在光滑的滑块选项中，但根本不起作用：

slide: 'li',
track: function() { return $(this).children('product-item'); },

编辑1：

寻找答案的6个小时后，我找到了原因（或者至少是我的原因：D）。
好的，我来客串它是因为Magento没有及时加载javascript。我的意思是要花一些时间才能加载这个漂亮的滑块javascript。
现在，成功调用平滑滑块大约需要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>

我在中添加了data-mage-init='{ "slick": {} }'。我之所以叫"slick"是因为我在slickSlider中定义了requirejs-config.js

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

编辑3：
好的，这就是我在@HoangHieu解决方案之后直到现在要做的事情：

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

call-slick.js

define(['jquery', 'slick'], function ($) {
    "use strict";
    return function (config, element) {
        let defaultConfig = {
            infinite: true,
            slidesToShow: 4,
            speed: 300,
            autoplay: true,
            arrows: false,
            dots: false,
            responsive: [
            {
                breakpoint: 1024,
                settings: {
                    slidesToShow: 4
                }
            },
            {
                breakpoint: 600,
                settings: {
                    slidesToShow: 3
                }
            },
            {
                breakpoint: 480,
                settings: {
                    slidesToShow: 2
                }
            }
        ]
        };
        $(element).slick($.extend({}, defaultConfig, config));
    };
});

requirejs-config.js

/**
 * 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'
        }
    }
};

Answer 1

某些小部件将在页面加载后加载。如果您在HTML中搜索有关(2, worksheet2)的{{3}}

在这里流

加载HTML-> KnoutJs UIComponent获取要加载的前缀BLOCK->使用AJAX加载Block HTML->附加到BODY。

这意味着您不能使用简单的方法来应用 Slick Slider 。改用Component

<!-- BLOCK --

在此处查看更多信息：https://devdocs.magento.com/guides/v2.1/extension-dev-guide/cache/page-caching/private-content.html

更新2：我认为您没有阅读我的相关文档。我举一个例子。

1：“我的产品列表”小部件模板。

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

Requiejs-config.js

<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>

call-slick.js

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

**更新2：**结果完全是示例。

https://devdocs.magento.com/guides/v2.0/javascript-dev-guide/javascript/js_init.html

更新3：如果您与团队一起工作。请重新检查页面样式表，使用空白布局创建新页面内容，以确保代码上没有影响任何自定义CSS。

Magento 2.1.10：带有ul li的平滑滑块

1 个答案: