swiper鼠标悬停(自由切换),拒绝大佬,珍爱生命!vue@2.x
npm i swiper@6.8.4 vue-awesome-swiper@4.1.1 --save-dev
实测有效!
JavaScript:
<script> import { Swiper, SwiperSlide } from 'vue-awesome-swiper' import 'swiper/swiper.min.css' import 'swiper/swiper-bundle.css' import SwiperCore, { Autoplay, EffectFade } from 'swiper' SwiperCore.use([Autoplay, EffectFade]) export default { props: ['itemData', 'itemHeight'], components: { Swiper, SwiperSlide }, data() { return { swiperOptions: { direction: 'vertical', //设置竖向轮播 loop: true, autoplay: { pauseOnMouseEnter:true, // 最最重要 disableOnInteraction:false, // 最最重要 }, autoplayDisableOnInteraction: true, observer: true, speed: 3000 } } }, created() { }, methods: { onSlideChange(slide) { console.log(`监听slide`, slide) }, onSwiper(swiper) { console.log(`swiper:`, swiper); }, } } </script>
官方地址:https://www.swiper.com.cn/api/autoplay/496.html
我们不是一群默默无闻的码农,而是推进世界进步的开荒者
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗?
· 【译】Visual Studio 中新的强大生产力特性
· 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句:使用策略模式优化代码结构