swiper 实现卡片自动左右轮播

可以使用 Swiper.js 库来实现卡片自动左右轮播。首先，在 HTML 代码中创建一个容器，然后在 JavaScript 中初始化 Swiper 实例，设置参数即可实现卡片自动左右轮播。

以下是一个示例代码：

HTML 代码：

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">卡片1</div>
    <div class="swiper-slide">卡片2</div>
    <div class="swiper-slide">卡片3</div>
    <div class="swiper-slide">卡片4</div>
    <div class="swiper-slide">卡片5</div>
  </div>
</div>

JavaScript 代码：

var mySwiper = new Swiper('.swiper-container', {
  slidesPerView: 'auto', // 自动适应容器宽度
  centeredSlides: true, // 居中显示
  spaceBetween: 10, // 卡片之间的间距
  loop: true, // 开启循环模式
  autoplay: {
    delay: 3000, // 自动切换的时间间隔
    disableOnInteraction: false // 用户操作后是否停止自动切换
  },
  navigation: {
    nextEl: '.swiper-button-next', // 下一页按钮
    prevEl: '.swiper-button-prev', // 上一页按钮
  },
  pagination: {
    el: '.swiper-pagination', // 分页器
    clickable: true, // 是否可点击
  },
});

以上代码中，`slidesPerView` 设置为 `auto` 表示自动适应容器宽度，`centeredSlides` 设置为 `true` 表示居中显示，`spaceBetween` 设置为 10 表示卡片之间的间距为 10 像素，`loop` 设置为 `true` 表示开启循环模式，`autoplay` 设置了自动切换的时间间隔和用户操作后是否停止自动切换，`navigation` 和 `pagination` 分别表示下一页、上一页按钮和分页器的配置。