components are not loading in next js using swiper

Question

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&rarr;</h2>
                              <p>Find in-depth information about Next.js features and API.</p>
                            </SwiperSlide>
                            <SwiperSlide className={styles.card}>
                              <h2>Documentation 2 &rarr;</h2>
                              <p>Find in-depth information about Next.js features and API.</p>
                            </SwiperSlide>
                            <SwiperSlide className={styles.card}>
                              <h2>Documentation 3 &rarr;</h2>
                              <p>Find in-depth information about Next.js features and API.</p>
                            </SwiperSlide>
                            <SwiperSlide className={styles.card}>
                              <h2>Documentation 4 &rarr;</h2>
                              <p>Find in-depth information about Next.js features and API.</p>
                            </SwiperSlide>
                            <SwiperSlide className={styles.card}>
                              <h2>Documentation 5 &rarr;</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

components are not loading in next js using swiper

0 Answers0