我的項(xiàng)目是vue3的，用的swiper8文章來源地址http://www.zghlxwxcb.cn/news/detail-623799.html

	<template>
       <div class="tab-all">
          <div class="tab-four">
            <swiper
              :loop="true"
              :autoplay="{
                disableOnInteraction:false,
                delay:3000
              }"
              :slides-per-view="3"
              :centered-slides="true"
              :modules="modules"
            >
              <swiper-slide v-for="(item,index) in fourList" :key="index">
                <img :src="item.imgurl">
                <div class="bot-text">
                  <span>{{ item.act }}</span>
                </div>
              </swiper-slide>
            </swiper>
          </div>
       </div>
    </template>
    <script>
    import { Swiper, SwiperSlide } from 'swiper/vue/swiper-vue';
	import { Autoplay, Scrollbar } from 'swiper';
	import 'swiper/swiper-bundle.min.css';
	export default defineComponent({
	  components: {
	    Swiper,
	    SwiperSlide,
	  },
	  setup(){ 
	    const fourList = [
		  {imgurl: require('@/assets/mImage/joinus/OIP.jpg'), act: '風(fēng)景' }, 
		  {imgurl: require('@/assets/mImage/joinus/OIP1.jpg'), act: '風(fēng)景' }, 
		  {imgurl: require('@/assets/mImage/joinus/OIP2.jpg'), act: '風(fēng)景'}, 
		  {imgurl: require('@/assets/mImage/joinus/OIP3.jpg'), act: '風(fēng)景'}, 
		  {imgurl: require('@/assets/mImage/joinus/OIP4.jpg'), act: '小貓'}, 
		],
	    return {
	      modules: [ Autoplay, Scrollbar], fourList
	    }
	  }
	})
	<style lang='scss' scoped>
		.tab-all {
	        width: 100%;
	        color: rgb(255, 255, 255);
	        .swiper {
	          padding-top: 1.5rem;
	          width: 100%;
	          height: 9.6154rem;
	        }
	        img{
	          width: 5.268rem;
	          height: 7rem;
	          display: block;
	          border-radius: .1538rem;
	          transition: all 0.5s;
	          -webkit-transition: all 0.5s;
	        }
	        /deep/ .swiper-slide{
	          position: relative;
	          border-radius: .2308rem;
	          overflow: hidden;
	          height: 7rem;
	          &::after{
	            content: '';
	            left: 0;
	            top: 0;
	            width: 5.268rem;
	            height: 7rem;
	            background: rgba($color: #000000, $alpha: 0.4);
	            z-index: 11;
	            position: absolute;
	          }
	        }
	        /deep/ .swiper-slide-active{
	          position: relative;
	          overflow: visible;
	          z-index: 11;
	          padding: .0769rem;
	          height: 8rem;
	          &>img{
	            border-radius: .3rem;
	            transform: scale(1.3);
	            -webkit-transform: scale(1.3);
	            transform-origin: center !important;
	            -webkit-transform-origin:center !important;
	            position: absolute;
	            left: 0;
	          }
	          z-index: 111;
	          &::after{
	            display: none;
	          }
	        }
	        .tab-four {
	          width: 100%;
	          .bot-text {
	            height: 1.4rem;
	            width: 5.268rem;
	            transform: scale(1.3);
	            -webkit-transform: scale(1.3);
	            transform-origin: center !important;
	            -webkit-transform-origin:center !important;
	            position: absolute;
	            left: 0;
	            bottom: 0;
	            background: linear-gradient(180deg, rgba(39,56,56,0.4) 0%, rgba(4, 19, 32, 0.4) 100%);
	            backdrop-filter: blur(6px);
	            display: flex;
	            justify-content: center;
	            align-items: center;
	            border-radius: 0 0 .2rem .2rem;
	            &>span {
	              margin-left: .3077rem;
	              display: inline-block;
	              font-size: .45rem;
	              line-height: .6rem;
	              font-family: PingFangSC-Semibold, PingFang SC;
	            }
	          }
	          .swiper-slide-active{
	            &>img{
	              border: none;
	              border-radius: 0;
	              padding: 0;
	            }
	          }
	        }
      }
	</style>

到了這里，關(guān)于vue卡片輪播圖的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！