使用swiper.js制作旋转木马效果
  • 分享到微信朋友圈
    X
立即下载 查看演示

文章内容

Swiper是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端。 Swiper能实现触屏焦点图、触屏Tab切换、触屏轮播图切换等常用效果。 Swiper开源、免费、稳定、使用简单、功能强大，是架构移动终端网站的重要选择！本文分享一个使用swiper.js制作旋转木马效果

关键代码

<script>
    var index_product = new Swiper('.jqfree .swiper-container', {
        effect: 'coverflow', //切换效果3D界面的形式显示出来
        slidesPerView: 'auto', //设置slider容器能够同时显示的slides数量'auto'则自动根据slides的宽度来设定数量。
        loop: true, //设置为 true 则开启循环(loop)模式。
        centeredSlides: true, // 设定为true时，active slide会居中，不是默认状态下的居左。设定为false时，active slide会居左显示
        autoplay: true, //设置为true启动自动切换，并使用默认的切换设置。
        navigation: {
            //使用前进后退按钮来控制Swiper切换。
            prevEl: '.jqfree .swiper-button-prev',
            nextEl: '.jqfree .swiper-button-next'
        }
    }); 
</script>