H5页面(五)效果轮播图之-------swiper.js插件

本文介绍了如何使用swiper.js插件创建H5页面的轮播图效果。内容包括swiper.js的安装、引入,以及配置参数的详细说明,如滑动方向、初始化显示、切换速度等。同时提供了HTML和JavaScript代码示例,展示如何设置分页器、导航按钮和自动播放功能。
摘要由CSDN通过智能技术生成

添加小程序,兑换各种视频教程/数据资源。

swiper是一款轻量级移动设备滑块的js框架!

swiper 3.x主流偏向移动设备!

注意:npm install  --save swiper;需要以下方式引入:

第一步:import Swiper from "swiper"
第二步:import 'swiper/dist/css/swiper.css'  

 //因为npm打包的swiper在node_modules文件里,所有可以直接这样引用

1. 下载swiper插件: 官网http://www.swiper.com.cn/;

        必须下载swiper.js/swiper.min.js;

        选择下载swiper.css/swiper.min.css;

2.在html页面引入swiper.js/swiper.min.js和swiper.css/swiper.min.css;

3.案例:

<link rel="stylesheet" type="text/css" href="../css/swiper

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值