swiper2个常用用法3D覆盖和左右留白

原创 2018年04月17日 16:45:18




<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
	<link rel="stylesheet" href="">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/css/swiper.min.css">
	<style>
.swiper-container{
	height: 300px;
	width: 500px;
}
.swiper-slide{
	height: 300px;
	width: 250px;
	border:1px solid #ccc;
}
.red{
	background: red;
}
.green{
	background: green;
}
.blue{
	background: blue;
}
.orange{
	background: orange;
}
.pink{
	background: pink;
}
	</style>
</head>
<body>
 <div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide red"></div>
        <div class="swiper-slide green"></div>
        <div class="swiper-slide blue"></div>
        <div class="swiper-slide orange"></div>
        <div class="swiper-slide pink"></div>
    </div>
    <div class="swiper-pagination"></div>
</div>

 <div class="swiper-container2">
    <div class="swiper-wrapper">
        <div class="swiper-slide red"></div>
        <div class="swiper-slide green"></div>
        <div class="swiper-slide blue"></div>
        <div class="swiper-slide orange"></div>
        <div class="swiper-slide pink"></div>
    </div>
    <div class="swiper-pagination"></div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/js/swiper.min.js"></script>	
<script>
	 var swiper = new Swiper('.swiper-container',{
                pagination:'.swiper-pagination',
                loop:true,
                //autoplay:1000,
                //grabCursor:true,
                centeredSlides:true,
                slidesPerView:'auto',
                effect:'coverflow',
                coverflow:{
                    rotate:0,//滑动时旋转角度
                    stretch:100,//聚合宽度
                    depth:100,//景深
                    modifier:1,//覆盖叠加层数
                    slideShadows:false//是否阴影
                }
            });
</script>

<script>
    var swper2 = new Swiper('.swiper-container2', {
    	direction: 'horizontal',
      	spaceBetween : 10,
	    loop: true,
	    slidesPerView : 1.2,
	    centeredSlides : true
    });
  
</script>
</body>
</html>

Swiper 3D flow使用方法

(1). 如需使用Swiper的3d切换首先加载3D flow插件(js和css)。 head> link rel="stylesheet" href="css/idangerous.swipe...
  • cddcj
  • cddcj
  • 2016-08-05 16:11:27
  • 4195

swiper2个常用用法3D覆盖和左右留白

&amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;...
  • weixin_41978390
  • weixin_41978390
  • 2018-04-17 16:45:18
  • 46

swiper的基础使用(十七)

这次内容我们接着介绍在swiper页面的翻页动画--3D覆盖流效果。   首先搭建swiper页面,设置CSS样式,为了观看效果,这一章依然在slide当中添加背景图片。 ...
  • u012054869
  • u012054869
  • 2016-07-04 21:26:15
  • 1285

swiper插件制作轮播图swiper2.x和3.x差别

swiper3.x只兼容到ie10+,比较适合移动端。 swiper3.x官网  http://www.swiper.com.cn/ swiper2.x可以兼容到ie7+,官网是http://...
  • u012011360
  • u012011360
  • 2015-08-16 14:37:05
  • 5015

对于iOS 7 之后UITableViewCell左侧默认15像素的留白解决方法

开发笔记: 对于iOS 7 之后UITableViewCell左侧默认15像素的留白解决方法: 在ios7中,UITableViewCell左侧会有默认15像素的空白。这时候,设置setSepa...
  • July_sal
  • July_sal
  • 2014-12-08 16:35:34
  • 2039

Swiper使用方法

// 1、首页需要引入swiper.min.js和swiper.min.css文件 // 2、HTML内容。
  • solly793755670
  • solly793755670
  • 2016-12-22 10:56:39
  • 1137

Swiper库的一些基本使用

html部分 内容页1 内容页2
  • DengKai_2017
  • DengKai_2017
  • 2017-02-04 22:51:14
  • 576

分享--可以使html中网页整个居中,两边留白的代码

html>  head>  head>//头  body >//正文  div style="margin-right: auto;margin-left: auto;">//自动居中  table ...
  • fjnjxr
  • fjnjxr
  • 2016-12-23 16:41:53
  • 1464

ViewPager + Fragment两边留白问题

我的fragment里面是imageView,只要设置imageView的 android:scaleType="fitXY"
  • q9977144
  • q9977144
  • 2015-08-05 16:39:45
  • 1096

swiper的基础使用(十八)

本次内容我们继续介绍swiper当中的翻页效果---3D翻转效果   首先搭建swiper页面,设置CSS样式,为了观看效果,这一章依然在slide当中添加背景图片。 ...
  • u012054869
  • u012054869
  • 2016-07-04 21:27:15
  • 677
收藏助手
不良信息举报
您举报文章:swiper2个常用用法3D覆盖和左右留白
举报原因:
原因补充:

(最多只允许输入30个字)