CSS слайд-шоу изображений рядом друг с другом - PullRequest
Новая
       34

CSS слайд-шоу изображений рядом друг с другом

0 голосов
/ 13 декабря 2018

Я студент, изучающий основы HTML и CSS.Я создал веб-сайт с портфолио работ, созданных на уроке цифрового искусства, и создал простое слайд-шоу по CSS.Цель состояла в том, чтобы каждое изображение отображалось на отдельном слайде, и чтобы оно автоматически прокручивалось.Теперь я изменил размеры, чтобы они подходили, когда вкладка была развернута, и вместо этого они все рядом друг с другом на одном слайде.Вот HTML: 

@keyframes slider {
  0% {
    left: 0;
  }
  20% {
    left: 0;
  }
  25% {
    left: -100%;
  }
  45% {
    left: -100%;
  }
  50% {
    left: -200%;
  }
  70% {
    left: -200%;
  }
  75% {
    left: -300%;
  }
  95% {
    left: -300%;
  }
  100% {
    left: -400%;
  }
}

#slider {
  overflow: hidden;
}

#slider figure img {
  width: 20%;
  float: left;
}

#slider figure {
  position: relative;
  width: 500%;
  margin: 0;
  left: 0;
  text-align: left;
  font-size: 0;
  animation: 20s slider infinite;
}

img {
  display: block;
  max-width: 5%;
  width: auto;
  height: auto;
}
<div id="slider">
  <figure>
    <img src="riley%20clipping%20mask%20again.jpg" style="width:10%;">
    <img src="pouya%20t%20shirt%20design.jpg" style="width:10%;">
    <img src="Bob%20ross%20is%20our%20lord%20-riley.jpg" style="width:10%;">
    <img src="Pos%20and%20neg%20riley.jpg" style="width:10%;">
    <img src="ben%20is%20trippy.jpg" style="width:10%;">
  </figure>

</div>

1 Ответ

0 голосов
/ 13 декабря 2018

Очень просто.Ну вот.Пришлось изменить свои цифры на div и изменить некоторые параметры. 

@keyframes slider {
  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%;
  }
  95% {
    margin-left: -300%;
  }
  100% {
    margin-left: -400%;
  }
}

#slider {
  overflow: hidden;
  margin: 0 auto;
}

#container img {
  width: 20%;
  float: left;
}

#container {
  position: fixed;
  width: 500%;
  margin: 0;
  top: 50%;
  left: 50%;
  text-align: left;
  font-size: 0;
  animation: 20s slider infinite;
}

img {
  display: block;
  float: left;
  width: auto;
  height: auto;
}
<div id="slider">
  <div id="container">
    <img src="riley%20clipping%20mask%20again.jpg">
    <img src="pouya%20t%20shirt%20design.jpg">
    <img src="Bob%20ross%20is%20our%20lord%20-riley.jpg">
    <img src="Pos%20and%20neg%20riley.jpg">
    <img src="ben%20is%20trippy.jpg">
  </div>
</div>
...