这是我的repository:github Netlify生产:netlify
在我的代码中,我有分页模块,这很好。但自动播放模块有一个不工作
当我去其他部分,回到家里部分自动播放开始工作
import { Swiper, SwiperSlide } from 'swiper/react';
import { Autoplay, Pagination, EffectCoverflow } from 'swiper';
// Import Swiper styles
import 'swiper/scss';
import 'swiper/scss/autoplay';
import 'swiper/scss/pagination';
import { carouselData } from '../../data/carouselData';
export default function CarouselSwiper() {
return (
<div className='carouselSwiper__parentDiv'>
<Swiper
className='carouselSwiper__Swiper'
modules={[Autoplay, Pagination, EffectCoverflow]}
slidesPerView={1}
autoplay={{ delay: 2500, disableOnInteraction: false }}
pagination={{
clickable: true,
}}
loop={true}
speed={500}
>
{carouselData.map(({ id, title, src }) => {
return (
<SwiperSlide key={id}>
<img
className='carouselSwiper__img'
src={`assets/Fondos/${src}`}
alt={title}
/>
</SwiperSlide>
);
})}
</Swiper>
</div>
);
}
1条答案
按热度按时间jhiyze9q1#
我不确定你是否遇到了同样的问题,但我在Netlify上部署Astro.js和Swiper.js网站时遇到了问题。虽然Swiper在本地工作正常,但当我在Netlify上部署它时,我在浏览器控制台中遇到了CORS错误:'从源' https://xx/www.example.com '访问' https://xxx/xxx.js '处的脚本xxx.app已被CORS策略阻止:请求的资源上不存在“Access-Control-Allow-Origin”标头。
我认为这个问题是由Netlify的默认“资产优化”设置引起的,该设置会自动捆绑JavaScript文件,可能会导致它们托管在不支持CORS的域上。一旦我禁用了这个设置,网站就能按预期工作,与本地的工作方式类似。