Swiper中文论坛

标题: 最新版swiper-swiper9实现无缝匀速轮播 [打印本页]
作者: glng    时间: 2023-3-31 10:13
标题: 最新版swiper-swiper9实现无缝匀速轮播
本帖最后由 glng 于 2023-3-31 11:09 编辑

!!!纯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>
复制代码



纯html实现.zip

108.57 KB, 下载次数: 7



欢迎光临 Swiper中文论坛 (http://bbs.swiper.com.cn/) Powered by Discuz! X3.2