使用Swiper库实现从右向左排列的列表块

最新推荐文章于 2023-01-17 16:07:04 发布

拭血

最新推荐文章于 2023-01-17 16:07:04 发布

阅读量3.2k

点赞数 1

CC 4.0 BY-SA版权

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

本文链接：https://blog.youkuaiyun.com/lsg9012/article/details/78627745

改变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