带有 Browserify / Shim CDN 的 Slick Carousel jQuery
Slick Carousel with Browserify / Shim CDN jQuery
我查看了所有与此问题相关的 SO 答案,但没有任何效果。
所以我的项目中有 jQuery,通过 Google CDN 加载。
我正在使用 babelify、browserify 和 browserify-shim 来尝试让 slick carousel 工作,但我一直收到错误:Uncaught TypeError: n.element.slick is not a function
我的 package.json 文件如下所示:
"browserify-shim": {
"jquery": "global:jQuery",
"slick-carousel": {
"depends": [
"jquery: jQuery"
],
"exports": "$.fn.slick"
}
},
"browserify": {
"transform": [
"browserify-shim"
]
}
我的 js 文件如下所示:
import { $, jQuery } from 'jquery'
import slick from 'slick-carousel'
class Carousel {
constructor(props) {
this.element = props.element
this.type = this.element.data('carousel-type') || 'default'
this.settings = {
arrows: true,
dots: true,
slidesToShow: this.element.data('slides') || 1,
infinite: false,
responsive: [
{
breakpoint: 768,
settings: {
slidesToShow: 2
}
},
{
breakpoint: 568,
settings: {
slidesToShow: 1
}
}
]
}
if (this.type === 'mobile') {
this.settings.arrows = false
this.settings.dots = false
}
this.initializeCarousel()
}
initializeCarousel = () => {
this.element.slick(this.settings)
}
}
export default Carousel
有人知道我做错了什么吗?我真的很想为我的依赖项使用 npm,但我现在不能,因为我不能让它工作。
原来这就是我需要我的 package.json 的样子:
"browserify": {
"transform": [ "browserify-shim" ]
},
"browser": {
"slick-carousel": "./node_modules/slick-carousel/slick/slick.js"
},
"browserify-shim": {
"jquery": "global:jQuery"
}
不知道为什么会这样,也不知道它在做什么,但似乎可以解决问题。谁能解释一下?
我查看了所有与此问题相关的 SO 答案,但没有任何效果。
所以我的项目中有 jQuery,通过 Google CDN 加载。
我正在使用 babelify、browserify 和 browserify-shim 来尝试让 slick carousel 工作,但我一直收到错误:Uncaught TypeError: n.element.slick is not a function
我的 package.json 文件如下所示:
"browserify-shim": {
"jquery": "global:jQuery",
"slick-carousel": {
"depends": [
"jquery: jQuery"
],
"exports": "$.fn.slick"
}
},
"browserify": {
"transform": [
"browserify-shim"
]
}
我的 js 文件如下所示:
import { $, jQuery } from 'jquery'
import slick from 'slick-carousel'
class Carousel {
constructor(props) {
this.element = props.element
this.type = this.element.data('carousel-type') || 'default'
this.settings = {
arrows: true,
dots: true,
slidesToShow: this.element.data('slides') || 1,
infinite: false,
responsive: [
{
breakpoint: 768,
settings: {
slidesToShow: 2
}
},
{
breakpoint: 568,
settings: {
slidesToShow: 1
}
}
]
}
if (this.type === 'mobile') {
this.settings.arrows = false
this.settings.dots = false
}
this.initializeCarousel()
}
initializeCarousel = () => {
this.element.slick(this.settings)
}
}
export default Carousel
有人知道我做错了什么吗?我真的很想为我的依赖项使用 npm,但我现在不能,因为我不能让它工作。
原来这就是我需要我的 package.json 的样子:
"browserify": {
"transform": [ "browserify-shim" ]
},
"browser": {
"slick-carousel": "./node_modules/slick-carousel/slick/slick.js"
},
"browserify-shim": {
"jquery": "global:jQuery"
}
不知道为什么会这样,也不知道它在做什么,但似乎可以解决问题。谁能解释一下?