Swiper学习经验

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%;
}