Magento 2.1.10: Slick slider with ul li - magento2

Question

I'm doing slick slider with ul li, and it doesn't work well.
What i mean is it take 2-5 second to load succesfully the slider (some time it take more than that). In that loading time, it look like this:
https://i.stack.imgur.com/kdte5.png
So here is the normal ul li, with out slick slider.
https://i.stack.imgur.com/ebF9m.png
And here is what after i put slick slider in:
https://i.stack.imgur.com/kdte5.png
Sorry because i cant post the direct image in here. I don't have enough reputaion to do that.
So here is the code:
<?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;?>
I've try put this in slick slider option, but doesn't work at all:
slide: 'li',
track: function() { return $(this).children('product-item'); },
EDIT 1:
After 6 hours looking for the answer, i've found the reason (or atleast i thing its the reason :D ).
Okay, so i guest its because Magento wasn't load the javascript in time. I mean it take a while to load this slick slider javascript.
Right now, it take about 1-2 seconds for slick slider called successfully. And in that 1-2 seconds, it will render that problem out (just like in picture 2).
Ok so the problem is still there, if you guys have any suggestion, please tell me. Thanks alot :)
EDIT 2:
I'm follow #HoangHieu solution, but doesn't seem to work
Here is what i've done :
<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>
I've added data-mage-init='{ "slick": {} }' in the . I called "slick" because that is what i define slickSlider in requirejs-config.js
var config = {
map: {
'*': {
slick: 'Gssi_ProductsSlider/js/lib/slick',
}
}
};
EDIT 3:
Okay so here is what i've done til now after #HoangHieu solution:
<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

Some widget will load after the page loaded. By if you search in HTML about <!-- BLOCK -- that is https://devdocs.magento.com/guides/v2.1/extension-dev-guide/cache/page-caching/private-content.html
Flow here
Html loaded --> KnoutJs UIComponent get Prefix BLOCK to load --> Load Block HTML using AJAX --> Append to BODY.
that means you can't apply Slick Slider by using simple ways. Using Component instead
<div data-mage-init="{'slickSlider':{}}">
<ul>
<li></li>
</ul>
</div>
See more here: https://devdocs.magento.com/guides/v2.0/javascript-dev-guide/javascript/js_init.html
Update 2: I think you didn't read my related documents. I will give you an example.
1: My Product List Widget Template.
<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>
Requiejs-config.js
var config = {
map: {
'*': {
slickSlider: 'Magento_Catalog/js/slick', //Slick slider libary
callSlick: 'Magento_Catalog/js/call-slick'
}
}
};
call-slick.js
/**
* 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));
};
});
**Update 2: ** The result exactly example.
Update 3: If you are work with your team. Please recheck page Style Sheet, Create new page content with an empty layout to make sure didn't have any custom CSS affected on your code.