Vue3中使用Swiper6

最新推荐文章于 2024-09-12 18:19:58 发布

MasonYyp

最新推荐文章于 2024-09-12 18:19:58 发布

阅读量1.6k

点赞数 5

分类专栏：前端文章标签： vue.js html5 javascript

本文链接：https://blog.csdn.net/make_progress/article/details/120115417

版权

前端专栏收录该内容

28 篇文章 1 订阅

订阅专栏

1 开发版本

参考网站（比较慢）：https://swiperjs.com/

重点参考导航中的“Vue“和”Demos"

开发版本很重要，如果版本不对，会很痛苦，并且解决不了问题。
vue: 3.0.0；（swiper6和7支持vue3）
swiper: 6.8.4,（注意：不再全面支持IE）

安装vue最新稳定版
npm install vue@next

安装swiper
npm install swiper@6 --save

注意：很多博客里使用的是Vue2，需要使用下面的包
npm install vue-awesome-swiper --save

2 效果图

3 Vue实现的源代码


<template>

<div>
  <swiper 
    :slidesPerView="4"
    :spaceBetween="30"
    :pagination='{ "clickable": true }'
    :navigation="true"
    :centeredSlides="true"

    :loop="true"

    :autoplay='{
      "delay": 2500,
      "disableOnInteraction": false
    }'

    :effect="'coverflow'"
    :grabCursor="true"
    :coverflowEffect='{
      "rotate": 50,
      "stretch": 0,
      "depth": 100,
      "modifier": 1,
      "slideShadows": true
    }'

    class="swiper">
    <swiper-slide>
      <div class="swiper_item">
        <img src="@/assets/logo.png" />
      </div>
    </swiper-slide>

    <swiper-slide>
      <div class="swiper_item">
        <img src="@/assets/logo.png" />
      </div>
    </swiper-slide>
    <swiper-slide>
      <div class="swiper_item">
        <img src="@/assets/logo.png" />
      </div>
    </swiper-slide>
    <swiper-slide>
      <div class="swiper_item">
        <img src="@/assets/logo.png" />
      </div>
    </swiper-slide>
    <swiper-slide>
      <div class="swiper_item">
        <img src="@/assets/logo.png" />
      </div>
    </swiper-slide>
    <swiper-slide>
      <div class="swiper_item">
        <img src="@/assets/logo.png" />
      </div>
    </swiper-slide>
    <swiper-slide>
      <div class="swiper_item">
        <img src="@/assets/logo.png" />
      </div>
    </swiper-slide>
  </swiper>
</div>
</template>
<script>

// 导入swiper中vue组件
import { Swiper, SwiperSlide } from 'swiper/vue';

// 导入swiper模块
import SwiperCore, {
  // 设置底部小圆点
  Pagination,
  // 设置两边的箭头
  Navigation,
  // 动画效果
  EffectCoverflow,
  // 自动播放
  Autoplay
} from 'swiper';

SwiperCore.use([Pagination, Navigation, EffectCoverflow, Autoplay]);

// 导入swiper的样式，注意此处导入的样式
import "swiper/swiper-bundle.css"

export default {
  components: {
    Swiper,
    SwiperSlide,
  },
  data() {
    return {
    };
  },
  methods: {
    
  }
}
</script>

<style scoped>
.swiper{
  background-color: #CCCCCC;
}
.swiper_item{
  background-color: #FFFFFF;
}
</style>