swiper用法详解
1.基本调用
swiper4.x
——电脑端
<link rel="stylesheet" href="{dede:global.cfg_templets_dir/}/css/swiper-4.3.5.min.css"> <script type="text/javascript" src="{dede:global.cfg_templets_dir/}/js/swiper-4.3.5.min.js"></script> <!-- 首页轮播开始 --> <div class="banner"> <div class="index-banner swiper-container"> <div class="swiper-wrapper"> {dede:banner typeid="1"} <div class="swiper-slide slide1"> <img src="[field:url/]"> <span class="title">[field:title/]</span> </div> {/dede:banner} </div> <!-- Add Pagination --> <div class="banner-btn swiper-pagination"></div> <!-- Add Arrows --> <div class="swiper-button-next swiper-button-white"></div> <div class="swiper-button-prev swiper-button-white"></div> </div> </div> <!-- 首页轮播结束 -->var mySwiper = new Swiper ('.index-banner', { direction: 'horizontal', // 竖屏 vertical 、 横屏 horizontal loop: true, // 打开之后，克隆最后一屏、放在整体最上面。实现轮播效果 initialSlide: 0, // 设定初始化时slide的索引。 默认：0 speed: 1000, // 切换速度 grabCursor: true, // 抓手光标 autoplay: true, // 自动播放的时间间隔 默认：3000 effect: 'fade', fade: { crossFade: false, }, pagination: { el: '.swiper-pagination', clickable: true, }, // // // 如果需要前进后退按钮 navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, }); .banner .index-banner .swiper-slide{ height: 405px; } .banner .index-banner .swiper-slide img{ width: 100%; /*图片铺满整个页面，但会让图片超过原来宽度而失真*/ height: 405px; /*固定图片高度*/ }
手机端
a.使用amaze ui框架提供的，只需要添加对应类名
<section class="epd-banner am-g" id="banner"> <div class="am-slider am-slider-default am-margin-bottom-0" data-am-widget="slider" data-am-slider='{}' > <ul class="am-slides"> {dede:banner typeid="2"} <li><a href="[field:tz/]"><img src="[field:url/]"></a></li> {/dede:banner} </ul> </div> </section>设置分页器样式
/*隐藏上下页按钮切换器*/ .am-direction-nav{display: none;} /*设置圆点分页器位置及按钮样式*/ .am-slider-default .am-control-nav{bottom: .5rem;} .am-slider-default .am-control-nav li a.am-active{background-color: #fff;box-shadow:none;} .am-slider-default .am-control-nav li a, .am-slider-default .am-control-nav li a:hover{background-color: rgba(170,170,170,0.5);box-shadow:none;}b.使用swiper插件
<!--css--> <link rel="stylesheet" type="text/css" href="{dede:global.cfg_templets_dir/}/assets/css/amazeui.min.css"> <link rel="stylesheet" type="text/css" href="{dede:global.cfg_templets_dir/}/assets/css/amazeui.swiper.min.css"> <!--js--> <script type="text/javascript" src="{dede:global.cfg_templets_dir/}/js/jquery.2.1.4.js"></script> <script type="text/javascript" src="http://libs.epd3.com/amaze/v2.7.0/assets/js/amazeui.min.js"></script> <!--位于jquery之后--> <script type="text/javascript" src="{dede:global.cfg_templets_dir/}/assets/js/amazeui.swiper.min.js"></script> <!-- Slider main container --> <div class="swiper-container"> <!-- Additional required wrapper --> <div class="swiper-wrapper"> <!-- Slides --> <div class="swiper-slide">Slide 1</div> <div class="swiper-slide">Slide 2</div> <div class="swiper-slide">Slide 3</div> ... </div> <!-- If we need pagination --> <div class="swiper-pagination"></div> <!-- If we need navigation buttons --> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> <!-- If we need scrollbar --> <div class="swiper-scrollbar"></div> </div>$(function() { $('#proSwiper').swiper({ direction: 'horizontal', nextButton: '.swiper-button-next', prevButton: '.swiper-button-prev', slidesPerColumn : 2, slidesPerGroup :2, slidesPerView:2 , slidesPerColumnFill : 'row', touch:"false", }); });
2.设置大图在小屏居中显示
.banner .index-banner .swiper-slide img{ position: absolute; left:50%; top:50%; transform: translate(-50%,-50%); height: 600px; }3.轮播上插入静态文字，并且随着页面伸缩文字固定在轮播图上某个位置。
注意：定位要设为relative而不是absolute!（若设为absolute，文字会固定在页面某个位置，而不是轮播图上；除非swiper-slide:absolute,可参考下面的swiper2）
<div class="banner"> <div class="index-banner swiper-container"> <div class="swiper-wrapper"> {dede:banner typeid="1"} <div class="swiper-slide slide1"> <img src="[field:url/]"> <div class="text"> <p class="title">[field:title/]</p> <p class="desc">[field:ms/]</p> </div> </div> {/dede:banner} </div> <!-- Add Pagination --> <div class="banner-btn swiper-pagination"></div> </div> </div> .banner .swiper-slide .text{ position:relative; top: 226px; left: -270px; margin:0 auto; width: 322px; }4.分页器：
（1）实现 swiper 的左右箭头放到外面，定制箭头的样式；
（2）鼠标经过上下页分页器后，变为箭头；实现方法是在分页器之后添加宽度为0高度为1px的线段，鼠标经过后width从0变为25px，分页器向右/左适当偏移；
.swiper-button-prev,.swiper-button-next{ @include size(71px,71px); background-repeat: no-repeat; &:after{ position: absolute; content: ""; width: 0; height: 1px; top: 36px; background-color: #858585; transition: all .4s cubic-bezier(0.215,0.61,0.355,1) 0s; } &:hover:after{ width: 25px; } } .swiper-button-prev{ background: url(../images/share_big.png) -572px -1506px; margin-left: 1%;transition: margin-left .3s ease-out 0s; &:hover{margin-left:.5%;} &:after{left: 30px;} } .swiper-button-next{ background: url(../images/share_big.png) -613px -1506px; margin-right: 1%;transition: margin-right .3s ease-out 0s; &:hover{margin-right:.5%;} &:after{right: 30px;} }效果：
5.swiper禁止滑动事件
二、swiper2.x(为了兼容ie8，所以要用swiper2.x代替swiper4.x）
1.参考：swiper2 animate
<div class="index-banner"> <a class="arrow-left arrow" href="#"></a> <a class="arrow-right arrow" href="#"></a> <div class="swiper-container"> <div class="swiper-wrapper"> {dede:banner typeid="1"} <div class="swiper-slide slide1"> <img src="[field:url/]"> <span class="title">[field:title/]</span> </div> {/dede:banner} </div> </div> <div class="pagination"></div> </div>var mySwiper = new Swiper ('.swiper-container', { direction: 'horizontal', // 竖屏 vertical 、 横屏 horizontal loop: true, // 打开之后，克隆最后一屏、放在整体最上面。实现轮播效果 initialSlide: 0, // 设定初始化时slide的索引。 默认：0 speed: 1000, // 切换速度 grabCursor: true, // 抓手光标 // autoplay: true, // 自动播放的时间间隔 默认：3000 effect: 'fade', pagination: '.pagination', grabCursor: true, paginationClickable: true, }); $('.arrow-left').on('click', function(e){ e.preventDefault() mySwiper.swipePrev() }) $('.arrow-right').on('click', function(e){ e.preventDefault() mySwiper.swipeNext() }) div.index-banner{ position:relative; } .index-banner .arrow{ width: 34px; height: 34px; border-radius: 50%; z-index: 999; } .index-banner .arrow-left { background: url(../images/left_arrow.png) no-repeat center; background-size: 18px 21px; background-color: #A6180A; position: absolute; left: 10px; top: 50%; margin-top: -15px; } .index-banner .arrow-right { background: url(../images/right_arrow.png) no-repeat center; background-size: 18px 21px; background-color: #A6180A; position: absolute; right: 10px; top: 50%; margin-top: -15px; } .pagination { z-index: 999; position: absolute; left: 0; text-align: center; bottom:8px; width: 100%; } .swiper-pagination-switch { display: inline-block; width: 8px; height: 8px; border-radius: 50%; border:1px solid #fff; background: transparent; /*box-shadow: 0px 1px 2px #555 inset;*/ margin: 0 3px; cursor: pointer; } .swiper-active-switch { background: #fff; }
2.实现效果：
（1）fade 效果（swiper2没有实现该效果的插件，我是引用别人的swiper2 fade）
（2）大图在小屏中居中（background-position:center;）
（3）文字固定在背景图某个位置（swiper-slide:absolute;text:absolute;）
<link rel="stylesheet" href="{dede:global.cfg_templets_dir/}/css/idangerous.swiper2.7.6.css"> <link rel="stylesheet" href="{dede:global.cfg_templets_dir/}/css/swiper.fade.plugin.css"> <script type="text/javascript" src="{dede:global.cfg_templets_dir/}/js/jquery-1.8.2.min.js"></script> <script type="text/javascript" src="{dede:global.cfg_templets_dir/}/js/idangerous.swiper2.7.6.js"></script> <script type="text/javascript" src="{dede:global.cfg_templets_dir/}/js/swiper.fade.plugin.js"></script> <div class="banner"> <div class="index-banner swiper-container"> <div class="swiper-wrapper"> {dede:banner typeid="1"} <div class="swiper-slide slide1"> <div class="img-wrap" style="background: url([field:url/]) center no- repeat;height: 600px;"> </div> <div class="text"> <p class="title">[field:title/]</p> <p class="desc">[field:ms/]</p> </div> </div> {/dede:banner} </div> </div> <div class="pagination"></div> </div> var mySwiper = new Swiper ('.index-banner', { pagination: '.pagination', loop:true, grabCursor: true, paginationClickable: true, speed: 4000, // 切换速度 grabCursor: true, // 抓手光标 autoplay: true, fade:true, }); .banner .swiper-slide .text{ position: absolute; top: 226px; margin:0 auto; width: 322px; margin-left: 22%; }
