今天咱们来说一下.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. Python基础部分的疑惑解析——运算符和数据类型（3）
			
    补充上一篇: #! /user/bin/env python   代码内声明这一个就可以用1.py类似的文件直接执行,但是要在linux内加权限, 不需要在前面加python 1.py执行了.文件可以 ...
    
			
    2. 
						
  2. sql server 2008 R2 配置管理工具打不开
			
    使用 sql server 配置管理工具是报如下错误: 解决方法:   1 找出 sqlmgmproviderxpsp2up.mof 这个文件的位置   2 以管理员身份运行 mofcomp &quo ...
    
			
    3. 
						
  3. yii学习记录-gii配置
			
    这篇博文中你将了解到以下内容 YiiDemo配置文件 Yii代码生成器 修改PHP执行环境变量 参考 Yii 是一个基于组件.纯OOP的.用于开发大型 Web 应用的高性能PHP框架.它将Web编程中 ...
    
			
    4. 
						
  4. (转)zabbix之生产案例
			
    原文: https://www.abcdocker.com/abcdocker/category/zabbix/ 原文: https://chegva.com/1170.html
    
			
    5. 
						
  5. Android进程管理
			
    1.进程按照优先级分为不同的等级FVSBE Foreground process前台进程:用户可看到进程里某个activity界面(可以获得焦点的) Visible process可见进程:用户仍可见 ...
    
			
    6. 
						
  6. linux mint19 解决docker必须使用sudo问题
			
    1 安装完docker 使用时,提示权限不够 ~$ docker info Got permission denied while trying to connect to the Docker da ...
    
			
    7. 
						
  7. 十分有趣的this指向题
			
    var num=5;//9 =>++this.num=>10 var obj={ num:3, fn:function() { num = 9;//window.num=9 (functi ...
    
			
    8. 
						
  8. [转]MAC：删除终端默认前缀的计算机名
			
    MAC:删除终端默认前缀的计算机名 1.打开终端 输入 sudo vi /etc/bashrc,提示输入密码就是计算机的密码. 2.点击i将编辑模式改成insert修改文档,使用#注释PS1=’\h: ...
    
			
    9. 
						
  9. Http协议之Content-Length
			
    前言 http协议是互联网中最重要的协议之一,虽然看上去很简单,但是实际中经常遇到问题,我们就已经遇到好几次了.有长连接相关的,有报文解析相关的.对http协议不能一知半解,必须透彻理解才行.所以就写 ...
    
			
    10. 
						
  10. ES6 读书笔记
			
    一.let和const命令 二.变量的解构赋值 三.字符串的扩展 四.数值的扩展 五.正则的扩展 六.数组的扩展 七.函数的扩展 八.对象的扩展 九.symbol 十.proxy和reflect 十一 ...
    
			
    11.