标签：Vue 轮播 awesome Swiper https import swiper

Vue集成Swiper轮播

• 前言
• 下载相关依赖
• 基本代码
• 相关资料网站

前言

这里记录一下Vue2.X引入Swiper案例（注意这里是Vue2.x，Vue3直接在Swiper官网上根据教程安装使用）

下载相关依赖

依次下载Vue-awesome-swiper、Swiper

npm install --save vue-awesome-swiper

npm install --save swiper@5.x

版本信息

基本代码

HTML

    <swiper ref="mySwiper" :options="swiperOptions">
      <swiper-slide>
        <div style="border: 1px solid red;width:300px;height:500px">1</div>
      </swiper-slide>
      <swiper-slide>
      <div style="border: 1px solid red;width:300px;height:500px">2</div>
      </swiper-slide>
      <swiper-slide>
      <div style="border: 1px solid red;width:300px;height:500px">3</div>
      </swiper-slide>
      <swiper-slide>
      <div style="border: 1px solid red;width:300px;height:500px">4</div>
      </swiper-slide>
      <swiper-slide>
      <div style="border: 1px solid red;width:300px;height:500px">5</div>
      </swiper-slide>
      <swiper-slide>
      <div style="border: 1px solid red;width:300px;height:500px">6</div>
      </swiper-slide>
      <swiper-slide>
      <div style="border: 1px solid red;width:300px;height:500px">7</div>
      </swiper-slide>
      <swiper-slide>
      <div style="border: 1px solid red;width:300px;height:500px">8</div>
      </swiper-slide>
      <swiper-slide>
      <div style="border: 1px solid red;width:300px;height:500px">9</div>
      </swiper-slide>
      <swiper-slide>
      <div style="border: 1px solid red;width:300px;height:500px">10</div>
      </swiper-slide>
      <swiper-slide>
      <div style="border: 1px solid red;width:300px;height:500px">11</div>
      </swiper-slide>
      <!-- 分页 -->
      <div class="swiper-pagination" slot="pagination"></div>
      <!-- 切换按钮 -->
      <div class="swiper-button-next" slot="button-next"></div>
      <div class="swiper-button-prev" slot="button-prev"></div>
    </swiper>

JS

import { Swiper, SwiperSlide, directive } from 'vue-awesome-swiper'
// import style (>= Swiper 6.x)
// import 'swiper/swiper-bundle.css'
// import style (<= Swiper 5.x)
import 'swiper/css/swiper.css'

export default {
  name: 'swiper-test',
  components: {
    Swiper,
    SwiperSlide
  },
  data () {
    return {
      // swiper配置项
      swiperOptions: {
        // 显示个数
        slidesPerView: 6,
        // 切换个数
        slidesPerGroup: 1,
        // 分页
        pagination: {
          el: '.swiper-pagination'
        },
        // 切换按钮
        navigation: {
          // 下一个
          nextEl: '.swiper-button-next',
          // 上一个
          prevEl: '.swiper-button-prev'
        }
      }
    }
  }
}

效果

具体其他详细配置参考资料网站

相关资料网站

Swiper：https://www.swiper.com.cn/
Swiper中文配置：https://www.swiper.com.cn/api/index.html
Vue-awesome-swiper：https://github.com/surmon-china/vue-awesome-swiper
Vue3引入Swiper: https://swiperjs.com/vue

标签：Vue,轮播,awesome,Swiper,https,import,swiper
来源： https://blog.csdn.net/weixin_43390116/article/details/120890312

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。