swiper插件的使用

使用步骤

引入swiper.min.js文件
新建一个swiper对象

var mySwiper = new Swiper('.swiper_c5', {
    autoplay: 1500
})

根据自己需求对对象进行编辑

例如：淡入淡出效果

var mySwiper = new Swiper('.swiper_c5', {
    effect: 'fade',
    //注意： 淡入淡出效果需要加上了另外一个属性crossFade，否则第一张图片的opacity一直为1，即永远会看到第一张图片存在于页面中
    fade: {
        crossFade: true
    }
})

例如：自动播放效果—-很简单，但有坑

var mySwiper = new Swiper('.swiper_c5', {
    //自动播放必须添加的属性autoplay，其值为播放的间隔时间
    autoplay: 1500,
    //如果只是添加autoplay，那么当人为的进行一些操作(滑动)之后，自动播放将不再起作用，需要添加下面的属性
    autoplayDisableOnInteraction: false
})

扩展：

设置autopaly属性相当于设置了一下三个属性：
autoplay: {
  delay: 3000,
  stopOnLastSlide: false,
  disableOnInteraction: true,
}

自定义分页样式 — 这里用到的是paginationBulletRender.
(这里只写了js中的内容，css样式可以根据个人需要进行更改)

var mySwiper = new Swiper('.swiper_c5', {
    effect: 'fade',
    autoplay: 1500,
    loop: true,
    pagination: '.three-pagination',
    //paginationClickable属性表示的是分页器可以被点击
    paginationClickable :true,
    //设置自定义的分页样式
    paginationBulletRender: function (swiper, index, className) {
        if (index === 0) {
            return '<span class="' + className + '">A</span>';
        }
        if (index === 1) {
            return '<span class="' + className + '">B</span>';
        }
    },
    fade: {
        crossFade: true
    },
    autoplayDisableOnInteraction: false
})

了解更多swiper.js内容请点击此处

猜你喜欢