4.Vue使用swiper实现轮播图基础教程_vue 轮播组件 swiper

引入轮播图、常见的业务和项目都有大部分的第三方

第三方库：常见的功能及模块都有人写过了，你会引入实现功能

swiper在Vue中使用教程

swiper官方文档:Swiper中文网-轮播图幻灯片js插件,H5页面前端开发

缺点：可能会因为版本问题无法使用，需要安装指定的版本 (npm i swiper@8.1.6)

如何获取其他vue第三方库？

• github（star多）
• vue官网：vue总结的第三方库文档

注意：使用库前查看是否支持Vue3

 基础实现（swiper的轮播图）

<template>
  <div class="hello">
    <swiper class="mySwiper">
      <!-- 一项 -->
      <swiper-slide>
        <img src="../assets/logo.png" alt="">
      </swiper-slide>
      <swiper-slide>
        <img src="../assets/logo.png" alt="">
      </swiper-slide>
      <swiper-slide>
        <img src="../assets/logo.png" alt="">
      </swiper-slide>
    </swiper>
  </div>
</template>
 
<script>
//引入swiper
import { Swiper, SwiperSlide } from 'swiper/vue';
import 'swiper/css';
export default {
  name:"swiperTemplate",
  components:{
    Swiper,
    SwiperSlide,
  }
}
</script>

•  :pagination="{clickable:true}" 是否允许点击触发

<template>
  <div class="hello">
    <swiper class="mySwiper" :modules="modules" :pagination="{clickable:true}">
      <!-- 一项 -->
      <swiper-slide>
        <img src="../assets/logo.png" alt="">
      </swiper-slide>
      <swiper-slide>
        <img src="../assets/logo.png" alt="">
      </swiper-slide>
      <swiper-slide>
        <img src="../assets/logo.png" alt="">
      </swiper-slide>
    </swiper>
  </div>
</template>
 
<script>
//引入swiper
import { Swiper, SwiperSlide } from 'swiper/vue';
import 'swiper/css';
//添加指示器
import {Pagination} from 'swiper/modules';
import 'swiper/css/pagination';
export default {
  name:"swiperTemplate",
  data(){
    return{
      modules:[Pagination]
    }
  },
  components:{
    Swiper,
    SwiperSlide,
  }
}
</script>