<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>swiper简介_导入_以及使用.</title>
<!-- swiper
是帮助完成PC端,移动端,滑动效果的库.
在使用过程当中,
可以选择依赖jquery的库, 也可以选择独立的js文件.
两者大小有所差别, 独立文件大约10k.
(3.0-)
4.0+版本取消了对jquery依赖库的选择.
=== 在导入过程中.
需要导入swiper的js文件和css式样文件. 放在自定式样之上.
先导入css文件, 再导入js文件
-->
<link rel="stylesheet" type="text/css" href="web-rem/css/swiper.min.css">
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="js/swiper.jquery.min.js"></script>
<script type="text/javascript">
// 使用swiper库的时候,可以对元素直接增加类.swiper-container.wrapper.slide.pagination.(button)prev,next
$(function(){
// var swiper = new Swiper('.swiper-container');
// 变量接收优化性能.
new Swiper('.swiper-container');
// 新建Swiper对象,赋值于式样名.. (容器)
// 赋值过后该式样下, 与既定规则相同的类名, 即可拥有式样.
// 必须元素===> 容器(container)>封套,包装(wrapper)>滑动对象(slide)
})
</script>
<style>
.swiper-container {
/*容器的长宽会随slide发生变化, 可不设.*/
}
.swiper-slide {
font: 33px/333px "Microsoft Yahei";
background: #ddd;
}
</style>
</head>
<body>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">slide1</div>
<div class="swiper-slide">slide2</div>
<div class="swiper-slide">slide3</div>
<div class="swiper-slide">slide4</div>
<div class="swiper-slide">slide5</div>
<div class="swiper-slide">slide6</div>
</div>
</div>
</body>
</html>
