Banner图片居中及Swiper图片轮播插件中图片居中的实现

网站种的banner轮播图是一个非常高频的模块，在以前我们都是用css+html+js的方式直接写，但是自从有了像Swiper这种非常好用的轮播图插件问世后，基本上大家写轮播效果都不在动手写了，这就导致了很多人其实对轮播的实现原理并不清晰。今天我们暂不讨论js实现动画效果的部分，仅说说如何在轮播图种实现图片居中。

一般而言，我们的浏览器尺寸是不定的，为了照顾到绝大多数主流屏幕，我们会选用稍大一些的图片，常用的宽度比如：1920像素宽等等。有时图片比较宽，在小屏幕下看是没有问题的，但是如果动态的拖动改变浏览器的宽度，发现Banner图片仅向一边溢出，进而失去焦点。

常见的解决思路如下：

html代码：

<div class="banner">
    <img src="image/banner.jpg" />
</div>

css样式代码：

.banner{
  width: 100%; height: 450px; position: relative;
  img{ width: 1920px; height: 100%; display: block; position: absolute; left: 50%;
    margin-left:calc(-1920px/2); }
}

即将父容器设置相对定位，再将图片本身先绝对定位，并向左偏移50%，再使用margin-left为负值的方式向右偏移图片自身宽度的一半，以达到绝对居中的效果。这样实现的效果，当逐渐缩小浏览器视图宽度时，图片的核心焦点区始终是在核心位置的。

在Swiper中，默认官方提供的实例代码中，几乎都没有考虑到这一点，这就导致了很多拿来即用的前端开发人员，写的代码，在其本地环境下运行是没问题的，但是经不起测试。

其实，在swiper中，实现图片居中的思路，与上述的基础demo思路是完全一致的。唯一需要注意的问题是，当存在多张图片时，后面的图片会遮住当前轮播图片，此时需要加overflow:hidden来进行隐藏。代码如下：

.banner{
	width: 100%; height: 46rem; float: left; overflow: hidden; position: relative;
	.swiper-slide{ position: relative; overflow: hidden;}
	.swiper-slide img{ width: 1920px; display: inline-block; position: relative;
	left: 50%; margin-left: -960px;}      
}