Swiper Slide 3d流切换效果 effect: 'coverflow'
  • 分享到微信朋友圈
    X
立即下载 查看演示

本分分享如何使用Swiper制作 Slide 3d流切换效果 effect: 'coverflow'， Swiper 是一款免费以及轻量级的移动设备触控滑块的js框架，使用硬件加速过渡（如果该设备支持的话）。主要使用于移动端的网站、移动web apps，native apps和hybrid apps。主要是为IOS而设计的，同时，在Android、WP8系统也有着良好的用户体验，Swiper从3.0开始不再全面支持PC端。因此，如需在PC上兼容更多的浏览器，可以选择Swiper2.x（甚至支持IE7）。

主要js与解释

    <script src="js/jquery-1.10.2.min.js" type="text/javascript"></script>
    <script src="js/swiper.min.js" type="text/javascript"></script>
    <script>
        var mySwiper = new Swiper('.swiper3d', {
        	slideActiveClass: 'active',
        	effect: 'coverflow',
        	coverflowEffect: {
        		rotate: 20,
        		stretch: 10,
        		depth: 500,
        		modifier: 1,
        		slideShadows: false
        	},
        	speed: 1000,
        	spaceBetween: 10,
        	autoplayDisableOnInteraction: false,
        	autoplay: {
        		delay: 5000,
        		stopOnLastSlide: false,
        		disableOnInteraction: false,
        	}, 
        	observer: true,
        	observeParents: true,
        });
    </script>