vue使用Swiper实现定制化轮播图效果

最新推荐文章于 2024-05-24 17:24:45 发布

墙角的爬山虎

最新推荐文章于 2024-05-24 17:24:45 发布

阅读量551

点赞数 1

分类专栏： vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_45659847/article/details/125315117

版权

vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1、安装Swiper指定版本，选择3/4，高版本不太兼容，易出问题

npm install vue-awesome-swiper@3 --save-dev

2、引用组件，以及相关页面的实现,具体参考以下代码即可

<template>
	<div class="example-3d">
	      <swiper class="swiper" :options="swiperOption">
	        <swiper-slide v-for="item in List">
	          <img :src="item.url" alt="">
	        </swiper-slide>
	        <div class="swiper-pagination" slot="pagination"></div>
	      </swiper>
	    </div>
  </template>

<script>
import { swiper, swiperSlide } from "vue-awesome-swiper";
import "swiper/dist/css/swiper.css";

export default {
  name: "Login",
  components: {
    swiper,
    swiperSlide
  },
  data() {
		    return {
				swiperOption: {
				        effect: 'coverflow',
				        grabCursor: true,
				        centeredSlides: true,
				        slidesPerView: 'auto',
				        autoplay: {
				          delay: 3000,
				          stopOnLastSlide: false,
				          disableOnInteraction: false
				        },
				        coverflowEffect: {
				          rotate: 50,
				          stretch: 0,
				          depth: 100,
				          modifier: 1,
				          slideShadows : true
				        },
				        pagination: {
				          el: '.swiper-pagination'
				        }
			      },
			      List:[
			        {
			            url:require('../assets/images/login-background.jpg'),
			        },
			        {
			          url:require('../assets/images/profile.jpg'),
			        },
			        {
			          url:require('../assets/images/profile.jpg'),
			        },
			      ],
		    };
	    },
	    computed: {
		    swiper() {
		      return this.$refs.mySwiper.swiper;
		    }
		  },
		  
    }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .example-3d {
    width: 100%;
    height: 400px;
    padding-top: 50px;
    padding-bottom: 50px;
  }

  .swiper {
    height: 100%;
    width: 100%;
  /*}*/
    .swiper-slide {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 60%;
      height: 300px;
      overflow:hidden;
      text-align: center;
      font-weight: bold;
      background-color: #2C8DFB;
      background-position: center;
      background-size: cover;
      color: white;
    }

  /*.swiper-pagination {
  /deep/ .swiper-pagination-bullet.swiper-pagination-bullet-active {
           background-color: white;
         }
  }*/
  }
</style>