vue3+swiper11 横向的循环切换图片

利用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>

效果