为什么在 React js 的 Swiper 中自动播放不起作用？

Question

我正在为我的项目卡构建一个自动播放滑动器，它会在鼠标悬停时暂停。刷卡功能工作正常，但自动播放不起作用。

进口：

import Swiper from "swiper";
import 'swiper/css';

useEffect(() => {
        const swiper = new Swiper(".swiper", {
            
            direction: "horizontal",
            loop: false,
            speed: 1500,
            slidesPerView: 4,
            spaceBetween: 60,
            mousewheel: true,
            parallax: true,
            centeredSlides: true,
            effect: "coverflow",
            coverflowEffect: {
                rotate: 40,
                slideShadows: true
            },
            autoplay: {
                delay: 2000,
                pauseOnMouseEnter: true
            },
            scrollbar: {
                el: ".swiper-scrollbar"
            },
            breakpoints: {
                0: {
                    slidesPerView: 1,
                    spaceBetween: 60
                },
                600: {
                    slidesPerView: 2,
                    spaceBetween: 60
                },
                1000: {
                    slidesPerView: 3,
                    spaceBetween: 60
                },
                1400: {
                    slidesPerView: 4,
                    spaceBetween: 60
                },
                2300: {
                    slidesPerView: 5,
                    spaceBetween: 60
                },
                2900: {
                    slidesPerView: 6,
                    spaceBetween: 60
                }
            }
        });
    
        // Cleanup
        return () => {
            swiper.destroy();
        };
    }, []);

你能帮我解决我的问题吗

Answer 1

import { Link } from "react-router-dom";
import Slider from "react-slick";

const ProjectSlider = () => {
 const settings = {
  className: "center",
  centerMode: true,
  infinite: true,
  centerPadding: "60px",
  slidesToShow: 3,
  speed: 500,
  autoplay: true,
  autoplaySpeed: 2000
};
return (
 <>
    <div className="container">
      <div className="row justify-content-center">
        <div className="col-lg-8 col-md-10">
          <div className="sec-head text-center">
            <h6
              className="wow fadeIn"
              data-wow-delay=".5s"
              style={{
                visibility: "visible",
                animationDelay: "0.5s",
                animationName: "fadeIn",
              }}
            >
              Featured Works
            </h6>
            <h3
              className="wow color-font animated"
              style={{ visibility: "visible" }}
            >
              Some of our projects that we completed recently<br />
            </h3>
          </div>
        </div>
      </div>
    </div>
    <div className="mobile" style={{marginBottom: '100px'}}>
        <Slider {...settings}>
          <div>
              <Link to={`https://digitalexcalibur.com/wp-content/uploads/2023/01/indexuk-copy-2.png`} target="_blank">
                <img
                  id="slide-1"
                  className="img-fluid"
                  src="https://digitalexcalibur.com/wp-content/uploads/2023/01/indexuk-copy-2.png"
                  alt="Image 1"
                />
              </Link>
          </div>
          <div>
            <Link to={`https://digitalexcalibur.com/wp-content/uploads/2023/01/johnsouthern-sas-v2.png`} target="_blank">
              <img 
                id="slide-2" 
                className="img-fluid" 
                src="https://digitalexcalibur.com/wp-content/uploads/2023/01/johnsouthern-sas-v2.png"
              />
            </Link>
          </div>
          <div>
            <Link to={`https://digitalexcalibur.com/wp-content/uploads/2023/01/zb-pacific-automobiles-inc.png`} target="_blank">
              <img 
                id="slide-3"
                className="img-fluid" 
                src="https://digitalexcalibur.com/wp-content/uploads/2023/01/zb-pacific-automobiles-inc.png"
              />
            </Link>
          </div>
          <div>
            <Link to={`https://digitalexcalibur.com/wp-content/uploads/2023/01/ms-joseph-vaccaro.png`} target="_blank">
              <img 
                id="slide-4" 
                className="img-fluid"
                src="https://digitalexcalibur.com/wp-content/uploads/2023/01/ms-joseph-vaccaro.png"
              />
            </Link>
          </div>
          <div>
            <Link to={`https://digitalexcalibur.com/wp-content/uploads/2023/01/ms-pacific-automobiles.png`} target="_blank">
              <img 
                id="slide-5"
                className="img-fluid" 
                src="https://digitalexcalibur.com/wp-content/uploads/2023/01/ms-pacific-automobiles.png"
              />
            </Link>
          </div>
          <div>
            <Link to={`https://digitalexcalibur.com/wp-content/uploads/2023/01/ms-bike-it.png`} target="_blank">
              <img 
                id="slide-6" 
                className="img-fluid" 
                src="https://digitalexcalibur.com/wp-content/uploads/2023/01/ms-bike-it.png"
              />
            </Link>
          </div>
        </Slider>
    </div>
</>
)
}

export default ProjectSlider