ReferenceError: Swiper没有定义为白色

我正在尝试使用官方文档中给出的cdn链接在nextjs项目中导入swiper。这是我的代码

import React from 'react'
import Image from 'next/image'
import Head from 'next/head'
import swiper from '../Configuration/swiper'
const aboutus = () => {
return (
<>
<Head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/8.2.6/swiper-bundle.css" />
</Head>
<div>
<div style={{width:"300px",height:"400px"}} class="swiper w-80 h-96">
<div class="swiper-wrapper">

<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>

</div>

<div class="swiper-pagination"></div>

<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>

<div class="swiper-scrollbar"></div>
</div>
</div>
<Script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/8.2.6/swiper-bundle.min.js"  strategy="beforeInteractive" />
</Script>
</>
)

export default about

在我的swiper.js文件中包含初始化swiper的配置。

const swiper = new Swiper('.swiper', {
// Optional parameters
direction: 'vertical',
loop: true,

// If we need pagination
pagination: {
el: '.swiper-pagination',
},

// Navigation arrows
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},

// And if we need scrollbar
scrollbar: {
el: '.swiper-scrollbar',
},
});
console.log(swiper)

export default swiper;

仍然得到错误Swiper未定义(在new关键字之后的Swiper.js文件中)。谁来帮帮我。

比起使用外部源，你可以添加swiper/react库并使用它创建元素。

检查这个演示，不要忘记导入在示例中标记的样式。尽量避免使用<Script>或<link>标签。要删除和更新使用nextjs/react:

<Script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/8.2.6/swiper-bundle.min.js"  strategy="beforeInteractive" />
</Script>

相关内容

最新更新

热门标签：