今天咱们来说一下.Swiper轮播图.

超级简单的:

翠花,上代码:







 
<!DOCTYPE html>




 
<html lang="en">




 
<head>




 
<meta charset="utf-8">




 
<title>Swiper demo</title>




 
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">




 
 




 
<!-- Link Swiper's CSS -->




 
<link rel="stylesheet" href="../dist/css/swiper.min.css">




 
 




 
<!-- Demo styles -->




 
<style>




 
html, body {




 
position: relative;




 
height: 100%;




 
}




 
body {




 
background: #eee;




 
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;




 
font-size: 14px;




 
color:#000;




 
margin: 0;




 
padding: 0;




 
}




 
.swiper-container {




 
width: 100%;




 
height: 100%;




 
}




 
.swiper-slide {




 
text-align: center;




 
font-size: 18px;




 
background: #fff;




 
 




 
/* Center slide text vertically */




 
display: -webkit-box;




 
display: -ms-flexbox;




 
display: -webkit-flex;




 
display: flex;




 
-webkit-box-pack: center;




 
-ms-flex-pack: center;




 
-webkit-justify-content: center;




 
justify-content: center;




 
-webkit-box-align: center;




 
-ms-flex-align: center;




 
-webkit-align-items: center;




 
align-items: center;




 
}




 
</style>




 
</head>




 
<body>




 
<!-- Swiper -->




 
<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 class="swiper-slide">Slide 4</div>




 
<div class="swiper-slide">Slide 5</div>




 
<div class="swiper-slide">Slide 6</div>




 
<div class="swiper-slide">Slide 7</div>




 
<div class="swiper-slide">Slide 8</div>




 
<div class="swiper-slide">Slide 9</div>




 
<div class="swiper-slide">Slide 10</div>




 
</div>




 
<!-- Add Pagination -->




 
<div class="swiper-pagination"></div>




 
</div>




 
 




 
<!-- Swiper JS -->




 
<script src="../dist/js/swiper.min.js"></script>




 
 




 
<!-- Initialize Swiper -->




 
<script>




 


var swiper = new Swiper('.swiper-container', {


//小白点






 
pagination: '.swiper-pagination',




 
paginationClickable: true




 
});




 
</script>




 
</body>




 
</html>






最后 别忘了再打这些东西之前要引Swiper.css和Swiper.js插件哦!


												


											
Swiper轮播图的更多相关文章
	

    
								
  1. 微信小程序_(组件)swiper轮播图
		
    微信小程序swiper轮播图组件官方文档 传送门 Learn: swiper组件 一.swiper组件 indicator-dots:是否显示面板指示点[默认值false] autoplay:是否自动 ...
    
		
    2. 
						
  2. swiper轮播图--兼容IE8
		
    //引入idangerous.swiper.min.js var mySwiper = new Swiper ('.swiper-container', { loop: true, paginatio ...
    
		
    3. 
						
  3. 微信小程序之swiper轮播图中的图片自适应高度
		
    小程序中的轮播图很简单,官方都有例子的,但是唯一的缺陷就是swiper是固定死的150px高度,这样如果传入的图片大于这个高度就会被隐藏.辣么,怎样让图片自适应不同分辨率捏. 我的思路是:获取屏幕宽度 ...
    
		
    4. 
						
  4. swiper 轮播图，拖动之后继续轮播
		
    在此贴出swiper官网地址:https://www.swiper.com.cn/api/index.html 示例如下(官网示例): <script> var mySwiper = ne ...
    
		
    5. 
						
  5. swiper轮播图（逆向自动切换类似于无限循环）
		
    swiper插件轮播图,默认的轮播循序是会从右向左,第一张,第二张,第三张,然后肉眼可见是的从第三张从左到右倒回第一张,这样就会有些视觉体验不高, ,不过还是能够用swiper本身的特性更改成无限循环 ...
    
		
    6. 
						
  6. 如何自定义微信小程序swiper轮播图面板指示点的样式
		
    https://www.cnblogs.com/myboogle/p/6278163.html 微信小程序的swiper组件是滑块视图容器,也就是说平常我们看到的轮播图就可以用它来做,不过这个组件有很 ...
    
		
    7. 
						
  7. 自定义微信小程序swiper轮播图面板指示点的样式
		
    微信小程序的swiper组件是滑块视图容器,也就是说平常我们看到的轮播图就可以用它来做,不过这个组件有很多样式是固定的,但是,有时候我们的设计稿的面板指示点是需要个性化的,那么如何去修改swiper组 ...
    
		
    8. 
						
  8. swiper轮播图插件
		
    一.简介 ①Swiper是纯javascript打造的滑动特效插件,面向手机.平板电脑等移动终端.Swiper能实现触屏焦点图.触屏Tab切换.触屏多图切换等常用效果. ②Swiper 是一款免费以及 ...
    
		
    9. 
						
  9. vue2 使用 swiper 轮播图效果
		
    第一步.先安装swiper插件 npm install swiper@3.4.1 --save-dev 第二步.组件内引入swiper插件 import Swiper from 'swiper' im ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. leetcode-896-单调数列
			
    题目描述: 如果数组是单调递增或单调递减的,那么它是单调的. 如果对于所有 i <= j,A[i] <= A[j],那么数组 A 是单调递增的. 如果对于所有 i <= j,A[i] ...
    
			
    2. 
						
  2. PCA简单实现
			
    ''' 总结一下PCA的算法步骤: 设有m条n维数据. 1)将原始数据按列组成n行m列矩阵X 2)将X的每一行(代表一个属性字段)进行零均值化,即减去这一行的均值 3)求出协方差矩阵C=1/m*(XX ...
    
			
    3. 
						
  3. git已经删除了远程分支，本地仍然能看到
			
    1.使用 git branch -a 命令可以查看所有本地分支和远程分支,发现很多在远程仓库已经删除的分支在本地依然可以看到. 2.使用命令 git remote show origin,可以查看re ...
    
			
    4. 
						
  4. 【算法笔记】A1054 The Dominant Color
			
    1054 The Dominant Color (20 分)   Behind the scenes in the computer's memory, color is always talked  ...
    
			
    5. 
						
  5. 使用mint-ui的 InfiniteScroll 做数据分页请求
			
    1.首先 npm install mint-ui 2.在main.js引用 import { InfiniteScroll } from 'mint-ui'; Vue.use(InfiniteScro ...
    
			
    6. 
						
  6. OpenERP 疑问之一
			
    def _get_send_amount(self,cr,uid,ids,name,args,context=None): res={} MRP={} lines = self.browse(cr,u ...
    
			
    7. 
						
  7. mono修改代码模板
			
    新建android application是在这里修改模板D:\prostu\Microsoft Visual Studio 10.0\Common7\IDE\ProjectTemplatesCach ...
    
			
    8. 
						
  8. Python中utf-8与utf-8-sig两种编码格式的区别
			
    As UTF-8 is an 8-bit encoding no BOM is required and anyU+FEFF character in the decoded Unicode stri ...
    
			
    9. 
						
  9. PHP在 win7 64位 旗舰版 报错 Call to undefined function curl_init()
			
    代码在ubuntu下无缝运行OK 转到我的win7 64位 期间 学习机上 报错: Call to undefined function curl_init() 因为用到curl 远程抓取数据. 所以 ...
    
			
    10. 
						
  10. hadoop-2.6.0-cdh5.4.5.tar.gz(CDH)的3节点集群搭建(含zookeeper集群安装）
			
    前言 本人呕心沥血所写,经过好一段时间反复锤炼和整理修改.感谢所参考的博友们!同时,欢迎前来查阅赏脸的博友们收藏和转载,附上本人的链接 http://www.cnblogs.com/zlslch/p/ ...
    
			
    11.