vue2 实现swiper轮播图

vue2 实现swiper轮播图
小程序无法从小程序切换到微信浏览器的H5分享界面，小程序webview wxsdk权限太少 无法使用wx-open-launch-app
所以做了个h5的分享页 需要轮播展示内容
小程序内慎用id定义元素类名

mac需要sudo，pnpm install 可替换yarn add

1.sudo pnpm install swiper@5.x vue-awesome-swiper@4.x --save

swiper@5.x 以下会报Error: Can‘t resolve ‘swiper/css/swiper.css‘
2.main.js

import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'
Vue.use(VueAwesomeSwiper)

vue
<swiper :options="swiperOptions">
    <swiper-slide v-for="(image, index) in images" :key="index">
      <img :src="image" alt="轮播图图片">
    </swiper-slide>
    <!-- 分页器 -->
    <div class="swiper-pagination" slot="pagination"></div>
    <!-- 上一张按钮 -->
    <div class="swiper-button-prev" slot="button-prev"></div>
    <!-- 下一张按钮 -->
    <div class="swiper-button-next" slot="button-next"></div>   
  </swiper>

4.js

data(){
return{
images: [
        'https://example.com/image1.jpg', // 需替换为实际图片路径
        'https://example.com/image2.jpg',
        'https://example.com/image3.jpg'
      ],
      swiperOptions: {
        autoplay: {
          delay: 3000, // 自动播放间隔，单位为毫秒
          disableOnInteraction: false // 用户交互后不停止自动播放
        },
        speed: 1000, // 切换幻灯片的速度，单位为毫秒
        pagination: {
          el: '.swiper-pagination',
          clickable: true // 分页器可点击
        },
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        }
      },
      }
      }

5.css

.swiper-container {   width: 100%;   height: calc(100% - 60px); }

.swiper-slide img {   width: 100%;   height: 100%;   object-fit: cover; }