我正在尝试在 Shopify 主题(布鲁克林主题)中进行一些自定义。在这个主题中,有一个文件 theme.js.liquid
,他们在其中导入了 slicker:
/*
_ _ _ _
___| (_) ___| | __ (_)___
/ __| | |/ __| |/ / | / __|
\__ \ | | (__| < _ | \__ \
|___/_|_|\___|_|\_(_)/ |___/
|__/
Version: 1.8.1
Author: Ken Wheeler
Website: http://kenwheeler.github.io
Docs: http://kenwheeler.github.io/slick
Repo: http://github.com/kenwheeler/slick
Issues: http://github.com/kenwheeler/slick/issues
*/
!function(i){"use strict";"function"==typeof define&&define.amd?define(["jquery"],i):"undefined"!=typeof exports?module.exports=i(require("jquery")):i(jQuery)}(function(i){"use strict";var e=window.Slick||{};(e=function(){var e=0;return function(t,o){var s,n=this;n.defaults={accessibility:!0,adaptiveHeight:!1,appendArrows:i(t),appendDots:i(t),arrows:!0,asNavFor:null,prevArrow:
因为太长了,所以我剪掉了这一行的结尾。
然后在 chrome 控制台中,如果我这样做:
$('.slick-slider').slick('slickUnfilter');
它返回:
<块引用>未捕获的类型错误:无法读取 n.fn.init.i.fn.slick 处未定义的属性“slickUnfilter”
对于任何光滑的函数(例如“slickFilter”、“slickAdd”、“slickRemove”、...),我都收到了此错误。 我搜索了这个错误,据我所知,这是因为这些方法已定义但未初始化,或者因为有两次初始化。然而,slicker 是在主题中导入的,它应该已经正确完成了。那我该怎么办?
任何帮助将不胜感激。
编辑: 正如有人指出的那样,有 2 个滑块(一个在主页上,一个在另一个页面上)。当我在 chrome 控制台中编码时,我在另一个页面上。这就是我得到最后一个错误的原因,因为我猜滑块已经在主页面上初始化了。解决方案是给它们不同的名字。
答案 0 :(得分:1)
由于 slick-slider
类混淆而导致 Shopify Brooklyn 主题产品页面出现此错误,如果您想要使用名为 slickUnfilter
的光滑函数。
您需要在产品页面上使用单独的类,然后使用 slick-slider
,因为 slick.JS
添加了相同的类,并且它在页面上显示所有 slick
实例。
所以就像布鲁克林主题一样,您需要找到另一个添加到父滑块元素的类。
您可以使用 $('.product-single__media-group').slick('slickUnfilter');
,它运行良好。
谢谢