我已经安装了SwiperJS
进入我的NextJS
项目。我完全遵循了 Swiper 教程文档,但是当我尝试对类进行样式设计时出现问题.swiper
, .swiper-slide
...样式不响应我的自定义样式。
就我而言,我的滑块是一个组件,并且有一个名为的文件夹Slider
with index.tsx
文件和slider.module.scss
.
我的索引.tsx:
import Image from 'next/image';
import { Swiper, SwiperSlide } from 'swiper/react';
import { Navigation, Pagination, Scrollbar } from 'swiper';
import styles from './slider.module.scss'
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';
export function SliderPortfolio() {
return (
<div className={styles.teste}>
<Swiper
className={styles.mySwiper}
modules={[Navigation, Pagination, Scrollbar]}
spaceBetween={50}
slidesPerView={3}
navigation
pagination={{ clickable: true }}
scrollbar={{ draggable: true }}
>
<SwiperSlide>
<div className={styles.imageContainerNext}>
<Image
className={styles.imageNext}
src={'/images/dribble-mockup.png'}
alt="Illustration of a person carrying ideas for a professional website design"
layout="fill"
/>
</div>
</SwiperSlide>
<SwiperSlide>
<div className={styles.imageContainerNext}>
<Image
className={styles.imageNext}
src={'/images/dribble-mockup.png'}
alt="Illustration of a person carrying ideas for a professional website design"
layout="fill"
/>
</div>
</SwiperSlide>
<SwiperSlide>
<div className={styles.imageContainerNext}>
<Image
className={styles.imageNext}
src={'/images/dribble-mockup.png'}
alt="Illustration of a person carrying ideas for a professional website design"
layout="fill"
/>
</div>
</SwiperSlide>
<SwiperSlide>
<div className={styles.imageContainerNext}>
<Image
className={styles.imageNext}
src={'/images/dribble-mockup.png'}
alt="Illustration of a person carrying ideas for a professional website design"
layout="fill"
/>
</div>
</SwiperSlide>
</Swiper>
</div>
)
}
我的 slider.module.scss:
.teste {
background: blue; //works
.mySwiper {
background: red; //works
.swiper {
background: yellow; // doesn't work
}
.swiper-slide {
display: none; // doesn't work
}
}
}
我缺少什么?
解决了。我在我的主要样式中插入了 swiper 样式类global.scss
并工作了。感谢你们!
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)