vue3学习（引入轮播图插件）

最新推荐文章于 2025-05-06 19:15:08 发布

小白爱编程呀

最新推荐文章于 2025-05-06 19:15:08 发布

阅读量1.8k

点赞数 3

文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/weixin_48221105/article/details/127853270

版权

Vue引入第三方

以轮播图为例

Swiper开源、免费、强大的触摸滑动插件

Swiper是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端

Swiper能实现触屏焦点图、触屏tab切换、触屏轮播图切换等常用效果

插件官方文档网址：Swiper Vue幻灯片切换组件 | SwiperJS中文网

安装指定版本的命令为：npm install –save swiper@8.1.6

<template>
  <div>
    <swiper :modules="modules" :navigation="true" :loop="true" :pagination="{ clickable: true }">
      <!-- modules为导入的模块，绑定导入的模块导航模块和分页模块，loop实现轮播图循环模式 -->
      <swiper-slide>
        <img src="../assets/logo.png">
      </swiper-slide>
      <swiper-slide>
        <img src="../assets/logo.png">
      </swiper-slide>
      <swiper-slide>
        <img src="../assets/logo.png">
      </swiper-slide>

    </swiper>

  </div>
</template>

<script>
import { Swiper, SwiperSlide } from 'swiper/vue';
import { Pagination } from 'swiper';
import { Navigation } from 'swiper';
import 'swiper/css/pagination';
import 'swiper/css/navigation';
import 'swiper/css';
export default {
  name: 'HelloWorld',
  components: {
    Swiper,
    SwiperSlide,
  },
  data() {
    return {
      modules: [Navigation, Pagination]
    }
  }
}
</script>