1、安装swiper

npm install swiper

2、在页面中使用

<template>
  <div>
    <!-- <div class="inner" :style="{ width: width }">
      <ul
        class="swiper-list"
        :class="animate ? 'marquee_top' : ''"
        :style="{ marginLeft: animate ? -300 : 0 }"
      >
        <li v-for="(item, index) in imgList" :key="index" class="swiper-item">
          <p>{{ item.name }}</p>
        </li>
      </ul>
    </div> -->

    <swiper
      :modules="modules"
      :loop="true"
      :slides-per-view="3"
      :space-between="50"
      :autoplay="{ delay: 0, disableOnInteraction: false }"
      :navigation="navigation"
      :pagination="{ clickable: true }"
      :scrollbar="{ draggable: false }"
      class="swiperBox"
      :speed="10000"
      :observer="true"
      :observeParents="true"
      @mouseenter="handMouseenter"
      ref="mySwiperRef"
    >
      <swiper-slide
        v-for="(item, index) in imgList"
        :key="index"
        class="swiper-item"
      >
        <div @click="clickItem(item)">
          {{ item.name }}
        </div>
      </swiper-slide>
    </swiper>
  </div>
</template>
<script setup>
import {
  ref,
  reactive,
  onActivated,
  onMounted,
  getCurrentInstance,
  shallowRef,
} from 'vue';
import { Swiper, SwiperSlide } from 'swiper/vue'; // swiper所需组件
// 这是分页器和对应方法，swiper好像在6的时候就已经分离了分页器和一些其他工具
import { Autoplay, Navigation, Pagination, A11y } from 'swiper';
// 引入swiper样式，对应css 如果使用less或者css只需要把scss改为对应的即可
import 'swiper/less';
import 'swiper/less/navigation';
import 'swiper/less/pagination';
const mySwiperRef = ref(null);

const modules = [Autoplay, Navigation, Pagination, A11y];
const imgList = ref([
  {
    name: '1111',
  },
  {
    name: '2222',
  },
  {
    name: '3333',
  },
  {
    name: '44444',
  },
  {
    name: '5555',
  },
  {
    name: '666',
  },
  {
    name: '7777',
  },
  {
    name: '8888',
  },
]);

const width = ref('-300');
const animate = ref(false);
const setInTime = ref(null);

const { proxy } = getCurrentInstance();
// console.log('url', proxy.$imgApi);

const showMarquee = () => {
  animate.value = true;
  setTimeout(() => {
    imgList.value.push(imgList.value[0]);
    imgList.value.shift();
    animate.value = false;
  }, 500);
};

const handMouseenter = () => {
  mySwiperRef.value.autoplay.stop();
};

// const stop = () => {
//   clearInterval(setInTime.value);
// };
// const start = () => {
//   setInTime.value = setInterval(showMarquee, 3000);
// };
onMounted(() => {
  setInTime.value = setInterval(showMarquee, 3000);
  // animate.value = true;
  // setTimeout(() => {
  //   imgList.value.push(imgList.value[0]);
  //   imgList.value.shift();
  //   animate.value = false;
  // }, 500);
  // mySwiperRef.value =
  // this.swiper.setTransition(1000);// 设定过渡的时间
  // this.swiper.setTranslate( 0 - 500*(index-1) + (this.swiper.width/2 - 500/2) );//设定位移，可以为正数
});

const clickItem = (item) => {
  console.log(item, '点击');
};
</script>
<style lang="less" scoped>
.swiper-container {
  width: 100%;
  height: 50%;
  transition-timing-function: linear;
}
.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;

  /* Center slide text vertically */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}
:deep(.swiper-wrapper) {
  transition-timing-function: linear !important;
}

// .img {
//   width: 400px;
//   height: 400px;

//   img {
//     width: 100%;
//     height: 100%;
//   }
// }
.mySwiper {
  width: 100%;
  margin-top: 70px;
  // background: pink;
  height: 200px;
}
.swiper-item {
  width: 30%;
  border: solid 1px red;
  height: 200px;
  margin: 20px;
  transform: all 0.5s rotateX(300);
}
// .swiper-list {
//   width: 100%;
//   height: 500px;
//   display: flex;
//   justify-content: space-around;
//   align-items: center;
//   flex-wrap: nowrap;
// }
// // .swiper-item {
// //   width: 30%;
// //   border: solid 1px pink;
// //   height: 200px;
// //   margin: 20px;
// // }

// ul,
// li {
//   padding: 0;
//   margin: 0;
//   list-style: none;
// }
// .inner {
//   width: 100%;
//   overflow: hidden;
//   li {
//     width: 90%;
//     font-size: 12px;
//     font-weight: 100;
//     overflow: hidden;
//     text-overflow: ellipsis;
//     white-space: nowrap;
//   }
// }
.marquee_top {
  // transition: all 0.1s;
  // margin-left: -100; /* 容器高度 */
  // animation: ball-1-animation 4s infinite normal linear;
}
// @keyframes ball-1-animation {
//   // from {
//   //   transform: translate(0px, 0px);
//   // }
//   // to {
//   //   transform: translate(200px, 200px);
//   // }

//   /* from {
// 			top: 0;
// 			left: 0;
// 			transform: rotateY(0deg);
// 		}
// 		to {
// 			top: 450px;
// 			left: 450px;
// 			transform: rotateY(360deg);
// 		} */

//   0% {
//     top: 0;
//     left: 0px;
//     transform: rotateX(0%);
//     // transition: all 0.4s;
//   }
//   // 20% {
//   //   top: 0;
//   //   left: 25%;
//   //   transform: translateX(25%);
//   //   // transition: all 0.4s;
//   // }
//   // 45% {
//   //   top: 0;
//   //   left: 45%;
//   //   transform: translateX(45%);
//   //   // transition: all 0.4s;
//   // }
//   // 75% {
//   //   top: 0;
//   //   left: 65%;
//   //   transform: translateX(65%);

//   //   // transition: all 0.4s;
//   // }
//   100% {
//     top: 0;
//     left: 100px;
//     transform: rotateX(100%);
//     // transition: all 0.4s;
//   }
// }
</style>