利用Swiper制作横向循环图片

<template><div class="summaryE"><div class="E_two"><swiper :slidesPerView="5" loop:autoplay="{ delay: 5000, disableOnInteraction: true }":navigation="true" :pagination="{ clickable: true  }":scrollbar="{ draggable: true }" :space-between="0" :modules="modules" effect="coverflow":coverflowEffect="{rotate: 0, //slide做3d旋转时Y轴的旋转角度stretch: 1, //每个slide之间的拉伸值，越大slide靠得越紧。5.3.6 后可使用%百分比depth: 80, //slide的位置深度。值越大z轴距离越远，看起来越小。modifier: 7, //depth和rotate和stretch的倍率，相当于depth*modifier、rotate*modifier、stretch*modifier，值越大这三个参数的效果越明显slideShadows: false //是否开启slide阴影}"@mouseenter="enter" @mouseleave="leave" @swiper="onSwiper" @slideChange="onSlideChange"><swiper-slide v-for="(item, index) in arrList" :key="index" class="swiperItem"><!-- <img :src="item.img" alt="" /> --><img :src="item.img" class="hzhb"/></swiper-slide></swiper></div></div>
</template><script setup>import { useRouter } from 'vue-router'
import { ref,defineProps, toRaw ,onMounted} from "vue";const router = useRouter()onMounted(() => {});
import { Swiper, SwiperSlide } from "swiper/vue";
import "swiper/css";
import "swiper/css/navigation";
import "swiper/css/pagination";
import 'swiper/css/effect-coverflow';  //effect为fade时必须引入，否则可能出现只切换一次就不自动切换的情况import { Autoplay, Navigation, Pagination, Scrollbar, A11y ,EffectCoverflow} from "swiper/modules";let modules = [Autoplay, Navigation, Pagination, Scrollbar, A11y,EffectCoverflow];//定义swiperNew,目的获取非响应式swiper
let swiperNew = null;//鼠标移入
const enter = () => {swiperNew.autoplay.stop();
};
//鼠标移出
const leave = () => {swiperNew.autoplay.start();
};
const onSwiper = (swiper) => {// console.log(swiper);swiperNew = toRaw(swiper); //拿到swiper对象再转换为非响应式
};
const rightClick=()=>{swiperNew.slidePrev()
}
const leftClick=()=>{swiperNew.slideNext()}
const onSlideChange = () => {// console.log("slide change");
};const arrList = ref([{img:require('@/assets/computer/rongyu/r1.png'),},{img:require('@/assets/computer/rongyu/r1.png'),},{img:require('@/assets/computer/rongyu/r1.png'),},{img:require('@/assets/computer/rongyu/r1.png'),},{img:require('@/assets/computer/rongyu/r1.png'),},{img:require('@/assets/computer/rongyu/r1.png'),},])
</script><style scoped>.E_two{width: 100%;
}
.hzhb{width: 100%;height: auto;
}
</style>

效果