在nuxt项目中使用swiper，不能实现自动轮播

莫小米

在nuxt项目中使用swiper，不能实现自动轮播，这是什么原因呀？大神们求教！！！！！！

zzz213321

是你的版本太高了吗，我之前项目用的swiper6很多东西用不了，后面降到swiper4就ok了

山有扶苏-z

1. <template>
   
2. <div class="mySw full" >
   
3.   <div v-swiper:mySwiper="mobleSwiperOption">
   
4.     <div class="swiper-wrapper">
   
5.       <div class="swiper-slide" v-for="(item,index) of getdata.data" :key="index"><swiper :getdata="item" type="small"/></div>
   
6.     </div>
   
7.         <div class="swiper-button-next" >
   
8.           <img src="https://file-skg.skg.com/skg.com/20200914/1f25d1ff02c94280af18900167390d70.png" alt="">
   
9.         </div>
   
10.         <div class="swiper-button-prev" >
    
11.           <img src="https://file-skg.skg.com/skg.com/20200914/c97f34b3a55742e885868a51cf32ff31.png" alt="">
    
12.         </div>
    
13.   </div>
    
14. </div>
    
15.   
    
16. </template>
    
17. <script>
    
18. import mainsmalldata from "~/static/data/mainsmalldata"
    
19. import swiper from '../smallswiperView/smallswiperView.vue'
    
20. export default {
    
21.   name: "smallSwiper",
    
22.   components: {
    
23.     swiper
    
24.   },
    
25.   data() {
    
26.     return {
    
27.       mobleSwiperOption: {
    
28.         loop: true, // 是否循环轮播
    
29.         autoplay: {
    
30.           delay: 2500,
    
31.           disableOnInteraction: false
    
32.         },
    
33.         navigation: {
    
34.           nextEl: ".swiper-button-next",
    
35.           prevEl: ".swiper-button-prev",
    
36.         }
    
37.       },
    
38.       offsetWidth: 0,
    
39.       isPC:　false,
    
40.     }
    
41.   },
    
42.   props:{
    
43.     getdata:{
    
44.       type:Object,
    
45.       default:()=>mainsmalldata
    
46.     }
    
47.   },
    
48.   methods:{
    
49.   },
    
50. };
    
51. </script>

复制代码

山有扶苏-z

这样是可以的

Keith

山有扶苏-z 发表于 2020-10-28 20:10

请问一下你用是什么版本的，我用6的，自动轮播、分页器都不能用，只能用loop，我试过你的方法在6也不行