在vue中使用swiper

在vue中使用swiper

mainjs中使用插件 import VueAwesomeSwiper from 'vue-awesome-swiper'; min.js去官网下 import '@/assets/swiper-bundle.min.css'; 加载插件 app.use(VueAwesomeSwiper)

代码贴下

<Swiper
        class="swiper-container mt-40px"
        :modules="modules"
        :loop="true"
        :autoplay="{
          delay: 5000,
        }"
        :speed="1000"
        :slidesPerView="2"
        :centeredSlides="true"
        effect="coverflow"
        :coverflowEffect="{
          rotate: 50,
          stretch: 0,
          depth: 10,
          modifier: 1,
          scale: 0.9,
          slideShadows: false,
        }"
        @swiper="onSwiper"
      >
        <SwiperSlide class="item">
          1
        </SwiperSlide>
        <SwiperSlide class="item">
          2
        </SwiperSlide>
        <SwiperSlide class="item">
          <!-- <img :src="item" class="w-781px h-559px" /> -->
          3
        </SwiperSlide>
   </Swiper>

    <div class="flex mt-20px">
        <i class="arrow mr-30px" @click="swiper.slidePrev()"></i>
        <i class="arrow rotate-180" @click="swiper.slideNext()"></i>
    </div>

</template>
<script setup>
import {ref} from 'vue'
  import { Swiper, SwiperSlide } from 'swiper/vue'
// 引入swiper样式（按需导入）
import 'swiper/css/pagination' // 轮播图底面的小圆点
import 'swiper/css/navigation' // 轮播图两边的左右箭头
// import 'swiper/css/scrollbar'  // 轮播图的滚动条， 轮播图里一般不怎么会使用到滚动条，如果有用到的话import导入就行
// 引入swiper核心和所需模块
import { Autoplay, Pagination, Navigation, Scrollbar, EffectCoverflow } from 'swiper'

const navigation = ref({
  nextEl: ".swiper-button-next",
  prevEl: ".swiper-button-prev",
});
// 在modules加入要使用的模块
// const modules = [Autoplay, Pagination, Navigation, Scrollbar]
const modules = [Autoplay, EffectCoverflow]

const prevEl = (item, index) => {
  // console.log('上一张' + index + item)
};
const nextEl = () => {
  // console.log('下一张')
};
// 更改当前活动swiper
const onSlideChange = (swiper) => {
// swiper是当前轮播的对象，里面可以获取到当前swiper的所有信息，当前索引是activeIndex
  console.log(swiper.activeIndex)
}
</script>

<style lang="scss" scoped>
  .item {
    width: 200px;
    height: 200px;
    background-color: #ccc;
  }
</style>

swiper中文文档 www.swiper.com.cn/api/effects…

================分割线=================

经过两天的折腾, 总结了下在vue3中配合vue-awesome-swiper插件使用swiper7 + 的方法

1. 登录swiper官网 找demo swiperjs.com/demos#null
2. 每个demo旁边有个CodeSandbox: 分别对应的是原生,react,vue等写法, 点进去

 import 'swiper/css/effect-coverflow';
 import './style.css';
 import 'swiper/css';

以上3句话会报错 直接用

 import {EffectCoverflow, Pagination} from 'swiper'

至于css 样式 我在main.js中加入了import '@/assets/swiper-bundle.min.css'; 不知道是不是这句话起作用了 将swiper导出的组件丢到const modules=[EffectCoverflow, Autoplay] 中, 然后template的swiper组件中 :modules="modules"

其余写法和demo一致

编程式翻页事件 参考cloud.tencent.com/developer/a…

1. 创建ref对象 const refswiper = ref(null)
2. Swiper组件中 关联事件 @swiper="getRef"
3. 将@swiper中的实例赋值给ref function getRef (swiperInstance) { refswiper.value = swiperInstance }
4. 自定义调用 refswiper.value.slideNext() // should work

这是最新的coverflow代码

<template>
  <swiper
  :effect="'coverflow'"
  :simulateTouch="false"
    :centeredSlides="true"
    :coverflowEffect="{
      rotate: 50,
      stretch: 0,
      depth: 100,
      modifier: 1,
      slideShadows: true,
    }"
    :slidesPerView="2"
    :pagination="true"
    :modules="modules"
    :autoplay="{
    delay: 5000,
    }"
    loop
    class="mySwiper"
    @swiper="getRef"
  >
    <swiper-slide >
      <div class="slider-box"> 1</div>
    </swiper-slide>
    <swiper-slide > 
      <div class="slider-box"> 2</div>
      
    </swiper-slide>
    <swiper-slide> 
      <div class="slider-box"> 3</div>
      
    </swiper-slide>
    <swiper-slide> 
      <div class="slider-box"> 4</div>
      
    </swiper-slide>
    <swiper-slide> 
      <div class="slider-box"> 5</div>
      
    </swiper-slide>
    <el-button @click="prev">
      ←
    </el-button>
    <el-button @click="next">
      →
    </el-button>
    prev
    
  </swiper>
</template>
<script setup>
  // Import Swiper Vue.js components
  import { Swiper, SwiperSlide } from 'swiper/vue';

  import {EffectCoverflow, Pagination, Autoplay} from 'swiper'
import { onMounted,ref } from 'vue';
  // Import Swiper styles
  // import 'swiper/css';

  // import './style.css';

  const modules= [EffectCoverflow, Autoplay]

  const refswiper = ref(null)
function getRef (swiperInstance) {
  console.log('swiperInstance', swiperInstance);
  refswiper.value = swiperInstance
}
  
const prev = () => {
    refswiper.value.slidePrev() // should work
  }
  const next = () => {
    refswiper.value.slideNext() // should work
  }
 
</script>
<style>
.slider-box {
  background-color: #000ccc;
  width: 400;
  height: 300px;
}
</style>