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

glng-C

已于 2023-03-31 11:14:12 修改

阅读量1.5k

点赞数 1

文章标签： javascript 前端 vue.js

于 2023-03-31 10:18:34 首次发布

本文链接：https://blog.csdn.net/gaolong19931208/article/details/129873764

版权

效果

纯html实现见下载链接

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

https://download.csdn.net/download/gaolong19931208/87635401

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>