要实现swiper无缝滚动之前，我们先来了解CSS的transition-timing-function属性。

定义和用法

transition-timing-function 属性规定过渡效果的速度曲线。

该属性允许过渡效果随着时间来改变其速度。

默认值：	ease
继承性：	no
版本：	CSS3
语法：	transition-timing-function:linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);
JavaScript语法：	object.style.transitionTimingFunction="linear"

值	描述
linear	规定以相同速度开始至结束的过渡效果（等于cubic-bezier(0,0,1,1)）
ease	规定慢速开始，然后变快，然后慢速结束的过渡效果（等于cubic-bezier(0.25,0.1,0.25,1)）
ease-in	规定以慢速开始的过渡效果（等于cubic-bezier(0.42,0,1,1)）
ease-out	规定以慢速结束的过渡效果（等于cubic-bezier(0,0,0.58,1)）
ease-in-out	规定以慢速开始和结束的过渡效果（等于cubic-bezier(0.42,0,0.58,1)）
cubic-bezier(n,n,n,n)	在cubic-bezier函数中定义自己的值。可能的值是0至1之间的数值。

再来打开swiper的CSS代码，看看transition-timing-function属性设置了什么值，相关代码如下（swiper-7.4.1版本的swiper-bundle.css文件第35行）：

.swiper-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: flex;
  /*
  transition-property 属性规定应用过渡效果的CSS属性的名称（默认值：all）
  transition-duration 属性规定完成过渡效果需要花费的时间，以秒或毫秒计（默认值：0）
  transition-timing-function 属性规定过渡效果的速度曲线（默认值：ease）
  */
  transition-property: transform;
  box-sizing: content-box;
}

通过查看以上代码，没有显式设置transition-timing-function的属性值，则默认值为ease（规定慢速开始，然后变快，然后慢速结束的过渡效果），而要实现无缝滚动则需要把这个属性值设置为linear（规定以相同速度开始至结束的过渡效果）。让我们来创建一个swiper两行四列的无缝滚动图片列表，使用方法示例如下：

<style type="text/css">
.gridtwo .swiper {width:720px;height:240px;padding:5px 0 15px 0;}
.gridtwo .swiper-wrapper {
-webkit-transition-timing-function:linear;
-moz-transition-timing-function:linear;
-ms-transition-timing-function:linear;
-o-transition-timing-function:linear;
transition-timing-function:linear;
}
.gridtwo .swiper-slide {height:120px;}
.gridtwo .pic {width:150px;height:100px;margin:10px 15px;background:rgb(255,255,255);border-radius:6px;box-shadow:0px 4px 12px 2px rgb(182,182,182);display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:center;align-items:center;position:relative;}
.gridtwo .pic img {width:150px;height:100px;border-radius:6px;}
.gridtwo p {position:absolute;bottom:0;left:0;margin:0;padding:0;color:#FFF;display:inline-block;padding:0 11px;background-color:rgba(0,0,0,.6);border-radius:0 6px 0 6px;}
</style>

<script type="text/javascript">
var gridtwo= new Swiper('.gridtwo .swiper',{
  slidesPerView:4,
  spaceBetween:0,
  speed:2500,
  grid:{
    //设置网格的排列方向，默认column为竖向，row为横向。
    //当设置为column时，需要设置swiper的高度。
    fill:'column',
    //设置网格中Slide的行数。
    //当设置row>1时目前还不兼容loop模式（loop:true）。
    //在Slide数量不足以填满的情况下可能会出现布局不理想（例如4行3列，但是只有10个Slide），建议使用空的Slide将数量补足。
    rows:2
  },
  autoplay:{
    //自动切换的时间间隔，单位ms
    delay:0,
    //如果设置为true，当切换到最后一个slide时停止自动切换（loop模式下无效）
    stopOnLastSlide:false,
    //用户操作swiper之后，是否禁止autoplay。默认为true：停止。
    //如果设置为false，用户操作swiper之后自动切换不会停止，每次都会重新启动autoplay。
    //操作包括触碰(touch)，拖动，点击pagination等。
    disableOnInteraction:false,
    //开启此功能，鼠标置于swiper时暂停自动切换，鼠标离开时恢复自动切换。
    //如果你还开启了disableOnInteraction，那么自动切换不会恢复。
    pauseOnMouseEnter:false,
  }
});
</script>

虽然swiper7.0以上版本提供了Grid（网格/多行多列布局）组件功能，但当设置row>1（网格中Slide的行数）时目前还不兼容loop模式，所以大家看到以上图片滚动列表在滚动到最后一个slide（22 葡萄）时立即滑动回第一个slide的位置，这与我们期待的效果有偏差。那有没有其他办法既可以实现自定义多行多列又支持loop模式？答案是有的，以下方法不使用Grid网格功能，在每个swiper-slide里输出多条信息（在这里是：每个swiper-slide里输出三个图片）来模仿多行多列的布局，缺点是：如果需要修改排列方向则要重新修改HTML和CSS，而不能像Grid组件功能那样只需修改下某个参数值便可达到。效果如下所示：

我们可以看到，以上图片滚动列表在滚动到最后一个slide（22 葡萄）时，不会像第一个图片滚动列表那样直接反方向滑动回第一个slide的位置，而是看起来像是循环的。让我们来再做一个两行四列横向排列的（实现原理：每个swiper-slide里输出八个图片，然后使用Flex布局的flex-direction属性控制排列方向），效果如下所示：