The homepage is blanked using swiper in nextjs. and also all the components within the file also not loaded in the browser using swiper. I guess the other dependencies of the package.js may cause the problem. The problem needs to be solved as I faced this for 3 days.
everything is ok except the carousel if not add swiper in the app.
I have installed the following dependencies:
"dependencies": {
"@ant-design/compatible": "^1.0.8",
"@ant-design/icons": "^4.6.2",
"@ckeditor/ckeditor5-build-classic": "^25.0.0",
"@ckeditor/ckeditor5-react": "^3.0.1",
"@fortawesome/fontawesome-svg-core": "^1.2.35",
"@fortawesome/free-brands-svg-icons": "^5.15.3",
"@fortawesome/free-regular-svg-icons": "^5.15.3",
"@fortawesome/free-solid-svg-icons": "^5.15.3",
"@fortawesome/react-fontawesome": "^0.1.14",
"@hookform/error-message": "^2.0.0",
"@hookform/resolvers": "^2.8.2",
"antd": "latest",
"antd-img-crop": "^3.16.0",
"axios": "^0.21.1",
"bootstrap": "5.0.2",
"braft-editor": "^2.3.9",
"cors": "^2.8.5",
"dayjs": "^1.10.7",
"joi": "^17.4.2",
"less": "^4.1.2",
"lodash": "^4.17.21",
"moment": "^2.29.1",
"next": "latest",
"nookies": "^2.5.2",
"react": "17.0.2",
"react-bootstrap": "^1.6.0",
"react-color": "^2.19.3",
"react-dom": "17.0.2",
"react-hook-form": "7.16.1",
"react-hot-toast": "^2.1.1",
"react-image-magnify": "^2.7.4",
"react-infinite-scroll-component": "^6.1.0",
"react-intersection-observer": "^8.32.1",
"react-router-dom": "^5.2.0",
"react-share": "^4.4.0",
"sass": "^1.34.1",
"sslcommerz-lts": "^1.1.0",
"sweetalert": "^2.1.2",
"swiper": "^8.4.2",
"yup": "^0.32.11"
},
Swiper component
<section>
<Swiper observer={true} spaceBetween={10}
modules={[Navigation,Scrollbar,Pagination]}
navigation
pagination={{clickable:true}}
slidesPerView={2}
onSlideChange={() => console.log('slide change')}
onSwiper={(swiper) => console.log(swiper)} className={styles.swiperDiv}>
<SwiperSlide className={styles.card}>
<h2>Documentation 1→</h2>
<p>Find in-depth information about Next.js features and API.</p>
</SwiperSlide>
<SwiperSlide className={styles.card}>
<h2>Documentation 2 →</h2>
<p>Find in-depth information about Next.js features and API.</p>
</SwiperSlide>
<SwiperSlide className={styles.card}>
<h2>Documentation 3 →</h2>
<p>Find in-depth information about Next.js features and API.</p>
</SwiperSlide>
<SwiperSlide className={styles.card}>
<h2>Documentation 4 →</h2>
<p>Find in-depth information about Next.js features and API.</p>
</SwiperSlide>
<SwiperSlide className={styles.card}>
<h2>Documentation 5 →</h2>
<p>Find in-depth information about Next.js features and API.</p>
</SwiperSlide>
</Swiper>
</section>
```
[output for using swiper in the app][1]
[1]: https://i.stack.imgur.com/7cPir.png
I want to use swiper for the carousel and slider component for the app