.autoslide {
   width: 243px;
   height: 239px;
   width: 333px;
   height: 327px;
   overflow: hidden;
   margin: auto; 
}

.autoslide ul {
   display: flex;
   padding: 0;
   width: inherit;
   height: inherit;
   animation: exchange 33s infinite;
   animation-direction: alternate;
   animation-timing-function: ease-in-out;
}

.autoslide li {
   list-style: none;
   width: 100%;
   width: inherit;
   height: inherit;
}

.autoslide img {
   width: inherit;
   height: inherit;
}

@keyframes exchange {
   0%   { margin-left: 0; }
   11%  { margin-left: 0; }

   14%  { margin-left: -100%; }
   25%  { margin-left: -100%; }

   28%  { margin-left: -200%; }
   39%  { margin-left: -200%; }

   42%  { margin-left: -300%; }
   53%  { margin-left: -300%; }

   56%  { margin-left: -400%; }
   67% { margin-left: -400%; }
   
   70%  { margin-left: -500%; }
   81% { margin-left: -500%; }

   84%  { margin-left: -600%; }
   100% { margin-left: -600%; }
}