PC、手机页面轮播控件Swiper的使用

作者: 水大云霄 | 来源:发表于2016-06-29 09:34 被阅读1160次

PC、手机页面轮播控件Swiper的使用
swiper自动无限滚动轮播制作
swiper 响应式开发
Flutter（二十一）：轮播图
使用swiper动态加载数据遇到的坑
vue2下实现swiper图片轮播滚动
前端常用插件
WeChat小程序视图篇~swiper
Swiper使用总结
vue中swiper的使用（轮播失效）

Swiper常用于移动端网站的内容触摸滑动
Swiper是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端。
Swiper能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。
Swiper开源、免费、稳定、使用简单、功能强大，是架构移动终端网站的重要选择！

[Swiper]http://www.swiper.com.cn/

1、将idangerous.swiper.min.js，idangerous.swiper.css加入到项目中

2、加入代码块

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Swiper_Demo</title>
<link rel="stylesheet" href="css/idangerous.swiper.css">
<script src="js/idangerous.swiper.min.js"></script>
<style>
* {
    margin: 0;
    padding: 0;
}
.swiper-container {
  width: 1000px;
  height: auto;
  color: #fff;
  text-align: center;
}
.img{
    display:block; margin:0 auto;
    width: 1000px;
}
.pagination {
  position: absolute;
  z-index: 20;
  bottom: 10px;
  text-align: center;
  width: 100%;
}
.swiper-pagination-switch {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 8px;
  background: #555;
  margin-right: 5px;
  opacity: 0.8;
  border: 1px solid #fff;
  cursor: pointer;
}
.swiper-active-switch {
  background: #FF4040;
}
</style>
</head>
<body>
<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide"><img src="img/p1.jpg" class="img"></div>
    <div class="swiper-slide"><img src="img/p2.jpg" class="img"></div>
    <div class="swiper-slide"><img src="img/p3.jpg" class="img"></div>
  </div>
  <div class="pagination"></div>
</div>
<script type="text/javascript">
  var mySwiper = new Swiper('.swiper-container',{
    pagination: '.pagination',
    paginationClickable: true,
    loop: true,
    autoplay: 2000,
  });  
</script>
</body>
</html>

基础使用如此简单，后续更多效果请亲们自行去官方查阅学习。