Вертикальное слайд-шоу - PullRequest
Новая
       27

Вертикальное слайд-шоу

0 голосов
/ 21 февраля 2020

Я пытался превратить горизонтальное слайд-шоу в вертикальное слайд-шоу, но я не понимаю, как это сделать. Что я должен изменить, чтобы сделать это?

https://codepen.io/ojedaa/pen/eYYKjXo

<div class="slider">
  <ul>
    <li>
      <img src="http://dominicushoeve.com/wp-content/uploads/ktz/latest-high-resolution-wallpaper-1920x1080-70558-pictures-high-resolution-wallpaper-30whtvl34j4r12m8b0c1sa.jpg" alt="">
    </li>
    <li>
      <img src="http://youghaltennisclub.ie/wp-content/uploads/2014/06/Tennis-Wallpaper-High-Definition-700x300.jpg" alt="">
    </li>
    <li>
      <img src="http://welltechnically.com/wp-content/uploads/2013/08/android-wallpapers-700x300.jpg" alt="">
    </li>
    <li>
      <img src="http://welltechnically.com/wp-content/uploads/2013/09/android-widescreen-wallpaper-14165-hd-wallpapers-700x300.jpg" alt="">
    </li>
  </ul>
</div>

.slider {
  width: 95%;
  margin: auto;
  overflow: hidden;
}

.slider ul {
  display: flex;
  padding: 0;
  width: 400%;
  animation: cambio 20s infinite alternate linear;
}

.slider li {
  width: 100%;
  list-style: none;
}

.slider img {
  width: 100%;
}

@keyframes cambio {
  0% {
    margin-left: 0;
  }
  20% {
    margin-left: 0;
  }
  25% {
    margin-left: -100%;
  }
  45% {
    margin-left: -100%;
  }
  50% {
    margin-left: -200%;
  }
  70% {
    margin-left: -200%;
  }
  75% {
    margin-left: -300%;
  }
  100% {
    margin-left: -300%;
  }
}
...