vue中使用swiper制作电影轮播切换

最新推荐文章于 2024-08-09 16:07:40 发布

DefuseAll

最新推荐文章于 2024-08-09 16:07:40 发布

阅读量1k

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/gongzuoyongde/article/details/110222542

版权

1. 下载包

npm install vue-awesome-swiper swiper --save

2.引入包

main.js文件中:
import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/swiper-bundle.min.css'
Vue.use(VueAwesomeSwiper)

3.布局及配置

<template>
  <div>
    <swiper :options="options">
      <swiper-slide v-for="(item,index) in bannerList" :key="index">
        <img :src="item.image" />
      </swiper-slide>
    </swiper>
  </div>
</template>
<script>
import axios from 'axios'
export default {
  data() {
    return {
      bannerList:[],
      options: {
        slidesPerView: 4, // 页面同时可以展示的轮播数量
        centeredSlides: true, // 轮播居中 (默认轮播是靠左的)
        loop: false, // 禁止轮播循环
        touchRatio: 1, // 触摸比例。触摸距离与slide滑动距离的比率。默认为1，按照1:1的触摸比例滑动。设置为0时，完全无法滑动
        spaceBetween: 0, // 轮播图之间的距离
        slideToClickedSlide: true // 设置为true则点击某个轮播会过渡到这个轮播。不然只能滑动到下一个轮播
      },
    }
  },
  mounted() {
        axios({
      url:'http://123.207.32.32:8000/home/multidata'
    }).then(
      res=>{
        this.bannerList=res.data.data.banner.list
      }
    )
  }
}
</script>
<style lang="scss" scoped>
.swiper-slide {
  img {
    width: 100%;
    height: 100%;
    background: red;
  }
}
.swiper-slide:not(.swiper-slide-active) {
  transition: 400ms;
  transform: scale(0.8335) translateY(20px);
}
</style>