本文共 5507 字，大约阅读时间需要 18 分钟。

前提

• 今天产品提了这样一个需求：用户在首次登录后，要展示一个引流的轮播图，其内容主要是对新功能的图文说明（类似于王者荣耀每次更新时的内容一览轮播图，如下图所示）。如果非首次登录，则让它隐藏掉即可。注：由于时间关系，前端用 localstorage本地缓存 简单实现一下功能就行，暂时先不需要调用后台接口。

王者荣耀版本更新主要内容一览图

• 要实现的效果图大致如下所示：
  

功能实现

• 首先，轮播图肯定是使用 swiper 组件实现，别人已经写好的插件，我们直接拿来用就可以了。
• 然后，就涉及到了 swiper 组件中 一些自定义的小部件

如何使用 swiper 组件 （注：强烈建议使用之前好好阅读文档，学习一下使用方法）

1. 具体使用方法请参考：
2. API 文档地址入口：

使用教程

• 首先加载插件，需要用到的文件有 swiper.min.js 和 swiper.min.css 文件。可 或 。
• 然后创建 HTML 内容。注：swiper 组件已经提供好的模板，直接复制粘贴使用。
• 给 Swiper 容器 设定一个样式，比如：给轮播图的外层盒子设置一下 width 和 height。注：这个取决于需求，可要可不要。
• 初始化 Swiper。注：其实就是创建一个 Swiper 实例，然后进行个性化配置。

HTML部分（无组件）

    ...    
   	
   
	    
    
	        
     
      Slide 1
     
	        
     
      Slide 2
     
	        
     
      Slide 3
     
	    
    
	
   
    ...        ...

HTML部分（有组件）

注：组件我们一般都会用到，所以组件基本上是必须的。而且最常用的两个组件就是：分页器和前进后退按钮。

    ...    
   	
   
	    
    
	        
     
      Slide 1
     
	        
     
      Slide 2
     
	        
     
      Slide 3
     
	    
    
	    
    	    	    
    	    
    
    	    
    	    
    
	    
    
    	    
    	    
    
	    	    
    	
   
    ...        ...

CSS 部分：这个根据实际需要自行设置就可以了。

初始化 Swiper 【可参考原文档：】

• 使用方法示例：

   
  
    
    
     
      slider1
     
    
     
      slider2
     
    
     
      slider3
     
  
    
   

问题：如果一个页面中引用了多个Swiper组件呢？

答：可以给每个容器加上 ID 或 Class 区分。不过，要注意的是：一定要保留默认的类名 swiper-container 。

HTML部分：
   
    ....
    
     
      ....
      
       
        ....
        
         JS部分：var swiper1 = new Swiper('#swiper1');var swiper2 = new Swiper('#swiper2');var swiper3 = new Swiper('#swiper3');
        
       
      
     
    
   

• 使用讲解

1. new Swiper(swiperContainer, parameters) 用于初始化一个 Swiper ，返回初始化后的 Swiper 实例。
2. 它包含两个参数，具体如下：

• swiperContainer: Swiper 容器的 css 选择器，HTMLElement or string，必选。例如：“.swiper-container”。其实就是为了说明你要配置哪一个 swiper 组件。
• parameters : Swiper 的个性化配置，object 类型，可选。其实就是你想要配置的内容。

3. 以上就是 Swiper 组件最简单的用法了。

当然，我们目前的使用场景可不仅仅是局限于基本用法，还需要很多自定义的样式以及个性化配置。

Swiper组件的个性化配置

建议：根据自己的需求，参考官方文档，去配置一些选项。必须自己深入的了解，认真的过一遍文档才行，大概知道一些选项和用法就行了。

参考文档后，实际用于项目中所总结的。个人写法，仅供参考

var mySwiper = new Swiper ('#swiper_guide', {
   		direction: 'horizontal',		watchOverflow:true,//当没有足够的slide切换时，例如只有1个slide（非loop），swiper会失效且隐藏导航。		grabCursor : true,//设置为true时，鼠标覆盖Swiper时指针会变成手掌形状，拖动时指针会变成抓手形状。		effect : 'slide',//切换效果：默认为“位移切换”。		loop : true,//让Swiper看起来是循环的。		autoplay: {
   //启动自动切换，具体选项如下：			delay: 3000,//自动切换的时间间隔，单位ms			stopOnLastSlide: false,//如果设置为true，当切换到最后一个slide时停止自动切换。（loop模式下无效）。			disableOnInteraction: false,//用户操作swiper之后，是否禁止autoplay。默认为true：停止。		},		// 如果需要分页器，类名要和 HTML 中的相对应		pagination: {
   			el: '.swiper-pagination',//自动隐藏			clickable :true,		},		//如果需要前进后退按钮，类名要和 HTML 中的相对应		navigation: {
   			nextEl: '.swiper-button-next',//自动隐藏			prevEl: '.swiper-button-prev',//自动隐藏			hiddenClass: 'btn-hidden',//某些情况下需要隐藏前进后退按钮时，可以设定一个自定义的类名。		}	});

Swiper组件的自定义样式

自定义前进后退按钮

Swiper 组件中的前进后退按钮默认在容器内部。

问题：如果要将前进后退按钮显示在容器外部，如何实现呢？

答案：给 swiper组件 的 container容器外面加一个包裹的 div元素，并且给 这个 div 设置 相对（relative）定位。原因如下：

• 通过在控制台看源码，我们可以发现：前进后退按钮默认是绝对定位的。

  

• 再加上 swiper组件 的容器 .swiper-container 设置了 overflow:hidden属性。如果只改变前进后退按钮的 left 或者 right 定位属性是不行的。因为如果按钮移动到超出容器边缘时，超出部分就会隐藏掉，不会显示。

  

• 问题：那该如何解决呢？

• 给 swiper 组件的容器外面再套一层 div，并且给这个 div 设置 相对 relative 定位。最终通过这个 最外层的 div 来控制 前进后退按钮的位置。这样就会解决超出隐藏的问题，我们就可以随意设置 前进后退按钮 的位置了。

• 问题：位置的问题现在解决了，那么样式又该如何调整呢？

• 很简单，直接用前进后退按钮的类名，覆盖原有样式即可。非常简单，相当于直接忽略了默认样式，自己按照对应的类名重写一次就行了。无论是图标，颜色，还是背景都可以自定义实现。

代码分析：

• hiddenClass 是 前进后退按钮组件 中的一个选项。
  • 它表示了按钮隐藏时的Class，默认的隐藏类名是 swiper-button-hidden。
  • 这个类名可以自定义，然后在 隐藏类名中使用 css 样式中的 opacity 属性就可以控制隐藏了 。
  • 该类名对应的 css 样式是：opacity:0;就可以实现隐藏按钮。
  • 注意： 默认的 swiper.css 中并未发现为 swiper-button-hidden 这个类名添加了隐藏的样式。所以，后期需要手动添加。
• hideOnClick 也是 前进后退按钮组件 中的一个选项。
  • 作用： 点击 slide 时控制显示/隐藏按钮。
  • BUG处理： 如果遇到点击按钮显示/隐藏无效，可手动增加如下 css样式：（我看官方的案例也是手动添加的隐藏样式，默认的 css 样式中并没有）
  • 经过本人亲自测试： 如果该属性设置为 true，同时也没有设置 hiddenClass 选项，则在点击 slide 时，会为 前进后退按钮 自动追加一个 swiper-button-hidden 类名。如果该类名有对应的样式，那么点击时就会实现显示和隐藏的效果。如果该类名没有对应的样式，那就需要自己手动添加了。具体如下图所示：

.swiper-container .swiper-button-hidden{
    	opacity : 0; }

关于 swiper-button-hidden 类名的样式设置如下：

以下是官方的写法，可作参考

注：

• 因为默认存在隐藏的类名 swiper-button-hidden。所以这里无需设置 hiddenClass 配置项的值了。
• 只需要设置 类名对应的 css 隐藏属性即可。

个人自定义的前进后退按钮的样式，仅供参考

/*自定义 前进后退按钮*/#layer_guide_banner .swpier-btn{
   	width: 48px;	height:141px;	top: 38%;	outline: none;}#layer_guide_banner .swpier-btn.btn-hidden{
   	opacity: 0;}#layer_guide_banner .swiper-button-prev{
   	left: -9%;	background:url(../../images/guide_banner/btn-prev.png) center center no-repeat;	background-size: 48px 141px;}#layer_guide_banner .swiper-button-next{
   	right: -9%;	background:url(../../images/guide_banner/btn-next.png) center center no-repeat;	background-size: 48px 141px;}

自定义分页器

注：

• 设置之前我们先来看一看官方提供的默认的分页器结构和样式。
• 看完之后就知道如何设置自定义样式了。

分页器容器的样式和结构

我们可以发现：

• .swiper-pagination 是 整个分页器的容器，它设置了 绝对 absolute 定位。
• 如果想要调整分页器的位置，那么直接设置 .swiper-pagination 类名对应样式中的 定位属性即可。即自己重写一遍样式，覆盖掉原有的样式。

分页器容器中分页符的样式（未激活）

我们可以发现：

• swiper-pagination-bullet 代表每一个分页符，并且可以自定义样式。也是直接覆盖样式进行重写即可。
• Swiper 有很多一般选项的配置，上面的 swiper-container-horizontal 就是已经配置过的一般选项 direction。
• direction 选项表示 Slides的滑动方向，可设置 水平 (horizontal) 或 垂直 (vertical) 。默认：水平 horizontal 【使用方法如下所示】

分页器容器中分页符的样式（未激活）

我们可以发现：

• swiper-pagination-bullet-active 代表 当前分页符的样式，或者说已选中、已激活的分页符的样式。自定义样式也是直接进行覆盖重写即可，非常简单。

个人自定义的分页器样式，仅供参考

/*自定义分页器*/#layer_guide_banner .swiper-pagination{
   	bottom:3%;	left: 50%;	transform: translateX(-50%);}#layer_guide_banner .swiper-pagination .swiper-pagination-bullet{
   	margin: 0 4px;	outline: none;}#layer_guide_banner .swiper-pagination .swiper-pagination-bullet-active{
   	background-color:#f65e62;}

最终的实现效果（丑也没办法，产品目前设计的就这样）

结束语

• 至此，问题就已经被完美解决了。
• 有什么问题欢迎大家及时留言，一起交流探讨。
• 我也只是个新手。

转载地址：http://oxwli.baihongyu.com/