移动端实现内容左右滑动，并点击放大效果的问题

Question

需求如题，代码如下：

/*html*/
<div class="box">
<ul>
<li>
<div>
<img src="../img/lodin_foot2.png"/>
</div>
<span>送鲜花</span>
<a></a>
</li>
</ul>
</div>
/*css*/
.box{
display: flex;
    align-items: center;
    width: 100%;
    height: 4rem;
    overflow-x: auto;
    overflow-y: hidden;
}
.box>ul{
display: flex;
    width: auto;
    height: 3rem;
    white-space: nowrap;
    vertical-align: middle;
    align-items: center;
}
.box>ul>li{
display: inline-block;
    width: 4rem;
    height: 3rem;
    line-height: 3rem;
    text-align: center;
    position: relative;
    background: #FFFFFF;
}

当我给其中一个li设置缩放的时候，其背景色消失了，这是怎么回事？
另：如果不用弹性盒子，按照一般的方式实现，即给box一个固定宽高+overflow:auto,让里面的li左浮动，那么里面的Li高度不能有效的放大（被ul或者.box的高度限制了）

这是android的实现方式：http://blog.csdn.net/legend12...，前端方式如何实现？

效果同：http://www.17sucai.com/pins/9...类似，但不需要左右切换，而是左右滑动，并且放大的图片不一定居中，而是在当前点击的那个图片的位置放大。
直接设置内容滑动，又不能放大。用弹性盒子来设置滑动，效果又不太友好，有没有有类似经验的童鞋指教一下，这样的需求怎么实现？思路是怎样的？

Answer 1

用swiper轻松搞定

Answer 2

好歹还是弄出来了，思路还是按照之前的思路，弹性盒子+滑动，改变的是给弹性盒子增加一个padding-top，以留出li放大的空间。这个方法算是一个实用性欠缺的方式，远不如用插件实现更高效和稳定（至少来讲，盒子的大小布局等只能因时而宜，灵活性第，可维护性更是没有），代码我也懒得发了(能出来实在是女神眷顾)，估计也没我这么傻的放着插件不用非要来自己找虐~（》_《）~