SOURCE

<div class="slider-loop">
   <ul class="slider-box">
      <li class="slider-item slider-item1"></li>
      <li class="slider-item slider-item2"></li>
      <li class="slider-item slider-item3"></li>
      <li class="slider-item slider-item4"></li>
      <li class="slider-item slider-item5"></li>
   </ul>
   <div class="control-box">
      <ul class="control-dot">
         <li><div class="control-item control-item1"></div></li>
         <li><div class="control-item control-item2"></div></li>
         <li><div class="control-item control-item3"></div></li>
         <li><div class="control-item control-item4"></div></li>
         <li><div class="control-item control-item5"></div></li>
      </ul>
   </div>
</div>

/*css reset start*/
*{
margin:0;
padding:0;
}
ul,li{
list-style: none;
}
/*css reset end*/

.control-image1,.slider-item1 {
    background-image:url('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1602835908006&di=76a01a70518d7e8c2dbc47b4528c68b4&imgtype=0&src=http%3A%2F%2Fcdn.duitang.com%2Fuploads%2Fitem%2F201408%2F24%2F20140824154253_45Hay.png');
}

.control-image2,.slider-item2 {
    background-image:url('https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3474094557,370758738&fm=11&gp=0.jpg');
}

.control-image3,.slider-item3 {
    background-image:url('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1602835908005&di=c96797b295c73018671c66553b055305&imgtype=0&src=http%3A%2F%2Fd.hiphotos.baidu.com%2Fzhidao%2Fpic%2Fitem%2Fe61190ef76c6a7efd517f640fbfaaf51f3de66a6.jpg')
}

.control-image4,.slider-item4 {
    background-image:url('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1602835908002&di=16e4fb6fd80e505b409021408de86590&imgtype=0&src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202009%2F24%2F20200924201441_xdhsp.thumb.400_0.jpeg');
}

.control-image5,.slider-item5 {
    background-image:url('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1602836061543&di=1d16805992d86a774c678a21ae4b9bfd&imgtype=0&src=http%3A%2F%2Fww3.sinaimg.cn%2Fmw690%2F861756fcly1ge2vw0avchj20k00k046p.jpg');
}


.slider-fade,.slider-loop {
    width: 100%;
    position: relative
}

.slider-loop {
    overflow: hidden
}

.slider-item+.slider-item {
    opacity: 0;
    -moz-opacity: 0;
    -webkit-opacity: 0
}

.slider-fade .slider-item {
    width: 100%;
    position: absolute;
    animation-timing-function: linear;
    animation-name: fade;
    animation-iteration-count: infinite;
    background-size: cover
}

.slider-loop .slider-box .slider-item {
    width: 20%;
    background-size: 100% 20%;
    float: left;
    opacity: 1;
    -moz-opacity: 1;
    -webkit-opacity: 1
}
.slider-fade,.slider-item,.slider-loop {
    padding-bottom: 40%
}

.slider-loop .slider-box {
    position: absolute;
    left: 0;
    top: 0;
    width: 500%;
    height: 100%;
    font-size: 0;
    transform: translate(0);
    animation: loop 20s linear infinite;
}

@keyframes loop {
    0% {
        transform: translate(0);
    
    }

    15% {
        transform: translate(0);
    }

    20% {
        transform: translate(-20%);
    }

    35% {
        transform: translate(-20%);
    }

    40% {
        transform: translate(-40%);
    }

    55% {
        transform: translate(-40%);
    }

    60% {
        transform: translate(-60%);
    }

    75% {
        transform: translate(-60%);
    }

    80% {
        transform: translate(-80%);
    }

    95% {
        transform: translate(-80%);
    }

    to {
        transform: translate(0);
    }
}


.control-box {
    bottom: 2%
}
.control-box {
    position: absolute;
    z-index: 7;
    margin: 0 auto;
    left: 0;
    right: 0;
}

.control-box ul {
    margin-left: 46%;
}


.control-item {
    background: #666
}
.control-box li {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    float: left;
    margin-right: 10px;
    background: #eee;
}

.control-image,.control-item,.slider-item {
    animation-duration: 20s;
}

.control-item {
    width: 100%;
    height: 100%;
    border-radius: inherit;
    animation-timing-function: linear;
    animation-name: fade;
    animation-iteration-count: infinite;
}

.control-item2,.control-item3,.control-item4,.control-item5 {
    opacity: 0;
 
}
.control-image1,.control-item1,.slider-item1 {
    animation-delay: -1s;
  
}

.control-image2,.control-item2,.slider-item2 {
    animation-delay: 3s;

}

.control-image3,.control-item3,.slider-item3 {
    animation-delay: 7s;
  
}

.control-image4,.control-item4,.slider-item4 {
    animation-delay: 11s;
 
}

.control-image5,.control-item5,.slider-item5 {
    animation-delay: 15s;
}

@keyframes fade {
    0% {
        opacity: 0;
        z-index: 2
    }

    5% {
        opacity: 1;
    }

    20% {
        opacity: 1;
    }

    25% {
        opacity: 0;
        z-index: 0
    }

    to {
        opacity: 0;
        z-index: 0
    }
}