我引用这样的 CSS 和 JS 文件:
SPComponentLoader.loadCss('../node_modules/slick-carousel/slick/slick.css');
SPComponentLoader.loadCss('../node_modules/slick-carousel/slick/slick-theme.css');
SPComponentLoader.loadScript('../node_modules/slick-carousel/slick/slick.min.js');
当我进入 Chrome 中的开发工具并查看源代码时,我可以进入并且所有文件都在那里。
但是在控制台中我收到以下错误:
Failed to load resource: net::ERR_NAME_NOT_RESOLVED
Uncaught (in promise) Error: Error: Unable to load script https://relative-path.invalid/jquery
Error loading https://relative-path.invalid/jquery as "jquery" from https://localhost:4321/node_modules/slick-carousel/slick/slick.min.js
这是通过 CDN 引用 jQuery 时的情况。我还尝试通过 TypeScripts import 语句并使用上面使用的 .loadScript 方法来引用它。
有人知道出了什么问题吗?
最佳答案
像这样导入jQUery
import * as $ from 'jquery';
我的类构造函数
public constructor() {
super();
SPComponentLoader.loadCss('../../node_modules/slick-carousel/slick/slick.css');
SPComponentLoader.loadCss('../../node_modules/slick-carousel/slick/slick-theme.css');
}
我的渲染方法:
public render(): void {
this.domElement.innerHTML = `
<div class="container">
<div class="your-class">
<div>your content</div>
<div>your content</div>
<div>your content</div>
</div>
</div>
`;
require('../../../node_modules/slick-carousel/slick/slick.js');
$('.your-class').slick();
}
它很丑,而且没有箭头按钮,但我可以通过用鼠标拖动它来使其滑动。
关于javascript - 在 SPFx 项目中使用光滑的轮播。我正在加载库,但出现一些奇怪的控制台错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43098840/