移动端swiper轮播图

完整轮播图：

  
  
  

  
  

  
  


  
  

    

      
Slide 1
      
Slide 2
      
Slide 3
      
Slide 4
      
Slide 5
      
Slide 6
      
Slide 7
      
Slide 8
      
Slide 9
      
Slide 10
    
    
    

    
    

    

  

  
  

  
  

spaceBetween：轮播图每张图之间的空格，设置为0就没有间距
autoplay:自动轮播
-- delay 轮播时间
-- disableOnInteraction false用户手动滑动图片后还能继续自动轮播 true用户手动滑动图片后不再自动轮播
pagination 分页器可以设置type
-- type bullets’ 圆点（默认）‘fraction’ 分式 ‘progressbar’ 进度条‘custom’ 自定义

• 如果需要一个页面有两个swipe轮播图要设置什么呢？

给swiper-container设置id为swipe1和swipe2,还有给swiper-pagination也设置两个不同的id,比如swiper-p1和swiper-p2.

然后在js里面修改相应位置就可以了

var swiper2 = new Swiper('#swiper2', {
      spaceBetween: 0,
      centeredSlides: true,
      autoplay: {
        delay: 2500,
        disableOnInteraction: false,
      },
      pagination: {
        el: '#swiper-p2',
        clickable: true,
      }
    });

官网：https://www.swiper.com.cn/api/start/new.html
swiper的官方例子可以在公众号回复10获取