完成需求:轮播页面自动滚动循环播放素材,在视频页面自动播放视频至视频结束后继续轮播下一个素材,手动切换时视频页暂停播放,切换回来后恢复播放。
1.安装swiper相关插件
2.在轮播页面引入
import { Swiper, SwiperSlide } from "vue-awesome-swiper";
import "swiper/swiper-bundle.css";
import Swiper2, { Autoplay } from "swiper";
Swiper2.use([Navigation, Pagination, EffectFade, Autoplay]);
此处特别注意,自动播放Autoplay 需要单独引入,因为swiper单独对Autoplay 进行了打包操作,如果未引入会导致设置自动播放属性无效
3.轮播结构
<swiper
v-if="carouselList.length>0"
class="carousel swiper-container"
ref="mySwiper"
@slideChange="onSlideChange"
:options="swiperOption"
>
<swiper-slide