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;}
}
效果:
二、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%;
}