ReactJS: How do I stop a video in a slide when that slide is no longer active?

[jordanlambrecht]

I'm trying to have a swiper gallery of different videos. Out of the box, all the videos keep on playing on top of each other as you swipe. I'd like to stop the current video when swiper moves on to the next slide. Any ideas?

Bonus points: I'd also like to update a useState to be the current title of the video. The videos are organized into an array and then mapped through.

Here's my current code:

import { Navigation, Pagination } from 'swiper'
import { Swiper, SwiperSlide } from 'swiper/react'
import 'swiper/css'
import 'swiper/css/pagination'
import { useState } from 'react'

const slides = [
  {
    videoPath: '/img/case-studies/snacklins/tiktoks/SNACKLINS_TikTok_HotGirlShit',
    title: 'Hot Girl Shit',
  },
  {
    videoPath: '/img/case-studies/snacklins/tiktoks/SNACKLINS_TikTok_HowBizarre',
    title: 'How Bizarre',
  },
  {
    videoPath: '/img/case-studies/snacklins/tiktoks/SNACKLINS_TikTok_NobleQuest',
    title: 'Noble Quest',
  },
]

function CaseStudies_TikTok() {
  const [activeTitle, setActiveTitle] = useState('')

  function SetSlide({ slide }) {
    return (
      <video
        controls
        muted={false}
        className={'h-full w-auto border-6 border-cream rounded-lg hover:cursor-grab'}
      >
        <source src={`${slide.videoPath}.webm`} type='video/webm' />
        <source src={`${slide.videoPath}.mp4`} type='video/mp4' />
      </video>
    )
  }

  const Carousel = () => {
    return (
      <Swiper
        spaceBetween={20}
        slidesPerView={1.25}
        loop
        navigation={{
          nextEl: '.carousel-button-next',
          prevEl: '.carousel-button-prev',
        }}
        pagination={{
          clickable: true,
          el: '.carousel-pagination',
          type: 'fraction',
        }}
        modules={[Navigation, Pagination]}
      >
        {slides.map((slide, index) => {
          return (
            <SwiperSlide key={index}>
                <SetSlide slide={slide} />
            </SwiperSlide>
          )
        })}
      </Swiper>
    )
  }
  return (
      <>
          <Carousel />
          <div className='flex flex-row justify-around text-cream mt-4 text-lg'>
          <button className='carousel-button-prev'>prev</button>
          <div className='text-center carousel-pagination font-italic'></div>
          <button className='carousel-button-next'>next</button>
          </div>
      </>
  )
}
export default CaseStudies_TikTok