Swiper 基本配置完成一个轮播图

最新推荐文章于 2024-07-17 00:08:06 发布

编程小橘子

最新推荐文章于 2024-07-17 00:08:06 发布

阅读量460

点赞数

分类专栏： ui框架和插件文章标签： javascript

本文链接：https://blog.csdn.net/qq_43353619/article/details/107648046

版权

ui框架和插件专栏收录该内容

9 篇文章 1 订阅

订阅专栏

因为swiper时常要用到，也是一个不错的图片滑动组件，我一般用它来做轮播，总结了一些基本的配置选项，供自己以后开发提供便利，代码如下：


    // 轮播图
    var mySwiper = new Swiper('.swiper-container', {
        direction: 'horizontal', // 垂直切换选项
        loop: true, // 循环模式选项

        // 如果需要分页器
        pagination: {
        el: '.swiper-pagination',
        },

        // 自动切换
          autoplay: {
          delay: 3000,  // 图片切换时间间隔
          stopOnLastSlide: false,   // 当切换到最后一张图片时，是否停止切换
          disableOnInteraction: false, // 解决手动拖动、点击后不能自动轮播问题
        },

     // 如果需要前进后退按钮
        navigation: {
        nextEl: '.swiper-button-next',  // 点击下一张时
        prevEl: '.swiper-button-prev',  // 点击上一张时
    },

    // 如果需要滚动条
    // scrollbar: {
    // el: '.swiper-scrollbar',
    // },
})