最新版swiper-swiper9实现无缝匀速轮播

glng

!!!纯html实现的代码见附件
vue项目安装依赖

1. yarn add swiper

复制代码

使用swiper进行文字轮播-demo

1. <template>
   
2.   <div style="width: 4em;margin-left: 50em;margin-top: 20em;">
   
3.     <swiper-container
   
4.         :autoplay="true"
   
5.         autoplay-delay="0"
   
6.         :speed="500"
   
7.         :injectStyles="['.swiper-wrapper{transition-timing-function: linear !important;}']"
   
8.         loop="true"
   
9.         slides-per-view="4">
   
10.       <swiper-slide v-for="(item,index) in strarr">
    
11.         <span style="color: #e13025">{{ item }}</span>
    
12.       </swiper-slide>
    
13.     </swiper-container>
    
14.   </div>
    
15. </template>
    
16. <script>
    
17. import {register} from "swiper/element/bundle";
    
18. register();
    
19. export default {
    
20.   name: 'demo',
    
21.   data() {
    
22.     return {
    
23.       strarr: '在12生a态b文明体'.split(''),
    
24.     };
    
25.   },
    
26. }
    
27. </script>
    

复制代码