天天看点

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

因为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',
    // },
})
           

继续阅读