swiper轮播---异形轮播

swiper轮播—异形轮播

最近经常会碰到很多用swiper插件做各种各样轮播图的需求,没有做过3d异形轮播图,所以研究了一下,把经验给大家分享一下swiper轮播---异形轮播_第1张图片
上面图片就是轮播图所要达到的效果:焦点图片居中并向前突出,自动轮播。
代码介绍:
1.我的移动端屏幕尺寸640px,这个移动端屏幕适应是封装好的,如果需要引用,只需要改一下屏幕尺寸就好了。
2.我的图片大小是251*441。
3.swiper:指滑动、切换(整个滑动对象,有时特指滑块释放后仍然正向移动直到贴合边缘的过程(过渡))

container:指容器(swiper的容器里面包括滑动快(slide)的集合(wrapper)、分页器(pagination)、前进按钮等)

wrapper:指包含(触控的对象,可触摸区域,移动的块的集合,过渡时会随slide切换产生位移)

slider:指滑块(切换的块中的一个,可以包含文字、图片、html元素或另外一个swiper

pagination:指分页器(指示slide的数量和当前活动的slide)

active:指活动的,激活的(可视的(visible)slide是活动的,当可视slide不止一个时,默认最左边那个活动的)
4.详细参数配置参照swiper配置







Document





    

这样一个异形轮播图就好啦!
代码初成,有问题的地方还请各位大神多多指点~

你可能感兴趣的:(轮播图)