老师,Swiper想在vue中应用,该怎么写

老师,Swiper想在vue中应用,该怎么写

vue2.0语法的话,应用Swiper写轮播图,该是什么样的步骤?

要单独引用一个swiper组件吗?

正在回答

登陆购买课程后可参与讨论,去登陆

1回答

同学你好,需要单独安装swiper插件。

打开swiper官网,鼠标移入导航栏中的“中文教程”,可以在下拉列表中找到在vue中使用Swiper的教程,如下:

http://img1.sycdn.imooc.com//climg/612b3b8909163df607390335.jpg

点击进入后,会有详细的步骤与示例介绍,如下:

1、先安装swiper插件,执行如下命令

npm install swiper --save-dev

2、引入相关的组件和和css文件,并添加对应的方法

http://img1.sycdn.imooc.com//climg/612b3d530950dd2507660552.jpg

3、template添加swiper结构,示例:

http://img1.sycdn.imooc.com//climg/612b3d8209b3363b04880279.jpg

其中的一些写法和属性都是固定的,同学可以多结合几个官网中提供的示例操作了解下

祝学习愉快~

  • KaFe_Ming 提问者 #1

    http://img1.sycdn.imooc.com//climg/612b50d00924a57809430885.jpg

    全局安装过了,提示这个是什么原因

    2021-08-29 17:18:30
  • 好帮手慕慕子 回复 提问者 KaFe_Ming #2

    同学你好,截图中提示信息的意思是Swiper和SwiperSlide组件注册了,但是没有在模板中使用。建议参考下图调整

    http://img1.sycdn.imooc.com//climg/612b56c909267de407970843.jpg

    祝学习愉快~

    2021-08-29 17:43:54
  • KaFe_Ming 提问者 回复 好帮手慕慕子 #3

    这个报错解决了,然后运行不起来。说我需要npm依赖 问题是我已经安装过swiper依赖了,他还是会提醒安装报错

    2021-08-29 18:35:03
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师