改变Swiper JS库提供的demo方式(170-slides-per-column.html),从右向左排列表,然后从左向右滑动查看。提供的demo是从左向右排列的,如果使用float那都排在一行,到了宽度边界自动这行,这不是想要的结果,所以利用Swiper 4.0.6库现有的方式可以快速实现。
首先需要将Swiper库的源码做个小小的改动(大致在1300行),不影响升级,但升级后没有改的话只是回到从左向右排:
// Calc slides
var slideSize;
var slidesPerColumn = params.slidesPerColumn;
var slidesPerRow = slidesNumberEvenToRows / slidesPerColumn;
var numFullColumns = slidesPerRow - ((params.slidesPerColumn * slidesPerRow) - slidesLength);
for (var i = 0; i < slidesLength; i += 1) {
slideSize = 0;
var slide = slides.eq(i);
/*
* 修改之一
* 将 params.slidesPerColumn > 1 改成 >= 1
* 此处可不修改,只是当 slidesPerColumn 等于 1 时反向排无效
*/
if (params.slidesPerColumn >= 1) {
// Set slides order
var newSlideOrderIndex = (void 0);
var column = (void 0);
var row = (void 0);
if (params.slidesPerColumnFill === 'column') {
column = Math.floor(i / slidesPerColumn);
row = i - (column * slidesPerColumn);
if (column > numFullColumns || (column === numFullColumns && row === slidesPerColumn - 1)) {
row += 1;