swiper插件的使用

最新推荐文章于 2025-02-22 10:36:31 发布

hhf235678

最新推荐文章于 2025-02-22 10:36:31 发布

阅读量573

点赞数

CC 4.0 BY-SA版权

分类专栏： js 文章标签： swiper

本文链接：https://blog.youkuaiyun.com/hhf235678/article/details/79879815

js 专栏收录该内容

13 篇文章

订阅专栏

本文介绍了如何使用swiper插件，包括引入js文件，创建swiper对象，并展示了设置淡入淡出效果和自动播放功能的实现。此外，还探讨了自定义分页样式的技巧，通过paginationBulletRender方法进行个性化设计。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用步骤

引入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内容请点击此处