原文地址：Bougie的博客先展示最终效果：Vue的理念是用数据驱动view，所以拒绝通过改变margin-top来实现滚动效果的元素。写好css样式后，只需要改变每张图片的class就可以实现轮播效果了。轮播可以看成是两个，如图：写好每个类的样式：$width:800px；//容器宽度$height:300px;//容器高度$bWidth:500px;//大图宽度$sWidth:$width-$bWidth;//小图宽度$sHeight:$height/2;//小图片高度#slider-wrapper{width:$width;身高：$身高；保证金：0自动；游标：指针；背景：#ddd；边界半径：5px；框阴影：01px6pxrgba（0,0,0,0.117647），01px4pxrgba（0,0,0,0.117647）；显示：弹性；溢出：隐藏；div{显示：内联块；}}.main-slide{宽度：$bWidth;身高：$身高；向左飘浮;transition:all.4sease;}.extra-slide{宽度：$sWidth;位置：相对；.extra-slide-item{位置：绝对；宽度：$sWidth；身高：$sHeight；左：0；过渡：.4s缓出；;}.extra-slide-middle-first{top:0;z-index:2}.extra-slide-middle-second{top:$sHeight;-index:2}.extra-slide-bottom{top:$height}.extra-slide-hide{display:none!important;}}该模板包含两个轮播：
