vue中使用swiper文档

最新推荐文章于 2024-10-10 17:01:55 发布

原创最新推荐文章于 2024-10-10 17:01:55 发布 · 806 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue #swiper #轮播

本文介绍了如何在Vue项目中使用Swiper 6.8.4版本，包括从官方网站获取资源，指定具体版本，并在public/index.html中引入Swiper的相关步骤。

先放官网地址：官方点这。目前最新版本是7.0.8坑多，所以采用6.8.4。
在public文件夹的index.html中引入

    <link rel="stylesheet" href="https://unpkg.com/swiper@6.8.4/swiper-bundle.min.css">  
    <script src="https://unpkg.com/swiper@6.8.4/swiper-bundle.min.js"></script>

然后在使用的页面


// 模板部分
      <div class="swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide" v-for="item in 7" :key="item">这里有东西哦{{item}}</div>
        </div>
        <!-- 如果需要导航按钮 -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
      </div>
      
// js部分-配置项
  mounted() {
    let swiper = new Swiper('.swiper-container', {
      // loop: true,      // 循环模式选项
      roundLengths: true,   // 将slide的宽和高取整，防止某些情况显示不完整
      slidesPerView: 'auto',    // 展示区显示的个数，Number||'auto'，auto的话，需要元素设定宽度，根据宽度自动显示个数
      slidesPerGroup: 1,    // 每次滑几个
      spaceBetween: 50,    // 每个间距
      slidesOffsetBefore: 50, // 全部内容的左偏移量-左箭头留白
      slidesOffsetAfter: 60,  // 全部内容的右偏移量-右箭头留白
      centerInsufficientSlides: true, // 如果数量少于显示的个数，则居中
      // freeMode:true,    // free模式开启
	 // ... 其它配置项，见官网api
      // 如果需要前进后退按钮
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
    })
  }