swiper 实现视频和图

Swiper是一个非常流行的前端轮播库，它不仅支持图片轮播，还可以轻松地集成视频播放。要实现在Swiper中同时展示图片和视频，你可以按照以下步骤操作：

1. 首先，确保已经在项目中引入了Swiper库和相关的CSS样式文件。

<!-- 引入Swiper CSS -->
<link rel="stylesheet" href="swiper.min.css">

2. 创建包含图片和视频的HTML结构。每项内容可以包裹在一个swiper-slide中：

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <img src="image1.jpg" alt="Image 1">
      <!-- 视频嵌套于slide内 -->
      <video controls>
        <source src="video1.mp4" type="video/mp4">Your browser does not support the video tag.
      </video>
    </div>
    <!-- 添加更多图片和视频 -->
    <div class="swiper-slide">
      <img src="image2.jpg" alt="Image 2">
      <video src="video2.mp4" type="video/mp4"></video>
    </div>
  </div>
</div>

3. 初始化Swiper实例，并配置相应的选项，比如自动播放、循环滚动等：

// JavaScript部分
import Swiper from 'swiper';

const swiper = new Swiper('.swiper-container', {
  // 如果你想让视频自动播放
  autoplay: {
    disableOnInteraction: false,
  },
  loop: true, // 设置循环模式
});

// 可选：添加响应式设置，适应不同设备
swiper.update();