[英]Use Owl Carousel 2 with next.js and react
I want to use jQuery owl carousel with my next js react app.我想在我的下一个 js react 应用程序中使用 jQuery owl carousel。 I dont want to use npm package
react-owl-carousel
only owl-carousel
and jquery
plugin.我不想只使用 npm 包
react-owl-carousel
owl-carousel
和jquery
插件。
I use lazy load with next.js dynamic
and put the following code in my Webpack config:我在 next.js
dynamic
使用延迟加载,并将以下代码放入我的 Webpack 配置中:
import dynamic from 'next/dynamic';
const Slider = dynamic(() => import('...'), {
ssr: false,
});
Webpack config:网络包配置:
config.plugins.push(new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery',
}));
Slider component:滑块组件:
import 'owl.carousel';
import 'owl.carousel/dist/assets/owl.carousel.css';
When I use $('element').owlCarousel(...)
, I got the following error:当我使用
$('element').owlCarousel(...)
,出现以下错误:
TypeError: this.owl.owlCarousel is not a function
类型错误:this.owl.owlCarousel 不是函数
after checking the bundle file i find that webpack pass another jQuery instance to owl.carousel file检查捆绑文件后,我发现 webpack 将另一个 jQuery 实例传递给 owl.carousel 文件
here is webpack bundle code这是 webpack 捆绑代码
__webpack_require__(/*! jquery */ "../../node_modules/owl.carousel/node_modules/jquery/dist/jquery.js")
as you can see jQuery pass to plugin from node_modules/owl.carousel/node_modules/jquery/dist/jquery.js
instead of node_modules/jquery/dist/jquery.js
正如你所看到的,jQuery 从
node_modules/owl.carousel/node_modules/jquery/dist/jquery.js
而不是node_modules/jquery/dist/jquery.js
传递给插件
i fixed issue by deleting node_modules/owl.carousel/node_modules
我通过删除
node_modules/owl.carousel/node_modules
解决了问题
after that webpack pass node_modules/jquery/dist/jquery.js
as jquery instance在 webpack 传递
node_modules/jquery/dist/jquery.js
作为 jquery 实例之后
Inject global window via jQuery and webpack inside next.config.js file at the root of your next.js project在 next.js 项目根目录下的 next.config.js 文件中通过 jQuery 和 webpack 注入全局窗口
module.exports = { webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => { // Note: we provide webpack above so you should not `require` it // Perform customizations to webpack config config.plugins.push( new webpack.ProvidePlugin({ $: "jquery", jQuery: "jquery", "window.jQuery": "jquery" }) ); // Important: return the modified config return config; }
Slider component which uses react-owl-carousel
component使用
react-owl-carousel
组件的滑块组件
import OwlCarousel from "react-owl-carousel"; export default function MySlider({ sliders }) { return ( <section> <OwlCarousel loop={true} items={1} responsiveRefreshRate={0} autoplay={true} autoplayTimeout={7000} autoplayHoverPause={true} nav={true} navText={[ "<i class='icon-arrow-prev'></i>", "<i class='icon-arrow-next'></i>" ]} dots={false} margin={20} > <div class="item"></div> <div class="item"></div> </OwlCarousel> </section> ); }
Import the component and for use onto your parent component.导入组件并在您的父组件上使用。 Kindly note you MUST use the
ssr:false
option.请注意,您必须使用
ssr:false
选项。 Next.js documentation recommends it Next.js 文档推荐它
const MySlider = dynamic( () => import("./Myslider"), // No need for SSR, when the module includes a library that only works in the // browser. { ssr: false } );
Happy codding.快乐编码。
In next.config.js:在 next.config.js 中:
const webpack = require('webpack');
module.exports = {
webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
config.plugins.push(new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery'
}))
return config;
}}
In your component:在您的组件中:
import "owl.carousel/dist/assets/owl.carousel.css";
import "owl.carousel/dist/assets/owl.theme.default.css";
const OwlCarousel = dynamic(import("react-owl-carousel"), {ssr: false});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.