【发布时间】：2018-08-25 04:42:35
【问题描述】：
我正在用 ul li 做光滑的滑块，但效果不好。
我的意思是成功加载滑块需要 2-5 秒（有时需要更多时间）。在那个加载时间，它看起来像这样：
https://i.stack.imgur.com/kdte5.png
所以这是正常的 ul li，没有光滑的滑块。
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>
我在 .我打电话给"slick"，因为这就是我在requirejs-config.js中定义的slickSlider
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>
调用-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));
};
});
需要js-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'
}
}
};
【问题讨论】：