左右滑动需要增加css

//banner样式快速设置方法
.bnname(@name){
  .@{name}-bn{ position: relative; width: 100%;overflow: hidden;}
  .@{name}-ul{ position: relative;.flex-block; width: 100%; height: 100%;}
  .@{name}-li{ .flex-shrink(0); }
}

js方面没啥好说的！，就普通的改怎么搞就怎么搞

 var j5 = new Swiper('.j5-bn', {
        loop: true,
        wrapperClass: 'j5-ul',
        slideClass: 'j5-li',
        // 如果需要分页器
        pagination: '.j5-pag',
        speed: 1000,
        // autoplay: '2000',
        nextButton: '.j5-next',
        prevButton: '.j5-prev',
        // 如果需要前进后退按钮
        paginationClickable: true, //分页点点击控制
        //paginationType: 'progress',
        resizeReInit: true, ///宽度改变初始化
        observer: true, //修改swiper自己或子元素时，自动初始化swiper
        observeParents: true, // resizeReInit: true, ///宽度改变初始化
        observer: true, //修改swiper自己或子元素时，自动初始化swiper
        observeParents: true, //
        slidesPerView: 4,
    })

而垂直滑动则！

//banner样式快速设置方法
.bnname-cz(@name){
  .@{name}-bn{ position: relative; width: 100%;overflow: hidden;}
  .@{name}-ul{ position: relative;.flex-block; width: 100%; height: 100%; .flex-direction(column);}
  .@{name}-li{ .flex-shrink(0); }
}

而垂直滑动理论上只要加一个

direction : 'vertical',

垂直即可！

但是如果你是需要不固定高度显示的话，就需要加下面2个属性了

slidesPerView :'auto',
autoHeight:true,
    mousewheelControl:true,//鼠标滚轮