Swiper使用方法
来源:互联网 发布:惠斯通电桥测电阻数据 编辑:程序博客网 时间:2024/05/16 09:04
// 1、首页需要引入swiper.min.js和swiper.min.css文件<link rel="stylesheet" href="path/to/swiper.min.css"><script src="path/to/swiper.min.js"></script>// 2、HTML内容。<div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide">Slide 1</div> <div class="swiper-slide">Slide 2</div> <div class="swiper-slide">Slide 3</div> </div> <!-- 如果需要分页器 --> <div class="swiper-pagination"></div> <!-- 如果需要导航按钮 --> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> <!-- 如果需要滚动条 --> <div class="swiper-scrollbar"></div></div>导航等组件可以放在container之外// 3、你可能想要给Swiper定义一个大小,当然不要也行。.swiper-container { width: 600px; height: 300px;} // 4、初始化Swiper:最好是挨着</body>标签<script> var mySwiper = new Swiper ('.swiper-container', { direction: 'vertical', loop: true, // 如果需要分页器 pagination: '.swiper-pagination', // 如果需要前进后退按钮 nextButton: '.swiper-button-next', prevButton: '.swiper-button-prev', // 如果需要滚动条 scrollbar: '.swiper-scrollbar', }) </script></body>// 页面加载<script type="text/javascript">window.onload = function() { ...}</script><script type="text/javascript">$(document).ready(function () { ...})</script>
0 0
- Swiper使用方法
- Swiper使用方法
- Swiper.js使用方法
- Swiper基本使用方法
- Swiper 3D flow使用方法
- Swiper教程 —— 使用方法
- H5场景动画 swiper Animate使用方法
- swiper
- swiper
- swiper
- swiper
- Swiper
- swiper
- Swiper
- Swiper
- Swiper
- 轮播组件Swiper实现移动端网站的内容触摸滑动使用方法
- swiper.js
- Cell内或者自定义View内push
- 关于openlayers3多边形区域绘制以及地图/区域鼠标右键菜单功能
- tensorflow学习笔记(二十四):Bucketing
- Java数据类型中String、Integer、int相互间的转换
- HTML表单,文本框,密码框,单选框,复选框,提交
- Swiper使用方法
- iOS 集成 第三方 新浪微博
- Volley源码解析
- 计算神经学学习笔记-neural decoding and signal detection theory
- js原生拖拽事件(HTML5的拖放 API)
- C# form应用安装包封装与部署
- android 基础 ---> ViewPager
- swift UITextField
- javascript初学者误区和问题