VUE--Swiper轮播

swiper库地址：https://swiper.com.cn/

父组件

<template>
    <div>
        <!-- <div style="height:300px;background:yellow;">轮播</div> -->
        <film-swiper>
            <div class="swiper-slide" v-for="(data,index) in imgList" :key="index">
                <img :src="data"/>
            </div>
        </film-swiper>
        <!-- 吸顶效果 -->
        <film-header style="position: sticky;top: 0;background: white;"></film-header>
        <router-view></router-view>
    </div>
</template>
<script>
import filmHeader from '@/views/film/FilmHeader'
import filmSwiper from '@/views/film/FilmSwiper'
export default {
    components:{
        filmHeader,filmSwiper
    },
    data(){
        return{
            imgList:[
                'https://pic.maizuo.com/usr/movie/4c4153c2a4c00a055f839adc9b85c551.jpg?x-oss-process=image/quality,Q_70',
                'https://pic.maizuo.com/usr/movie/56b8d62c897ee7d632361eb111d6a24d.jpg?x-oss-process=image/quality,Q_70',
                'https://pic.maizuo.com/usr/movie/e36d2d9c7db09e956849e89aebbc5259.jpg?x-oss-process=image/quality,Q_70'
                ],

        }
    }
}
</script>
<style scoped>

</style>

子组件

<template>
  <!-- Swiper -->
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <slot></slot>
    </div>
    <div class="swiper-pagination"></div>
  </div>
</template>
<script>
import Swiper from "swiper/bundle"; //引入swiper.js
import "swiper/swiper-bundle.css"; //引入swiper.css
export default {
  mounted() {
    const swiper = new Swiper(".swiper-container", {
      autoplay: true,//可选选项，自动滑动
      // 如果需要分页器
      pagination: {
        el: ".swiper-pagination",
      },
    });
  },
};
</script>
<style scoped>
.swiper-wrapper img {
  width: 100%;
  height: 200px;
}

项目源码：
链接：https://pan.baidu.com/s/1K8HnVEZy87O6-gl6qsZnxw
提取码：t70u
复制这段内容后打开百度网盘手机App，操作更方便哦