真正的无缝轮播

无缝轮播并不是只是首尾的无缝，而是当前和上一张之间的无缝过渡, 为此我们设置上一张pre与当前current两种状态

向前轮播forward情况下

@keyframes forwardPre {
    0% {
      transform: translateX(0);
    }

    100% {
      transform: translateX(-100%);
    }
}

@keyframes forwardCur {
    0% {
      transform: translateX(100%);
    }

    100% {
      transform: translateX(0);
    }
}
.pic {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.pic.pre {
    animation: forwardPre 0.4s ease-in-out;
    z-index: 9;
}
.pic.current {
    animation: forwardCur 0.4s ease-in-out;
    z-index: 10;
}

向后轮播backward情况下

@keyframes backwardPre {
    0% {
      transform: translateX(0);
    }

    100% {
      transform: translateX(100%);
    }
}

@keyframes backwardCur {
    0% {
      transform: translateX(-100%);
    }

    100% {
      transform: translateX(0);
    }
}
.pic {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.pic.pre {
    animation: backwardPre 0.4s ease-in-out;
    z-index: 9;
}
.pic.current {
    animation: backwardCur 0.4s ease-in-out;
    z-index: 10;
}