react swiper@ Problems encountered in work

react swiper@ problem handling

Since this version is relatively low, the use of swiper directly searched online is not applicable to this version. Therefore, I will summarize the problems I encountered in my work. I hope that friends who encounter the same problem will not go far:

1. How to use react swiper@:

(1) Installation:

npm install [email protected]

(2) Use

import { Swiper, SwiperSlide } from 'swiper/react';
	import 'swiper/';
	import SwiperCore, { Autoplay, Navigation, Pagination, A11y } from 'swiper';
	([Autoplay, Navigation, Pagination, A11y]);
	&lt;Swiper
        // You can control the behavior of autoplay through other options        autoplay={{
          delay: 5000,
          disableOnInteraction: false,
          pauseOnMouseEnter: true,
        }}
        allowTouchMove={true}
        loop={true}
        // Customize the icon of the forward and back button        navigation={{
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        }}
        // Define the style and icon of the forward and back button in CSS        className="my-swiper"
        pagination={{ clickable: true }}
        onSlideChange={() =&gt; ('slide change')}
        onSwiper={(swiper) =&gt; (swiper)}&gt;
        &lt;SwiperSlide&gt;
          &lt;div style={{ height: 200 }}&gt;Slide 1&lt;/div&gt;
        &lt;/SwiperSlide&gt;
        &lt;SwiperSlide&gt;
          &lt;div style={{ height: 200 }}&gt;Slide 2&lt;/div&gt;
        &lt;/SwiperSlide&gt;
        &lt;SwiperSlide&gt;
          &lt;div style={{ height: 200 }}&gt;Slide 3&lt;/div&gt;
        &lt;/SwiperSlide&gt;
        &lt;SwiperSlide&gt;
          &lt;div style={{ height: 200 }}&gt;Slide 4&lt;/div&gt;
        &lt;/SwiperSlide&gt;
        {/* Forward button */}
        &lt;div className="swiper-button-next" /&gt;
        {/* Back button */}
        &lt;div className="swiper-button-prev" /&gt;
      &lt;/Swiper&gt;

2. React swiper@ configures automatic carousel and enables the configuration of moving in and stopping

 		autoplay={{
          delay: 5000,
          disableOnInteraction: false,
          // Move in and stop automatically playing          pauseOnMouseEnter: true,
        }}
``

This is the article about the problem handling solutions encountered by react swiper@ at work. For more related react swiper@ content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!