Swiper 3d幻灯片 卡片式翻转效果 可以左右切换
  • 分享到微信朋友圈
    X
立即下载 查看演示

本文介绍如何使用swiper制作3d幻灯片 卡片式翻转效果 可以左右切换 适应手机效果, Swiper是一款开源、免费、强大的触摸滑动插件，常用于移动端网站的内容触摸滑动，Swiper是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端。 Swiper能实现触屏焦点图、触屏Tab切换、触屏轮播图切换等常用效果。 Swiper开源、免费、稳定、使用简单、功能强大，是架构移动终端网站的重要选择！

如何使用：

引用jQuery.js 和 swiper.js

<script src="js/jquery.min.js" type="text/javascript"></script> 
<script src="js/swiper-bundle.min.js" type="text/javascript"></script>

调用 swiper.js

<script>	 
        var swiper = new Swiper('.jqfree .swiper-container', { 
        	slidesPerView: 1,
        	paginationClickable: true,
        	spaceBetween:0,
        	loop: true,
        	 effect: 'cards',
            cardsEffect: {
              slideShadows: false,
            },
            navigation: {
        	  nextEl: ".swiper-button-next",
        	  prevEl: ".swiper-button-prev",
        	},
        }); 
    </script>