front - Swiper学习经验

Swiper学习经验

2018年10月25日 23:27:55 Ggigi 阅读数：82

 

swiper用法详解

1.基本调用

swiper4.x

——电脑端

1.  
   <link rel="stylesheet" href="{dede:global.cfg_templets_dir/}/css/swiper-4.3.5.min.css">
2.  
   <script type="text/javascript" src="{dede:global.cfg_templets_dir/}/js/swiper-4.3.5.min.js"></script>
3.  
   <!-- 首页轮播开始 -->
4.  
   <div class="banner">
5.  
   <div class="index-banner swiper-container">
6.  
   <div class="swiper-wrapper">
7.  
   {dede:banner typeid="1"}
8.  
   <div class="swiper-slide slide1">
9.  
   <img src="[field:url/]">
10.  
    <span class="title">[field:title/]</span>
11.  
    </div>
12.  
    {/dede:banner}
13.  
    </div>
14.  
    <!-- Add Pagination -->
15.  
    <div class="banner-btn swiper-pagination"></div>
16.  
    <!-- Add Arrows -->
17.  
    <div class="swiper-button-next swiper-button-white"></div>
18.  
    <div class="swiper-button-prev swiper-button-white"></div>
19.  
    </div>
20.  
    </div>
21.  
    <!-- 首页轮播结束 -->

 

1.  
   var mySwiper = new Swiper ('.index-banner', {
2.  
   direction: 'horizontal', // 竖屏 vertical 、 横屏 horizontal
3.  
   loop: true, // 打开之后，克隆最后一屏、放在整体最上面。实现轮播效果
4.  
   initialSlide: 0, // 设定初始化时slide的索引。 默认：0
5.  
   speed: 1000, // 切换速度
6.  
   grabCursor: true, // 抓手光标
7.  
   autoplay: true, // 自动播放的时间间隔 默认：3000
8.  
   effect: 'fade',
9.  
   fade: {
10.  
    crossFade: false,
11.  
    },
12.  
    pagination: {
13.  
    el: '.swiper-pagination',
14.  
    clickable: true,
15.  
    },
16.  
    //
17.  
    // // 如果需要前进后退按钮
18.  
    navigation: {
19.  
    nextEl: '.swiper-button-next',
20.  
    prevEl: '.swiper-button-prev',
21.  
    },
22.  
     
23.  
    });

1.  
   .banner .index-banner .swiper-slide{
2.  
   height: 405px;
3.  
   }
4.  
   .banner .index-banner .swiper-slide img{
5.  
   width: 100%; /*图片铺满整个页面，但会让图片超过原来宽度而失真*/
6.  
   height: 405px; /*固定图片高度*/
7.  
   }

手机端

a.使用amaze ui框架提供的，只需要添加对应类名 

1.  
   <section class="epd-banner am-g" id="banner">
2.  
   <div class="am-slider am-slider-default am-margin-bottom-0" data-am-widget="slider" data-am-slider='{}' >
3.  
   <ul class="am-slides">
4.  
   {dede:banner typeid="2"}
5.  
   <li><a href="[field:tz/]"><img src="[field:url/]"></a></li>
6.  
   {/dede:banner}
7.  
   </ul>
8.  
   </div>
9.  
   </section>

设置分页器样式

1.  
   /*隐藏上下页按钮切换器*/
2.  
   .am-direction-nav{display: none;}
3.  
   /*设置圆点分页器位置及按钮样式*/
4.  
   .am-slider-default .am-control-nav{bottom: .5rem;}
5.  
   .am-slider-default .am-control-nav li a.am-active{background-color: #fff;box-shadow:none;}
6.  
   .am-slider-default .am-control-nav li a,
7.  
   .am-slider-default .am-control-nav li a:hover{background-color: rgba(170,170,170,0.5);box-shadow:none;}

 b.使用swiper插件

1.  
   <!--css-->
2.  
   <link rel="stylesheet" type="text/css" href="{dede:global.cfg_templets_dir/}/assets/css/amazeui.min.css">
3.  
   <link rel="stylesheet" type="text/css" href="{dede:global.cfg_templets_dir/}/assets/css/amazeui.swiper.min.css">
4.  
    
5.  
   <!--js-->
6.  
   <script type="text/javascript" src="{dede:global.cfg_templets_dir/}/js/jquery.2.1.4.js"></script>
7.  
   <script type="text/javascript" src="http://libs.epd3.com/amaze/v2.7.0/assets/js/amazeui.min.js"></script>
8.  
   <!--位于jquery之后-->
9.  
   <script type="text/javascript" src="{dede:global.cfg_templets_dir/}/assets/js/amazeui.swiper.min.js"></script>

1.  
   <!-- Slider main container -->
2.  
   <div class="swiper-container">
3.  
   <!-- Additional required wrapper -->
4.  
   <div class="swiper-wrapper">
5.  
   <!-- Slides -->
6.  
   <div class="swiper-slide">Slide 1</div>
7.  
   <div class="swiper-slide">Slide 2</div>
8.  
   <div class="swiper-slide">Slide 3</div>
9.  
   ...
10.  
    </div>
11.  
    <!-- If we need pagination -->
12.  
    <div class="swiper-pagination"></div>
13.  
     
14.  
    <!-- If we need navigation buttons -->
15.  
    <div class="swiper-button-prev"></div>
16.  
    <div class="swiper-button-next"></div>
17.  
     
18.  
    <!-- If we need scrollbar -->
19.  
    <div class="swiper-scrollbar"></div>
20.  
    </div>

 

1.  
   $(function() {
2.  
   $('#proSwiper').swiper({
3.  
   direction: 'horizontal',
4.  
   nextButton: '.swiper-button-next',
5.  
   prevButton: '.swiper-button-prev',
6.  
   slidesPerColumn : 2,
7.  
   slidesPerGroup :2,
8.  
   slidesPerView:2 ,
9.  
   slidesPerColumnFill : 'row',
10.  
    touch:"false",
11.  
    });
12.  
    });

 

2.设置大图在小屏居中显示

1.  
   .banner .index-banner .swiper-slide img{
2.  
   position: absolute;
3.  
   left:50%;
4.  
   top:50%;
5.  
   transform: translate(-50%,-50%);
6.  
   height: 600px;
7.  
   }

3.轮播上插入静态文字，并且随着页面伸缩文字固定在轮播图上某个位置。

注意：定位要设为relative而不是absolute!（若设为absolute，文字会固定在页面某个位置，而不是轮播图上；除非swiper-slide:absolute,可参考下面的swiper2）

1.  
   <div class="banner">
2.  
   <div class="index-banner swiper-container">
3.  
   <div class="swiper-wrapper">
4.  
   {dede:banner typeid="1"}
5.  
   <div class="swiper-slide slide1">
6.  
   <img src="[field:url/]">
7.  
   <div class="text">
8.  
   <p class="title">[field:title/]</p>
9.  
   <p class="desc">[field:ms/]</p>
10.  
    </div>
11.  
    </div>
12.  
    {/dede:banner}
13.  
    </div>
14.  
    <!-- Add Pagination -->
15.  
    <div class="banner-btn swiper-pagination"></div>
16.  
    </div>
17.  
    </div>

1.  
   .banner .swiper-slide .text{
2.  
   position:relative;
3.  
   top: 226px;
4.  
   left: -270px;
5.  
   margin:0 auto;
6.  
   width: 322px;
7.  
   }

4.分页器：

（1）实现 swiper 的左右箭头放到外面，定制箭头的样式；

（2）鼠标经过上下页分页器后，变为箭头；实现方法是在分页器之后添加宽度为0高度为1px的线段，鼠标经过后width从0变为25px，分页器向右/左适当偏移；

1.  
   .swiper-button-prev,.swiper-button-next{
2.  
   @include size(71px,71px);
3.  
   background-repeat: no-repeat;
4.  
    
5.  
   &:after{
6.  
   position: absolute;
7.  
   content: "";
8.  
   width: 0;
9.  
   height: 1px;
10.  
    top: 36px;
11.  
    background-color: #858585;
12.  
    transition: all .4s cubic-bezier(0.215,0.61,0.355,1) 0s;
13.  
     
14.  
    }
15.  
    &:hover:after{
16.  
    width: 25px;
17.  
    }
18.  
     
19.  
     
20.  
    }
21.  
    .swiper-button-prev{
22.  
    background: url(../images/share_big.png) -572px -1506px; margin-left: 1%;transition: margin-left .3s ease-out 0s;
23.  
    &:hover{margin-left:.5%;}
24.  
    &:after{left: 30px;}
25.  
    }
26.  
    .swiper-button-next{
27.  
    background: url(../images/share_big.png) -613px -1506px; margin-right: 1%;transition: margin-right .3s ease-out 0s;
28.  
    &:hover{margin-right:.5%;}
29.  
    &:after{right: 30px;}
30.  
    }

效果：

 

5.swiper禁止滑动事件

二、swiper2.x(为了兼容ie8，所以要用swiper2.x代替swiper4.x）

1.参考：swiper2 animate

1.  
   <div class="index-banner">
2.  
   <a class="arrow-left arrow" href="#"></a>
3.  
   <a class="arrow-right arrow" href="#"></a>
4.  
   <div class="swiper-container">
5.  
   <div class="swiper-wrapper">
6.  
   {dede:banner typeid="1"}
7.  
   <div class="swiper-slide slide1">
8.  
   <img src="[field:url/]">
9.  
   <span class="title">[field:title/]</span>
10.  
    </div>
11.  
    {/dede:banner}
12.  
    </div>
13.  
    </div>
14.  
    <div class="pagination"></div>
15.  
    </div>

 

1.  
   var mySwiper = new Swiper ('.swiper-container', {
2.  
   direction: 'horizontal', // 竖屏 vertical 、 横屏 horizontal
3.  
   loop: true, // 打开之后，克隆最后一屏、放在整体最上面。实现轮播效果
4.  
   initialSlide: 0, // 设定初始化时slide的索引。 默认：0
5.  
   speed: 1000, // 切换速度
6.  
   grabCursor: true, // 抓手光标
7.  
   // autoplay: true, // 自动播放的时间间隔 默认：3000
8.  
   effect: 'fade',
9.  
   pagination: '.pagination',
10.  
    grabCursor: true,
11.  
    paginationClickable: true,
12.  
     
13.  
    });
14.  
    $('.arrow-left').on('click', function(e){
15.  
    e.preventDefault()
16.  
    mySwiper.swipePrev()
17.  
    })
18.  
    $('.arrow-right').on('click', function(e){
19.  
    e.preventDefault()
20.  
    mySwiper.swipeNext()
21.  
    })

1.  
   div.index-banner{
2.  
   position:relative;
3.  
   }
4.  
   .index-banner .arrow{
5.  
   width: 34px;
6.  
   height: 34px;
7.  
   border-radius: 50%;
8.  
   z-index: 999;
9.  
   }
10.  
    .index-banner .arrow-left {
11.  
    background: url(../images/left_arrow.png) no-repeat center;
12.  
    background-size: 18px 21px;
13.  
    background-color: #A6180A;
14.  
    position: absolute;
15.  
    left: 10px;
16.  
    top: 50%;
17.  
    margin-top: -15px;
18.  
    }
19.  
    .index-banner .arrow-right {
20.  
    background: url(../images/right_arrow.png) no-repeat center;
21.  
    background-size: 18px 21px;
22.  
    background-color: #A6180A;
23.  
    position: absolute;
24.  
    right: 10px;
25.  
    top: 50%;
26.  
    margin-top: -15px;
27.  
    }
28.  
    .pagination {
29.  
    z-index: 999;
30.  
    position: absolute;
31.  
    left: 0;
32.  
    text-align: center;
33.  
    bottom:8px;
34.  
    width: 100%;
35.  
    }
36.  
    .swiper-pagination-switch {
37.  
    display: inline-block;
38.  
    width: 8px;
39.  
    height: 8px;
40.  
    border-radius: 50%;
41.  
    border:1px solid #fff;
42.  
    background: transparent;
43.  
    /*box-shadow: 0px 1px 2px #555 inset;*/
44.  
    margin: 0 3px;
45.  
    cursor: pointer;
46.  
    }
47.  
    .swiper-active-switch {
48.  
    background: #fff;
49.  
    }

 2.实现效果：

（1）fade 效果（swiper2没有实现该效果的插件，我是引用别人的swiper2 fade）

（2）大图在小屏中居中（background-position:center;）

（3）文字固定在背景图某个位置（swiper-slide:absolute;text:absolute;）

1.  
   <link rel="stylesheet" href="{dede:global.cfg_templets_dir/}/css/idangerous.swiper2.7.6.css">
2.  
   <link rel="stylesheet" href="{dede:global.cfg_templets_dir/}/css/swiper.fade.plugin.css">
3.  
   <script type="text/javascript" src="{dede:global.cfg_templets_dir/}/js/jquery-1.8.2.min.js"></script>
4.  
   <script type="text/javascript" src="{dede:global.cfg_templets_dir/}/js/idangerous.swiper2.7.6.js"></script>
5.  
   <script type="text/javascript" src="{dede:global.cfg_templets_dir/}/js/swiper.fade.plugin.js"></script>
6.  
    
7.  
    
8.  
   <div class="banner">
9.  
   <div class="index-banner swiper-container">
10.  
    <div class="swiper-wrapper">
11.  
    {dede:banner typeid="1"}
12.  
    <div class="swiper-slide slide1">
13.  
    <div class="img-wrap" style="background: url([field:url/]) center no-
14.  
    repeat;height: 600px;">
15.  
    </div>
16.  
    <div class="text">
17.  
    <p class="title">[field:title/]</p>
18.  
    <p class="desc">[field:ms/]</p>
19.  
    </div>
20.  
    </div>
21.  
    {/dede:banner}
22.  
    </div>
23.  
    </div>
24.  
    <div class="pagination"></div>
25.  
    </div>

1.  
   var mySwiper = new Swiper ('.index-banner', {
2.  
   pagination: '.pagination',
3.  
   loop:true,
4.  
   grabCursor: true,
5.  
   paginationClickable: true,
6.  
   speed: 4000, // 切换速度
7.  
   grabCursor: true, // 抓手光标
8.  
   autoplay: true,
9.  
   fade:true,
10.  
    });

1.  
   .banner .swiper-slide .text{
2.  
   position: absolute;
3.  
   top: 226px;
4.  
   margin:0 auto;
5.  
   width: 322px;
6.  
   margin-left: 22%;
7.  
   }