当前位置:网站首页 > 技术博客 > 正文

vue2使用swiper

在vue2项目中要用到轮播的功能,用swiper插件实现遇到了一些坑 总结下。

一、运行安装命令:

npm i swiper@5.x vue-awesome-swiper -s

如果直接运行npm i swiper 是默认安装的最新版本是适用vue3 不适用vue2的

安装完成后oackage.json多了

 vue-awesome-swiper本来是5.0.1 我手动改成了4.1.1,因为当我运行时,我的项目报错

 所以我将vue-awesome-swiper降低到4.1.1 并执行npm i ,完成后再运行项目 就不会再报上面个那个错了。

二、main.js引入

import VueAwesomeSwiper from 'vue-awesome-swiper' import 'swiper/css/swiper.css' Vue.use(VueAwesomeSwiper)

三、页面代码

// template <swiper :options="swiperOption" @swiper="onSwiper" @slideChange="onSlideChange" > <swiper-slide>123</swiper-slide> <swiper-slide>456</swiper-slide> <swiper-slide>789</swiper-slide> <div class="swiper-pagination" slot="pagination"></div> <div class="swiper-button-prev" slot="button-prev"></div> <div class="swiper-button-next" slot="button-next"></div> </swiper> // js <script> export default { data () { return { swiperOption: { slidesPerView: 1, // 设置分页器 pagination: { el: '.swiper-pagination', // 设置点击可切换 clickable: true }, // 设置前进后退按钮 navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev' }, // 设置自动轮播 autoplay: { delay: 5000 // 5秒切换一次 }, // 设置轮播可循环 loop: true } } }, methods: { onSwiper () { }, onSlideChange () { } } } </script>

---------------------------------------------------------------------------------------------------------------------------------

记录自动播放不卡顿

swiperOption: { initialSlide: 5, slidesPerView: 1, // 设置自动轮播 autoplay: { stopOnLastSlide: false, disableOnInteraction: false, delay: 0 }, loopFillGroupWithBlank: true, normalizeSlideIndex: true, autoplayDisableOnInteraction: false, speed: 6000, // 匀速播放频率 freeMode: true, // 设置轮播可循环 loop: true }
/deep/.swiper-wrapper { -webkit-transition-timing-function: linear; /*之前是ease-out*/ -moz-transition-timing-function: linear; -ms-transition-timing-function: linear; -o-transition-timing-function: linear; transition-timing-function: linear; margin: 0 auto; }

  • 上一篇: vue3使用vue2组件
  • 下一篇: js都是怎么服务的
  • 版权声明


    相关文章:

  • vue3使用vue2组件2024-10-23 21:01:03
  • excel xll开发工具2024-10-23 21:01:03
  • 登录注册vue2024-10-23 21:01:03
  • java创建xlsx文件2024-10-23 21:01:03
  • java jls2024-10-23 21:01:03
  • js都是怎么服务的2024-10-23 21:01:03
  • 无法更新项目的依赖项2024-10-23 21:01:03
  • jconsole怎么使用2024-10-23 21:01:03
  • js switch判断成绩2024-10-23 21:01:03
  • 如何用vue cli创建一个项目2024-10-23 21:01:03