最新版swiper-swiper9实现无缝匀速轮播
本帖最后由 glng 于 2023-3-31 11:09 编辑!!!纯html实现的代码见附件
vue项目安装依赖
yarn add swiper使用swiper进行文字轮播-demo<template>
<div style="width: 4em;margin-left: 50em;margin-top: 20em;">
<swiper-container
:autoplay="true"
autoplay-delay="0"
:speed="500"
:injectStyles="['.swiper-wrapper{transition-timing-function: linear !important;}']"
loop="true"
slides-per-view="4">
<swiper-slide v-for="(item,index) in strarr">
<span style="color: #e13025">{{ item }}</span>
</swiper-slide>
</swiper-container>
</div>
</template>
<script>
import {register} from "swiper/element/bundle";
register();
export default {
name: 'demo',
data() {
return {
strarr: '在12生a态b文明体'.split(''),
};
},
}
</script>
页:
[1]