Question

Swiper.js 自动播放的自定义停止和播放按钮 (React/Next)

2022-07-25

3722

javascript reactjs next.js swiper.js

我一直在尝试在 React 中创建一个利用 Swiper.js 自动播放功能来停止和播放的 Swiper。我尽可能地遵循他们的指示，并进行了大量研究以寻找答案。我甚至能够通过执行相同操作的 jQuery 示例（某种程度上）确认我的设置，但即使是该参考在 React 中也无济于事。

这是我目前得到的结果：

// Note: I am using Next.js,
// so there are some minor differences from React,
// but they shouldn't affect the Swiper.
import { useRef } from 'react'
import { Swiper, SwiperSlide } from 'swiper/react'
import { Autoplay, Pagination, EffectCreative } from 'swiper'
import 'swiper/css'
import 'swiper/css/pagination'

const App = () => {

  const heroSwiper = useRef(null)

  // Both functions below return an error:
  // TypeError: undefined is not an object
  // (evaluating 'heroSwiper.current.autoplay.start')
  const playHero = () => {
    heroSwiper.current.autoplay.start()
  }
  const pauseHero = () => {
    heroSwiper.current.autoplay.stop()
  }

  return (
    <>

      // ... Other content

      <Swiper
        ref={heroSwiper}
        direction='horizontal'
        speed={2500}
        loop={true}
        grabCursor={true}
        autoplay={{
          disableOnInteraction: false,
          delay: 3500
        }}
        effect={'creative'}
        creativeEffect={{
          prev: {
            translate: ['-50%', 0, -100],
          },
          next: {
            translate: ['100%', 0, 0],
          }
        }}
        pagination={{
          clickable: true,
        }}
        modules={[ Autoplay, EffectCreative, Pagination ]}
      >

        <SwiperSlide>
          <span>1</span>
        </SwiperSlide>
        <SwiperSlide>
          <span>2</span>
        </SwiperSlide>
        <SwiperSlide>
          <span>3</span>
        </SwiperSlide>
        <SwiperSlide>
          <span>4</span>
        </SwiperSlide>
        <SwiperSlide>
          <span>5</span>
        </SwiperSlide>
        <SwiperSlide>
          <span>6</span>
        </SwiperSlide>

        <div>
          <button type='button' onPointerUp={playHero}>Play</button>
          <button type='button' onPointerUp={pauseHero}>Pause</button>
        </div>

      </Swiper>

      // ... Other content

    </>
  )
}

export default App

感谢您的回复！

Answer 1

我明白了！在 Swiper.js 的 JavaScript 示例中，它们使用常量来引用 Swiper 函数，而不是元素。

const swiper = new Swiper('.swiper', {
 autoplay: {
   delay: 5000,
 },
})

这让我感到困惑，因为在 React 中，Swiper.js 处理初始化。

幸运的是，我在另一个部分发现他们说“ 初始化 Swiper 之后 ，可以在其 HTMLElement 上访问 Swiper 的实例。它是 Swiper 的 HTML 容器元素的 swiper 属性：”

const swiper = document.querySelector('.swiper').swiper

看到他们如何在元素内引用 swiper 让我意识到我只需要在我的引用中引用 swiper 。

const playHero = e => {
  e.preventDefault()
  heroSwiper.current.swiper.autoplay.start()
}
const pauseHero = e => {
  e.preventDefault()
  heroSwiper.current.swiper.autoplay.stop()
}

这很有道理，但他们的文档并没有清楚地说明这一点，因为它仅用原始 JavaScript 编写。

我希望这对任何人都有帮助有这个问题的人。

Answer 2

对 swiper 组件使用 ref 是错误的。

使用 state 变量代替 const heroSwiper = useRef(null);

const [heroSwiper, setSwiperRef] = useState(null);

然后在 onSwiper 属性中设置 setSwiperRef 。

<Swiper
  // ref={heroSwiper} // This is wrong
  onSwiper={setSwiperRef}

最后，使用 state 变量更改滑块的启动/停止。

const playHero = () => {
    heroSwiper.autoplay.start();
  };
  const pauseHero = () => {
    heroSwiper.autoplay.stop();
  };

如果它有效，请告诉我！