swiper漂亮的轮播效果左右切换自动播放
  • 分享到微信朋友圈
    X
立即下载 查看演示

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

如何使用：

引用jQuery.js 和 swiper.js

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

调用 swiper.js

<script>
      
var swiper = new Swiper('.jqfree .swiper-container',{
	autoplay:3000,
	loop:true,
	loopedSlides:3,
	spaceBetween:20,
	centeredSlides:true,
	slidesPerView : 'auto',
    nextButton: '.jqfree .swiper-button-next',
    prevButton: '.jqfree .swiper-button-prev',
});  
</script>