This is the fourth day of my participation in the November Gwen Challenge. Check out the details: The last Gwen Challenge 2021.

Hello everyone, I am zhang Three years old 🤣, a French front-end ⚖️. Love share 🖋️, love ice ice 🧊🧊. Welcome friends to add my wechat: Maomaoibingbing, pull you into the group, discuss together, look forward to growing with you 🥂.

preface

Swiper is immediately on my mind. This article will give you a taste of how to use swiper in React and what to watch out for.

I. Brief introduction of requirements

The requirement is very simple, is an autoplay, click to switch the wheel map (running light), can display six pictures at the same time, unlimited scrolling. As shown below:

Two, start coding

1. Check official documents

The first step on wheels is always to read the official document, attached here is the portal:

  1. Swiper Chinese website
  2. Swiper React Components

2. Install dependencies

npm i swiper
# or
yarn add swiper
Copy the code

3. Running official website case (error)

Let’s copy and run the sample code from the official website, which uses TSX because the project uses TypeScript.

// src/pages/Demo/index.tsx
import React from 'react';

// Import Swiper React components
import { Swiper, SwiperSlide } from 'swiper/react';
// Import Swiper styles
import 'swiper/css';

const Demo: React.FC = () = > {
  return (
    <Swiper
      spaceBetween={50}
      slidesPerView={3}
      onSlideChange={()= > console.log('slide change')}
      onSwiper={(swiper) => console.log(swiper)}
    >
      <SwiperSlide>Slide 1</SwiperSlide>
      <SwiperSlide>Slide 2</SwiperSlide>
      <SwiperSlide>Slide 3</SwiperSlide>
      <SwiperSlide>Slide 4</SwiperSlide>
    </Swiper>
  );
};

export default Demo;
Copy the code

Then the page looks like this:

AssertionError [ERR_ASSERTION]: filePath not found of swiper/ React. I thought THERE was something wrong with it, so I just created a new JSX file and pasted it in without modifying it, but it still gives me the same error (I won’t include the sample code here).

4. Solve current problems

4.1 Analyzing Problems

Swiper/React cannot be found or the CSS file fails to be imported. I have made the following guesses about the causes of this problem:

  1. There may be a dependency installation error
  2. Maybe the case on the official website is wrong
  3. It may be the plug-in itself

4.2 Finding a Solution

After many attempts to solve the problem and failure, I started with the error message and used Baidu’s method. Finally found an article that solved the current problem: “antd pro using swiper7”. The article points out that the current problem is due to incompatible versions of the plug-in.

4.3 Attempt to Solve

4.3.1 downgraded to swiper6.8.4

Remove the previous latest 7.x release and use 6.8.4 instead. Swiper React Components Swiper React Components Swiper React Components Swiper React Components

Yarn remove swiper yarn add [email protected]Copy the code

4.3.2 Modifying imported style files

- import 'swiper/css';
+ import 'swiper/swiper-bundle.css';
Copy the code

4.3.3 Viewing the Effect

It is really a long time to come out, busy for a long time can finally display the normal, then to improve it, in order to achieve the desired effect.

5. Achieve results

5.1 Basic Styles

Bring in images, modify styles. Directly on the code:

// src/pages/Demo/index.tsx
import React from 'react';
import { Swiper, SwiperSlide } from 'swiper/react';
import 'swiper/swiper-bundle.css';
import styles from './index.less';

const Demo: React.FC = () = > {
  const partnerLogo: Array<string> = [
    require('@/assets/images/demo/partner-logo-1.png'),
    require('@/assets/images/demo/partner-logo-2.png'),
    require('@/assets/images/demo/partner-logo-3.png'),
    require('@/assets/images/demo/partner-logo-4.png'),
    require('@/assets/images/demo/partner-logo-5.png'),
    require('@/assets/images/demo/partner-logo-6.png')];return (
    <div className={styles.demo}>
      <Swiper spaceBetween={20} slidesPerView={6} loop>
        {partnerLogo.map((value, index) => {
          return (
            <SwiperSlide key={index}>
              <img className={styles.item} src={value} />
            </SwiperSlide>
          );
        })}
      </Swiper>
    </div>
  );
};

export default Demo;
Copy the code
// src/pages/Demo/index.less
.demo {
  position: relative;
  margin: 0 auto;
  width: 1200px;
  min-width: 1200px;
  
  .item {
    margin: 50px 0;
    width: 162px;
    box-shadow: 3px 6px 8px #dde0e8; }}Copy the code

Take a look at the results:

5.2 Effect of automatic rotation

According to the documentation, non-core modules need to be introduced before they can be used. Swiper6.x official website description and translation:

By default Swiper React uses core version of Swiper (without any additional modules). If you want to use Navigation, Pagination and other modules, you have to install them first. By default, Swiper React uses the core version of Swiper (without any additional modules). If you want to use navigation, paging, and other modules, you must install them first.

Directly on the code:

// src/pages/Demo/index.tsx
import React from 'react';
import { Swiper, SwiperSlide } from 'swiper/react';
import 'swiper/swiper-bundle.css';
import styles from './index.less';

// Add the following code to use the "auto rotation" function
import SwiperCore, { Autoplay } from 'swiper';
SwiperCore.use([Autoplay]);

const Demo: React.FC = () = > {
  const partnerLogo: Array<string> = [
      // ...
  ];

  return (
    <div className={styles.demo}>{/* add "autoplay" */}<Swiper spaceBetween={20} slidesPerView={6} loop autoplay>
        {partnerLogo.map((value, index) => {
          return (
            <SwiperSlide key={index}>
              <img className={styles.item} src={value} />
            </SwiperSlide>
          );
        })}
      </Swiper>
    </div>
  );
};

export default Demo;
Copy the code

The effect of automatic rotation is as follows:

5.3 Forward and Back Buttons

Add two images as forward/back buttons and add styles accordingly.

// src/pages/Demo/index.tsx
import React from 'react';
import { Swiper, SwiperSlide } from 'swiper/react';
import SwiperCore, { Autoplay, Navigation } from 'swiper';
import 'swiper/swiper-bundle.css';

import styles from './index.less';
import imgPrev from '@/assets/images/demo/prev.png';
import imgNext from '@/assets/images/demo/next.png';

SwiperCore.use([Autoplay, Navigation]);

const Demo: React.FC = () = > {
  const partnerLogo: Array<string> = [
    // ...
  ];

  return (
    <div className={styles.demo}>
      <img className={styles.prev} src={imgPrev} />
      <img className={styles.next} src={imgNext} />

      <Swiper
        spaceBetween={20}
        slidesPerView={6}
        loop
        autoplay
        navigation={{ prevEl: `.The ${styles.prev} `,nextEl: `.The ${styles.next}` }}
      >
        {partnerLogo.map((value, index) => {
          return (
            <SwiperSlide key={index}>
              <img className={styles.item} src={value} />
            </SwiperSlide>
          );
        })}
      </Swiper>
    </div>
  );
};

export default Demo;
Copy the code
// src/pages/Demo/index.less
.demo {
  position: relative;
  margin: 0 auto;
  width: 1200px;
  min-width: 1200px;

  .prev..next {
    position: absolute;
    top: 72px;
    cursor: pointer;

    &:hover {
      opacity: 0.8; }}.prev {
    left: -70px;
  }

  .next {
    right: -70px;
  }

  .item {
    margin: 50px 0;
    width: 162px;
    box-shadow: 3px 6px 8px #dde0e8; }}Copy the code

The final result looks like this:

The resources

  • Antd Pro swiper7